websocket?

nginx/vue/src/components/quick/Chat.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+// Connect to websocket
+const url = "/api/ws";
+
+const socket = ref(null);
+const messages = ref([]);
+const messageInput = ref("");
+
+onMounted(() => {
+    socket.value = new WebSocket(url);
+
+    socket.value.addEventListener("message", (event) => {
+        const message = JSON.parse(event.data);
+        messages.value.push(message);
+    });
+});
+
+function sendMessage() {
+    socket.value.send(JSON.stringify({ content: messageInput.value }));
+    messageInput.value = "";
+}
+
+onUnmounted(() => {
+    socket.value?.close();
+});
+</script>
+
+<template>
+    <div>
+        <div class="flex-col">
+            <p v-for="message in messages" :key="message.id">
+                {{ message.content }}
+            </p>
+        </div>
+        <div class="flex-row">
+            <input v-model="messageInput" @keyup.enter="sendMessage" />
+            <button @click="sendMessage">Send</button>
+        </div>
+    </div>
+</template>

nginx/vue/src/views/Home.vue

@@ -1,6 +1,7 @@
 <script setup>
 import Timer from "@/components/quick/Timer.vue";
 import Time from "@/components/quick/Time.vue";
+import Chat from "@/components/quick/Chat.vue";
 
 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";
@@ -19,6 +20,7 @@ import Watching from "@/components/home/Watching.vue";
         <div class="flex-col tr">
             <Time class="bdr-2 bg-primary" />
             <Timer class="bdr-2 bg-primary" />
+            <Chat class="bdr-2 bg-primary" />
         </div>
     </div>
     <div class="background halftone" />