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,
+  };
+}