Fix up live chat

nginx/vue/src/components/util/Chat.vue

@@ -1,9 +1,18 @@
 <script setup>
+import { ref, computed, onMounted, onUnmounted } from "vue";
 import Button from "@/components/input/Button.vue";
 import { useMessagesStore } from "@/stores/messages";
 
 const messagesStore = useMessagesStore();
 const messages = computed(() => messagesStore.messages);
+const messageInput = ref("");
+
+function sendMessage() {
+    const text = messageInput.value.trim();
+    if (!text) return;
+    messagesStore.sendMessage(text);
+    messageInput.value = "";
+}
 
 onMounted(() => {
     messagesStore.connect();
@@ -17,7 +26,7 @@ onUnmounted(() => {
     <div>
         <div class="flex flex-col">
             <p v-for="message in messages" :key="message.id">
-                {{ message.content }}
+                {{ message.text }}
             </p>
         </div>
         <div class="flex flex-row">

nginx/vue/src/stores/messages.js

@@ -1,16 +1,14 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
 
-const URL = "/api/ws";
-
-const message_template = {
-  id: 0,
-  content: "Yo",
-};
+function getWebSocketURL() {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${window.location.host}/api/ws`;
+}
 
 export const useMessagesStore = defineStore("messages", () => {
   const socket = ref(null);
-  const messages = ref([message_template]);
+  const messages = ref([]);
   const isConnected = ref(false);
   const lastError = ref(null);
 
@@ -19,7 +17,7 @@ export const useMessagesStore = defineStore("messages", () => {
   function connect() {
     if (socket.value && isConnected.value) return;
 
-    socket.value = new WebSocket(URL);
+    socket.value = new WebSocket(getWebSocketURL());
 
     socket.value.onopen = () => {
       isConnected.value = true;
@@ -31,8 +29,7 @@ export const useMessagesStore = defineStore("messages", () => {
         const data = JSON.parse(event.data);
         messages.value.push(data);
       } catch {
-        // fallback if server sends plain text
-        messages.value.push(event.data);
+        messages.value.push({ text: event.data });
       }
     };
 
@@ -53,9 +50,9 @@ export const useMessagesStore = defineStore("messages", () => {
     isConnected.value = false;
   }
 
-  function sendMessage(payload) {
+  function sendMessage(text) {
     if (!socket.value || !isConnected.value) return;
-    socket.value.send(JSON.stringify(payload));
+    socket.value.send(JSON.stringify({ text }));
   }
 
   function clearMessages() {

nginx/vue/src/views/home/Home.vue

@@ -28,6 +28,7 @@ import Consumption from "./Consumption.vue";
                 class="sidebar border-children background-children place-content-between flex-1 flex flex-col m-10 w-60"
             >
                 <Miku />
+                <Chat />
             </div>
             <div
                 class="a4page-portrait homeGrid relative background-children border-children bdr-1"
@@ -56,7 +57,6 @@ import Consumption from "./Consumption.vue";
                     <CommitHistory class="text-center" />
 
                     <!-- <Elle class="flex-1" /> -->
-                    <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
                     <!-- <MusicPlayer /> -->
                 </div>
                 <div>