socket io with fastify

frontend/src/pages/chat/chat.ts

@@ -3,24 +3,25 @@ import { showError } from "@app/toast";
 import authHtml from './chat.html?raw';
 import client from '@app/api'
 import { updateUser } from "@app/auth";
-import  io  from "socket.io-client"
+import io from "socket.io-client";
 
 
 // const socket = io("wss://localhost:8888");
 
-const socket = io("wss://localhost:8888", {
-  path: "/app/chat/socket.io/",
-  secure: false,
+const socket = io("wss://local.maix.me:8888", {
+	path: "/api/chat/socket.io/",
+	secure: true,
 	transports: ["websocket"],
 });
 
 // Listen for the 'connect' event
-socket.on("connect", () => {
+socket.on("connect", async () => {
 	console.log("Connected to the server: ", socket.id);
-	// Send a message to the server
-	socket.send("Hello from the client: " + `${socket.id}`);
 	// Emit a custom event 'coucou' with some data
 	socket.emit("coucou", { message: "Hello Nigel from coucou!" });
+	console.log('sent coucou');
+	// Send a message to the server
+	socket.send("Hello from the client: " + `${socket.id}`);
 });
 
 
@@ -42,19 +43,17 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 
 			const sendButton = document.getElementById('b-send') as HTMLButtonElement;
 			const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
-			const sendtextbox= document.getElementById('t-chat-window') as HTMLButtonElement;
+			const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
 			const blogout = document.getElementById('b-logout') as HTMLButtonElement;
 			const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
 			const username = document.getElementById('username') as HTMLDivElement;
 
 
 			const value = await client.chatTest();
-			if (value.kind === "success")
-			{
+			if (value.kind === "success") {
 				console.log(value.payload);
 			}
-			else if (value.kind === "notLoggedIn")
-			{
+			else if (value.kind === "notLoggedIn") {
 
 			} else {
 				console.log('unknown response: ', value);

nginx/conf/locations/chat.conf

@@ -10,9 +10,5 @@ location /api/chat/socket.io/ {
     proxy_set_header Connection "Upgrade";
     proxy_set_header Host $host;
     proxy_read_timeout 3600s;
-	root /volumes/static/chat;
-	proxy_pass http://chat$uri;
-	# proxy_pass http://chat;
-
-
+	proxy_pass http://chat;
 }

src/chat/package.json

@@ -28,6 +28,7 @@
 		"fastify": "^5.6.2",
 		"fastify-cli": "^7.4.1",
 		"fastify-plugin": "^5.1.0",
+		"fastify-socket.io": "^5.1.0",
 		"socket.io": "^4.8.1"
 	},
 	"devDependencies": {

src/chat/src/app.ts

@@ -5,6 +5,8 @@ import * as db from '@shared/database';
 import * as auth from '@shared/auth';
 import * as swagger from '@shared/swagger';
 import * as utils from '@shared/utils';
+import { Server } from 'socket.io';
+import useSocketIo from 'fastify-socket.io';
 
 declare const __SERVICE_NAME: string;
 
@@ -15,8 +17,12 @@ const routes = import.meta.glob('./routes/**/*.ts', { eager: true });
 
 // When using .decorate you have to specify added properties for Typescript
 declare module 'fastify' {
-	export interface FastifyInstance {
-		image_store: string;
+	interface FastifyInstance {
+		io: Server<{
+			hello: (message: string) => string,
+			coucou: (data: { message: string }) => void,
+			message: (msg: string) => void,
+		}>
 	}
 }
 
@@ -27,6 +33,9 @@ const app: FastifyPluginAsync = async (fastify, opts): Promise<void> => {
 	await fastify.register(db.useDatabase as FastifyPluginAsync, {});
 	await fastify.register(auth.jwtPlugin as FastifyPluginAsync, {});
 	await fastify.register(auth.authPlugin as FastifyPluginAsync, {});
+	await fastify.register(useSocketIo, {
+		path: '/api/chat/socket.io',
+	});
 
 	// Place here your custom code!
 	for (const plugin of Object.values(plugins)) {
@@ -39,6 +48,22 @@ const app: FastifyPluginAsync = async (fastify, opts): Promise<void> => {
 	void fastify.register(fastifyFormBody, {});
 	void fastify.register(fastifyMultipart, {});
 	fastify.get('/monitoring', () => 'Ok');
+
+	fastify.ready((err) => {
+		if (err) throw err;
+
+		fastify.io.on('connection', (socket) => {
+			console.info('Socket connected!', socket.id);
+			socket.on('hello', (value) => {
+				console.log(`GOT HELLO ${value}`);
+				return 'hi';
+			});
+			socket.on('message', (value) => console.log(`GOT MESSAGE ${value}`));
+			socket.on('coucou', (value) => console.log(`GOT COUCOU ${value.message}`));
+		},
+		);
+
+	});
 };
 
 export default app;

src/chat/src/routes/nginx-chat.ts

@@ -1,26 +1,23 @@
 import { FastifyPluginAsync } from 'fastify';
 import { MakeStaticResponse, typeResponse } from '@shared/utils';
 import { Type } from '@sinclair/typebox';
-import Fastify from 'fastify'
-import { Server } from "socket.io"
-import { Socket } from "socket.io";
+import Fastify from 'fastify';
+import { Server } from 'socket.io';
+import { Socket } from 'socket.io';
+import * as fsocketio from 'fastify-socket.io';
 
 
 const fastify = Fastify();
 
 const io = new Server(fastify.server, {
-  path: "/app/chat/socket.io/",
-  cors: { origin: "*" },
+	path: '/app/chat/socket.io/',
+	cors: { origin: '*' },
 });
 
 
-
-io.on("connection", (socket: Socket) => {
-  console.log("testing")
+io.on('connection', (socket: Socket) => {
+	console.log('testing');
 	console.log(`Client connected: ${socket.id}`);
-	socket.on("message", (data: any) => console.log(data, `socketID: ${socket.id}`));
-	socket.once("message", () => socket.send("connected succesfully"));
-	socket.once("coucou", (data: any) => console.log(data))
 });
 
 
@@ -32,9 +29,24 @@ export const ChatRes = {
 	}),
 };
 
+
 export type ChatResType = MakeStaticResponse<typeof ChatRes>;
 
 const route: FastifyPluginAsync = async (fastify): Promise<void> => {
+	/* await fastify.register(fsocketio.default);
+
+	fastify.get('/api/chat/socket.io', (req, reply) => {
+		console.log('GOT SOCKET ?!');
+
+		const socket = (fastify as any).io;
+		socket.emit('hello');
+		socket.on('message', (data: any) => console.log(data, `socketID: ${socket.id}`));
+		socket.once('message', () => socket.send('connected succesfully'));
+		socket.once('coucou', (data: any) => console.log(data));
+	});
+	*/
+
+
 	fastify.get(
 		'/api/chat/test',
 		{

src/pnpm-lock.yaml

@@ -179,6 +179,9 @@ importers:
       fastify-plugin:
         specifier: ^5.1.0
         version: 5.1.0
+      fastify-socket.io:
+        specifier: ^5.1.0
+        version: 5.1.0(fastify@5.6.2)(socket.io@4.8.1)
       socket.io:
         specifier: ^4.8.1
         version: 4.8.1
@@ -1788,9 +1791,18 @@ packages:
     resolution: {integrity: sha512-7Jsfj2uLuGWvnxjrGDrHWpSm65+OcVx0ZbTD2wwkz6Wt6KjGm6+ZYwwpdXdwAlzbJYq+LCEMNvDJc4485AQ1vQ==}
     hasBin: true
 
+  fastify-plugin@4.5.1:
+    resolution: {integrity: sha512-stRHYGeuqpEZTL1Ef0Ovr2ltazUT9g844X5z/zEBFLG8RYlpDiOCIG+ATvYEp+/zmc7sN29mcIMp8gvYplYPIQ==}
+
   fastify-plugin@5.1.0:
     resolution: {integrity: sha512-FAIDA8eovSt5qcDgcBvDuX/v0Cjz0ohGhENZ/wpc3y+oZCY2afZ9Baqql3g/lC+OHRnciQol4ww7tuthOb9idw==}
 
+  fastify-socket.io@5.1.0:
+    resolution: {integrity: sha512-GC1gjrxBGeTbMWV779XHF4uw3AtgKwSQJ9MnjGiMp91ZBuPXEdBYa7NnAMDEl3oZPgK9JO4BlNncTV+UAN+1kg==}
+    peerDependencies:
+      fastify: 4.x.x
+      socket.io: '>=4'
+
   fastify@5.6.2:
     resolution: {integrity: sha512-dPugdGnsvYkBlENLhCgX8yhyGCsCPrpA8lFWbTNU428l+YOnLgYHR69hzV8HWPC79n536EqzqQtvhtdaCE0dKg==}
 
@@ -4899,8 +4911,17 @@ snapshots:
       semver: 7.7.3
       yargs-parser: 22.0.0
 
+  fastify-plugin@4.5.1: {}
+
   fastify-plugin@5.1.0: {}
 
+  fastify-socket.io@5.1.0(fastify@5.6.2)(socket.io@4.8.1):
+    dependencies:
+      fastify: 5.6.2
+      fastify-plugin: 4.5.1
+      socket.io: 4.8.1
+      tslib: 2.8.1
+
   fastify@5.6.2:
     dependencies:
       '@fastify/ajv-compiler': 4.0.5