feat: Add message send/recive system

prodServer.ts

@@ -8,9 +8,17 @@ const server = createServer(app);
 const io = new Server(server);
 
 io.on('connection', (socket) => {
+  // Runs on client connect
   console.log(`[ws:kit] client connected (${socket.id})`);
-  io!.emit('message', `Hello from SvelteKit ${new Date().toLocaleString()} (${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}`);
+  });
+
+  // Runs on client disconnect
   socket.on('disconnect', () => {
     io!.emit('message', `client disconnected (${socket.id})`);
     console.log(`[ws:kit] client disconnected (${socket.id})`);

src/lib/websocketConfig.ts

@@ -7,10 +7,19 @@ export function startupSocketIOServer(httpServer: HttpServer | null) {
   if (io) return;
   console.log('[ws:kit] setup');
   io = new SocketIOServer(httpServer);
-  io.on('connection', (socket) => {
-    console.log(`[ws:kit] client connected (${socket.id})`);
-    io!.emit('message', `Hello from SvelteKit ${new Date().toLocaleString()} (${socket.id})`);
 
+  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}`);
+    });
+
+    // 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,8 +1,10 @@
 <script lang="ts">
   import { io } from 'socket.io-client';
+  import { onMount } from 'svelte';
 
   let socket: ReturnType<typeof io> | null = null;
   let log: string[] = [];
+  let msg: string = '';
 
   function logEvent(str: string) {
     log = [...log, str];
@@ -24,16 +26,32 @@
 
     socket.on('message', (data: string) => {
       console.log('[ws] message received', data);
-      logEvent(`[ws] message received: ${data}`);
+      logEvent(data);
     });
   }
+
+  function sendMessage() {
+    if (!socket) return;
+    socket.emit('message', msg);
+    msg = '';
+  }
+
+  onMount(() => {
+    establishSocketIOConnection();
+  });
 </script>
 
-<main>
+<main class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-1/2 h-fit">
   <h1 class="text-lg"># SvelteKit with Socket.IO Integration</h1>
-
-  <button class="btn btn-primary" on:click={() => establishSocketIOConnection()}> Establish Socket.IO connection </button>
-
+  <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</button>
+  </form>
+  <button
+    class="btn w-full"
+    on:click={() => {
+      log = [];
+    }}>Clear</button>
   <ul>
     {#each log as event}
       <li>{event}</li>