SSE on words

pages/index.vue

@@ -1,7 +1,26 @@
 <script setup lang="ts">
+import { subscribe } from "~/netcode";
+import { getGames } from "~/service/game.service";
 
+let eventSource: EventSource;
+
+const games = await getGames();
+
+onBeforeMount(() => {
+  eventSource = subscribe(`/games/subscribe`);
+  eventSource.addEventListener("message", async (message) => {
+    console.log(message);
+  });
+});
+
+onUnmounted(() => {
+  if (eventSource) {
+    eventSource.close();
+  }
+});
 </script>
 
 <template>
-    Hello
+  <div v-for="game in games" :key="game.id"></div>
+  <input type="button" value="Create Game" />
 </template>

pages/words.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { subscribe } from "~/netcode";
+import { handlers } from "~/netcode/handlers/word.handler";
 import { useWordStore } from "~/store/word.store";
 
 const newWord = ref("");
@@ -27,12 +29,23 @@ async function createWord(e: Event) {
   }
 }
 
-// watch(wordInput, (e) =>
-//   setInterval(() => {
-//     // e.focus();
-//     console.log(wordInput.value);
-//   }, 1000)
-// );
+let eventSource: EventSource;
+onBeforeMount(() => {
+  eventSource = subscribe(`/words/subscribe`);
+  eventSource.addEventListener("message", async (message) => {
+    const data = JSON.parse(message.data);
+    const type = data.type as string;
+    if (type in handlers) {
+      handlers[type as keyof typeof handlers](data);
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (eventSource) {
+    eventSource.close();
+  }
+});
 </script>
 
 <template>