fix: chat

components/Nav.vue

@@ -69,6 +69,6 @@ const menu = ref(false);
         </NavButton>
       </button>
     </div>
-    <NavEvent />
+    <!-- <NavEvent /> -->
   </div>
 </template>

composables/messages.ts

@@ -1,21 +1,24 @@
 import { useWebSocket } from "@vueuse/core";
+import ReconnectingWebSocket from "reconnecting-websocket";
 export const useMessages = () => {
   const messages = ref([]);
   const sendMessage = ref((_: any) => {});
   const ws = ref(null);
 
   onMounted(() => {
     const config = useRuntimeConfig();
-    const { ws: websocket, send } = useWebSocket(config.public.wsUrl, {
-      autoReconnect: true,
-    });
-    websocket.value.addEventListener("message", ({ data }) => {
+    // const { ws: websocket, send } = useWebSocket(config.public.wsUrl, {
+    //   autoReconnect: true,
+    // });
+    const websocket = new ReconnectingWebSocket("wss://data.elektron.art");
+
+    websocket.addEventListener("message", ({ data }) => {
       const message = JSON.parse(data);
       messages.value.push(message);
     });
     ws.value = websocket;
     sendMessage.value = (message: any) =>
-      send(
+      websocket.send(
         JSON.stringify({
           id: randomString(),
           datetime: new Date().toISOString(),

package.json

@@ -28,6 +28,7 @@
     "plausible-tracker": "^0.3.8",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
+    "reconnecting-websocket": "^4.4.0",
     "rss-parser": "^3.12.0",
     "unplugin-icons": "^0.14.9",
     "vite": "^3.1.1"

pages/lab/chat2.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const d = useDraggables({
+  chat1: { x: 100, y: 100 },
+  chat2: { x: 500, y: 100 },
+});
+</script>
+
+<template>
+  <Stack class="relative grid p-4 md:h-full md:place-items-center md:p-0">
+    <Breadboard class="bg-gray-900" />
+    <Draggable v-bind="d.chat1">
+      <Chat channel="chat1" class="h-[60vw] md:h-[30vw] md:w-[25vw]" />
+    </Draggable>
+  </Stack>
+</template>