feat: setup socket io server

hhow09 · hhow09 · commit 28ff22114692 · 2025-01-22T00:40:35.000+01:00
- manual test with test_index.html
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .env
-dist
+dist
+.DS_Store
diff --git a/backend/package.json b/backend/package.json
@@ -14,7 +14,8 @@
       "@types/express": "^5.0.0",
       "@types/node": "^22.10.7",
       "express": "^4.21.2",
-      "pino": "^9.6.0"
+      "pino": "^9.6.0",
+      "socket.io": "^4.8.1"
     }
   }
   
diff --git a/backend/src/chat-server.ts b/backend/src/chat-server.ts
@@ -1,27 +1,49 @@
 import express, { Request, Response } from 'express';
 import { Logger } from "pino";
+import { Server, Socket } from "socket.io";
+import { createServer } from "http";
 
 export class ChatServer {
     port: number;
     app: express.Application;
     logger: Logger;
+    io: Server;
+
     constructor(logger: Logger, port: number = 3000) {
         this.port = port;
         this.logger = logger;
         this.app = express();
+        // ref: https://socket.io/docs/v4/server-initialization/#with-express
+        this.io = new Server(createServer(this.app), {
+            cors: {
+                origin: '*',
+            }
+        });
         this.setupAppRoutes();
+        this.setupSocketHandler();
     }
     setupAppRoutes() {
         // health check
-        // https://kubernetes.io/docs/reference/using-api/health-checks/
+        // ref: https://kubernetes.io/docs/reference/using-api/health-checks/
         this.app.get('/livez', (req: Request, res: Response) => {
             res.send('OK');
         });
     }
 
-    listen() {
-        this.app.listen(this.port, () => {
+    setupSocketHandler() {
+        this.io.on("listening", () => {
             this.logger.info(`Server running at http://localhost:${this.port}`);
         });
+        this.io.on('connection', (socket: Socket) => {
+            const sessionLogger = this.logger.child({ session: socket.id });
+            sessionLogger.info(`Connected client session ${socket.id} on port ${this.port}`);
+            socket.on('disconnect', () => {
+                sessionLogger.info('a client disconnected');
+            });
+        });
+    }
+
+    listen() {
+        this.io.listen(this.port);
     }
 }
diff --git a/frontend/test_index.html b/frontend/test_index.html
@@ -0,0 +1,46 @@
+<!-- https://github.com/socketio/socket.io-minimal-example/blob/main/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Socket.IO Fiddle</title>
+  </head>
+
+  <body>
+    <h2>Status: <span id="status">Disconnected</span></h2>
+    <h2>Messages:</h2>
+    <ul id="messages"></ul>
+
+    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
+    <script>
+      const status = document.getElementById("status");
+      const messages = document.getElementById("messages");
+
+      const appendMessage = (content) => {
+        const item = document.createElement("li");
+        item.textContent = content;
+        messages.appendChild(item);
+      };
+
+      const socket = io("http://localhost:3000");
+
+      socket.on("connect", () => {
+        status.innerText = "Connected";
+        appendMessage(`event: connect | session id: ${socket.id}`);
+      });
+
+      socket.on("connect_error", (err) => {
+        appendMessage(`event: connect_error | reason: ${err.message}`);
+      });
+
+      socket.on("disconnect", (reason) => {
+        status.innerText = "Disconnected";
+        appendMessage(`event: disconnect | reason: ${reason}`);
+      });
+
+      socket.onAny((event, ...args) => {
+        appendMessage(`event: ${event} | arguments: ${args}`);
+      });
+    </script>
+  </body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@`
`14`	`14`	`"@types/express": "^5.0.0",`
`15`	`15`	`"@types/node": "^22.10.7",`
`16`	`16`	`"express": "^4.21.2",`
`17`		`- "pino": "^9.6.0"`
	`17`	`+ "pino": "^9.6.0",`
	`18`	`+ "socket.io": "^4.8.1"`
`18`	`19`	`}`
`19`	`20`	`}`
`20`	`21`