update komponen

composables/useWebSocket.js

@@ -0,0 +1,79 @@
+import { ref, onUnmounted } from 'vue';
+
+/**
+ * Komposable untuk mengelola koneksi WebSocket.
+ * @param {string} url - URL WebSocket lengkap.
+ */
+export function useWebSocket(url) {
+  const ws = ref(null);
+  const data = ref(null);
+  const isConnected = ref(false);
+  const error = ref(null);
+  let reconnectTimer = null;
+
+  const connect = () => {
+    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+      console.log('[WS] Already connected.');
+      return;
+    }
+    
+    error.value = null;
+    console.log(`[WS] Attempting to connect to: ${url}`);
+    
+    ws.value = new WebSocket(url);
+
+    ws.value.onopen = () => {
+      isConnected.value = true;
+      console.log('✅ [WS] Connection established.');
+      clearTimeout(reconnectTimer);
+    };
+
+    ws.value.onmessage = (event) => {
+      // LOGIC PENTING: Menerima data dan memicu watcher di index.vue
+      console.log('🔔 [WS] Message received. Parsing data...'); 
+      try {
+        const parsedData = JSON.parse(event.data);
+        data.value = parsedData; 
+      } catch (e) {
+        error.value = new Error('Gagal memproses pesan WebSocket.');
+        console.error('❌ [WS] Data parsing error:', e);
+        data.value = null; 
+      }
+    };
+
+    ws.value.onerror = (e) => {
+      console.error('❌ [WS] WebSocket error:', e);
+      error.value = e;
+    };
+
+    ws.value.onclose = (event) => {
+      isConnected.value = false;
+      if (event.code !== 1000) {
+          console.log('🛑 [WS] Connection closed unexpectedly. Reconnecting in 5s...');
+          reconnectTimer = setTimeout(connect, 5000); // Reconnect setelah 5 detik
+      } else {
+          console.log('🛑 [WS] Connection closed normally.');
+      }
+    };
+  };
+  
+  const disconnect = () => {
+    if (ws.value) {
+        ws.value.close(1000, "Component unmounted");
+        ws.value = null;
+    }
+    clearTimeout(reconnectTimer);
+  };
+  
+  onUnmounted(() => {
+    disconnect();
+  });
+
+  return {
+    wsData: data,
+    isConnected,
+    error,
+    connect,
+    disconnect,
+  };
+}

composables/useWebSocket.ts

@@ -1,43 +0,0 @@
-import { io } from 'socket.io-client';
-import { usePaymentStore } from '~/stores/payment1';
-
-// Fungsi untuk mendapatkan IP Address lokal (ini butuh bantuan backend/API eksternal)
-async function getLocalIpAddress() {
-  // Anda bisa menggunakan API eksternal atau endpoint di backend Anda sendiri.
-  // Contoh menggunakan API eksternal:
-  // const response = await fetch('https://api.ipify.org?format=json');
-  // const data = await response.json();
-  // return data.ip;
-
-  // ATAU, jika IP address diatur secara statis pada tablet:
-  return '192.168.1.101'; // Ganti dengan IP Address loket yang sesungguhnya
-}
-
-export async function setupSocket() {
-  const paymentStore = usePaymentStore();
-  const socket = io('https://your-backend-api.com'); // Ganti dengan URL backend Anda
-
-  const localIp = await getLocalIpAddress();
-
-  socket.on('connect', () => {
-    console.log('Connected to backend WebSocket');
-    
-    // Mengirim IP Address tablet ke backend untuk identifikasi loket.
-    socket.emit('register-kiosk', { ipAddress: localIp });
-  });
-
-  socket.on('payment-data-ready', (data) => {
-    console.log('Payment data received:', data);
-    // Panggil action Pinia untuk memperbarui state dan pindah step
-    paymentStore.updatePayment(data); 
-  });
-
-  socket.on('disconnect', () => {
-    console.log('Disconnected from backend');
-  });
-
-  // Tambahkan error handling
-  socket.on('error', (error) => {
-    console.error('Socket error:', error);
-  });
-}