penambahan web socket

examples/nuxt3-websocket-client/composables/useWebSocket.js

@@ -0,0 +1,62 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+export function useWebSocket(url) {
+  const socket = ref(null);
+  const messages = ref([]);
+  const isConnected = ref(false);
+  const error = ref(null);
+
+  function connect() {
+    socket.value = new WebSocket(url);
+
+    socket.value.onopen = () => {
+      isConnected.value = true;
+      console.log("WebSocket connected");
+    };
+
+    socket.value.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        messages.value.push(data);
+      } catch (e) {
+        console.error("Failed to parse message", e);
+      }
+    };
+
+    socket.value.onerror = (event) => {
+      error.value = "WebSocket error";
+      console.error("WebSocket error", event);
+    };
+
+    socket.value.onclose = () => {
+      isConnected.value = false;
+      console.log("WebSocket disconnected");
+    };
+  }
+
+  function sendMessage(message) {
+    if (socket.value && isConnected.value) {
+      socket.value.send(JSON.stringify(message));
+    } else {
+      console.warn("WebSocket is not connected");
+    }
+  }
+
+  onMounted(() => {
+    connect();
+  });
+
+  onUnmounted(() => {
+    if (socket.value) {
+      socket.value.close();
+    }
+  });
+
+  return {
+    socket,
+    messages,
+    isConnected,
+    error,
+    sendMessage,
+  };
+}