From 4d939f611d39588770c47f6df0aea4ca51581e94 Mon Sep 17 00:00:00 2001
From: eiiko6 <myeiiko6@gmail.com>
Date: Mon, 15 Dec 2025 19:51:31 +0100
Subject: [PATCH] added an authenticated room websocket for messages

---
 src/api/client.ts      |  5 +--
 src/api/messages.ts    |  4 ++
 src/main.ts            |  3 ++
 src/pages/ChatPage.vue | 88 ++++++++++++++++++++++++++++++++++++------
 4 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/src/api/client.ts b/src/api/client.ts
index d1c186a..d0369cd 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -1,6 +1,5 @@
 import { initAuth } from '../stores/auth.ts'
-
-const BASE_URL = 'http://localhost:8080'
+import { API } from '../main.ts'
 
 export async function apiFetch<T>(
   path: string,
@@ -8,7 +7,7 @@ export async function apiFetch<T>(
 ): Promise<T> {
   const auth = await initAuth()
 
-  const res = await fetch(`${BASE_URL}${path}`, {
+  const res = await fetch(`${API}${path}`, {
     ...options,
     headers: {
       'Content-Type': 'application/json',
diff --git a/src/api/messages.ts b/src/api/messages.ts
index 2d9e116..9abb18a 100644
--- a/src/api/messages.ts
+++ b/src/api/messages.ts
@@ -15,3 +15,7 @@ export function sendMessage(roomUuid: string, content: string) {
   })
 }
 
+export async function getWsToken(roomUuid: string): Promise<string> {
+  const data = await apiFetch<{ token: string }>(`/ws/issue-token/rooms/${roomUuid}`);
+  return data.token;
+}
diff --git a/src/main.ts b/src/main.ts
index 5ddd84a..1b900d3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,3 +7,6 @@ import './base.css'
 createApp(App)
   .use(router)
   .mount('#app')
+
+export const API = 'http://127.0.0.1:8080'
+export const API_WS = 'ws://127.0.0.1:8080/ws'
diff --git a/src/pages/ChatPage.vue b/src/pages/ChatPage.vue
index 067a0c8..fbb5372 100644
--- a/src/pages/ChatPage.vue
+++ b/src/pages/ChatPage.vue
@@ -11,39 +11,72 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, nextTick } from "vue";
-import { fetchMessages, sendMessage } from "../api/messages";
+import { onMounted, onUnmounted, ref, nextTick } from "vue";
+import { fetchMessages, sendMessage, getWsToken } from "../api/messages";
 import type { Message } from "../types/api";
 import MessageList from "../components/MessageList.vue";
 import MessageInput from "../components/MessageInput.vue";
+import { API_WS } from '../main.ts'
+
+let socket: WebSocket | null = null;
 
 const props = defineProps<{ uuid: string }>();
 const messages = ref<Message[]>([]);
 
+const messageListRef = ref<HTMLElement | null>(null);
+
 async function load() {
   messages.value = await fetchMessages(props.uuid);
 }
 
 async function onSend(content: string) {
-  const msg = await sendMessage(props.uuid, content);
-  messages.value.push(msg);
+  await sendMessage(props.uuid, content);
+  // messages.value.push(msg);
   await nextTick();
   scrollToBottom();
 }
 
-onMounted(async () => {
-  await load();
-  await nextTick();
-  scrollToBottom();
-});
-
-const messageListRef = ref<HTMLElement | null>(null);
-
 function scrollToBottom() {
   if (messageListRef.value) {
     messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
   }
 }
+
+onMounted(async () => {
+  await load();
+  await nextTick();
+  scrollToBottom();
+
+  // Fetch WebSocket token from the backend
+  const wsToken = await getWsToken(props.uuid);
+
+  // Connect to the WebSocket with the token
+  socket = new WebSocket(`${API_WS}/rooms/${props.uuid}?token=${wsToken}`);
+
+  socket.onmessage = (event) => {
+    const msg: Message = JSON.parse(event.data);
+
+    const exists = messages.value.some(
+      (m) =>
+        m.sent_at === msg.sent_at &&
+        m.sender === msg.sender &&
+        m.content === msg.content
+    );
+
+    if (!exists) {
+      messages.value.push(msg);
+      nextTick().then(scrollToBottom);
+    }
+  };
+
+  socket.onclose = () => {
+    console.warn("WebSocket closed");
+  };
+});
+
+onUnmounted(() => {
+  socket?.close();
+});
 </script>
 
 <style scoped>
@@ -75,3 +108,34 @@ function scrollToBottom() {
   background: var(--panel);
 }
 </style>
+
+
+<style scoped>
+.chat-page {
+  display: flex;
+  flex-direction: column;
+  height: 95%;
+  width: 90%;
+  padding: 15px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  overflow: hidden;
+}
+
+.messages-container {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  word-wrap: break-word;
+}
+
+.input-container {
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+</style>