feat: Create message component

src/lib/components/message.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { type TypeMessage } from '../'
+  const { message, imageSrc, user }: TypeMessage   = $props()
+</script>
+
+<div class="w-full hover:bg-base-200 flex py-2">
+  <div class="avatar mx-2">
+    <div class="w-12 rounded">
+      <img src={imageSrc} alt="Profile image for {user}" />
+    </div>
+  </div>
+  <div class="flex-col">
+    <p class="font-bold">{user}</p>
+    <p>{message}</p>
+  </div>
+</div>

src/lib/index.ts

@@ -1 +1,7 @@
 // place files you want to import through the `$lib` alias in this folder.
+
+export interface TypeMessage {
+  message: string,
+  imageSrc: string,
+  user: string;
+}

src/lib/websocketConfig.ts

@@ -1,5 +1,6 @@
 import { Server as SocketIOServer } from 'socket.io';
 import type { HttpServer } from 'vite';
+import { type TypeMessage } from './'
 
 let io: SocketIOServer | undefined;
 
@@ -11,17 +12,20 @@ export function startupSocketIOServer(httpServer: HttpServer | null) {
   io.on('connection', (socket) => {
     // Runs on client connect
     console.log(`[ws:kit] client connected (${socket.id})`);
-    io!.emit('message', `[ws] Hello from SvelteKit ${new Date().toLocaleString()} (${socket.id})`);
+
 
     // Runs on message receive
     socket.on('message', (msg) => {
       console.log(`[ws:kit] message from ${socket.id}: ${msg}`);
-      io!.emit('message', `[${socket.id}] ${msg}`);
+      io!.emit('message', {
+        user: socket.id,
+        message: msg,
+        imageSrc: 'https://www.arithefirst.com/images/pfp.png'
+      });
     });
 
     // Runs on client disconnect
     socket.on('disconnect', () => {
-      io!.emit('message', `client disconnected (${socket.id})`);
       console.log(`[ws:kit] client disconnected (${socket.id})`);
     });
   });

src/routes/+page.svelte

@@ -1,30 +1,22 @@
 <script lang="ts">
   import { io } from 'socket.io-client';
   import { onMount } from 'svelte';
+  import Message from '../lib/components/message.svelte';
+  import { type TypeMessage } from '../lib';
 
   let socket: ReturnType<typeof io> | null = null;
-  let log: string[] = [];
+  let log: TypeMessage[] = [];
   let msg: string = '';
 
-  function logEvent(str: string) {
+  function logEvent(newMsg: TypeMessage) {
-    log = [...log, str];
+    log = [...log, newMsg];
   }
 
   function establishSocketIOConnection() {
     if (socket) return;
     socket = io();
 
-    socket.on('connect', () => {
+    socket.on('message', (data: TypeMessage) => {
-      console.log('[ws] connection open');
-      logEvent('[ws] connection open');
-    });
-
-    socket.on('disconnect', () => {
-      console.log('[ws] connection closed');
-      logEvent('[ws] connection closed');
-    });
-
-    socket.on('message', (data: string) => {
       console.log('[ws] message received', data);
       logEvent(data);
     });
@@ -52,9 +44,13 @@
     on:click={() => {
       log = [];
     }}>Clear</button>
-  <ul>
+  <section>
-    {#each log as event}
+    {#each log as message}
-      <li>{event}</li>
+      <Message
+        imageSrc={message.imageSrc}
+        user={message.user}
+        message={message.message}
+      />
     {/each}
-  </ul>
+  </section>
 </main>