fix: Properly assign UUID to users on connect

src/lib/websocketConfig.ts

@@ -18,10 +18,10 @@ export function startupSocketIOServer(httpServer: HttpServer | null) {
       console.log(`[ws:kit] message from ${socket.id}: ${msg}`);
       // Store the message in the database
       await createChannel(client, '000');
-      await storeMessage(client, '000', msg, uuidv4(), uuidv4());
+      await storeMessage(client, '000', msg.content, msg.id, uuidv4());
       io!.emit('message', {
-        user: socket.id,
-        message: msg,
+        user: msg.id,
+        message: msg.content,
         imageSrc: 'https://www.arithefirst.com/images/pfp.png',
       });
     });

src/routes/+page.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import { io } from 'socket.io-client';
   import { onMount } from 'svelte';
+  import { v4 as uuidv4 } from 'uuid';
   import Message from '../lib/components/message.svelte';
   import { type TypeMessage } from '../lib';
 
+  let user: string | undefined;
   let socket: ReturnType<typeof io> | null = null;
   let log: TypeMessage[] = [];
   let msg: string = '';
@@ -24,19 +26,23 @@
 
   function sendMessage() {
     if (!socket) return;
-    socket.emit('message', msg);
+    socket.emit('message', { id: user, content: msg });
     msg = '';
   }
 
   onMount(() => {
     establishSocketIOConnection();
+    user = uuidv4();
   });
 </script>
 
 <main class="grid grid-cols-2 h-screen w-full">
   <div class="relative h-full w-full">
     <div class="h-fit col-span-1 w-10/12 abs-centered">
-      <h1 class="text-lg"><span class="text-svelte">SV</span>Chat</h1>
+      <div class="flex">
+        <span><span class="text-svelte">SV</span>Chat</span>
+        <span class="ml-auto">Logged in as <span class="font-bold">{user}</span></span>
+      </div>
       <form class="my-1 flex" on:submit={sendMessage}>
         <input type="text" placeholder="Type here" class="input input-bordered w-1/2 mr-1" bind:value={msg} />
         <button class="btn w-1/2" type="submit">Send Message</button>