feat: Support for sending messages in different channels

src/lib/index.ts

@@ -5,3 +5,10 @@ export interface TypeMessage {
   imageSrc: string;
   user: string;
 }
+
+export interface TypeFullMessage {
+  channel: string;
+  message: string;
+  imageSrc: string;
+  user: string;
+}

src/lib/websocketConfig.ts

@@ -27,11 +27,12 @@ export function startupSocketIOServer(httpServer: HttpServer | null) {
       if (msg.content !== '') {
         console.log(`\x1b[35m[ws:kit]\x1b[0m message from ${socket.id}: ${msg.content}`);
         // Store the message in the database
-        await db.sendMessage('general', msg.content, msg.id, uuidv4());
+        await db.sendMessage(msg.channel, msg.content, msg.id, uuidv4());
         io!.emit('message', {
           user: msg.id,
           message: msg.content,
           imageSrc: `https://api.dicebear.com/9.x/identicon/svg?seed=${msg.id}`,
+          channel: msg.channel,
         });
       }
     });

src/routes/channel/[channel]/+page.server.ts

@@ -13,6 +13,7 @@ export async function load({ params }): Promise<{ messages: TypeMessage[] }> {
             message: value.message_content,
             user: value.sender.toString(),
             imageSrc: `https://api.dicebear.com/9.x/identicon/svg?seed=${value.sender.toString()}`,
+            channel: value.channel,
           };
         })
       : [];

src/routes/channel/[channel]/+page.svelte

@@ -2,36 +2,47 @@
   import { io } from 'socket.io-client';
   import { onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
-  import { type TypeMessage } from '$lib';
+  import type { TypeMessage, TypeFullMessage } from '$lib';
   import type { PageData } from './$types';
   import { Input } from '$lib/components/ui/input/index';
   import { Button } from '$lib/components/ui/button/index';
   import Send from 'lucide-svelte/icons/send';
   import Message from '$lib/components/message.svelte';
+  import { page } from '$app/state';
 
   let { data }: { data: PageData } = $props();
   let user: string | undefined;
   let socket: ReturnType<typeof io> | null = null;
   let log: TypeMessage[] = $state([]);
   let msg: string = $state('');
+  const channel = $derived(page.params.channel);
 
   function logEvent(newMsg: TypeMessage) {
-    log = [newMsg, ...log];
+    log = [
+      {
+        message: newMsg.message,
+        imageSrc: newMsg.imageSrc,
+        user: newMsg.user,
+      },
+      ...log,
+    ];
   }
 
   function establishSocketIOConnection() {
     if (socket) return;
     socket = io();
 
-    socket.on('message', (data: TypeMessage) => {
+    socket.on('message', (data: TypeFullMessage) => {
       console.log('[ws] message received', data);
-      logEvent(data);
+      if (data.channel == channel) {
+        logEvent(data);
+      }
     });
   }
 
   function sendMessage() {
     if (!socket) return;
-    socket.emit('message', { id: user, content: msg });
+    socket.emit('message', { id: user, content: msg, channel: channel });
     msg = '';
   }