update async dan interface

composables/useWebSocket.ts

@@ -0,0 +1,43 @@
+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);
+  });
+}