socket fix

frontend/src/pages/chat/chat.ts

@@ -3,14 +3,24 @@ import { showError } from "@app/toast";
 import authHtml from './chat.html?raw';
 import client from '@app/api'
 import { getUser, updateUser } from "@app/auth";
-import io from 'socket.io-client';
+import io, { Socket } from 'socket.io-client';
 
-function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
+let __socket: Socket | undefined = undefined;
-	const socket = io("wss://localhost:8888", {
+function getSocket(): Socket {
+	if (__socket === undefined)
+		__socket = io("wss://localhost:8888", {
 			path: "/api/chat/socket.io/",
 			secure: false,
 			transports: ["websocket"],
 		});
+	return __socket;
+}
+
+
+
+
+function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
+	let socket = getSocket();
 	// Listen for the 'connect' event
 	socket.on("connect", () => {
 		console.log("I AM Connected to the server:", socket.id);
@@ -90,10 +100,11 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				messageElement.textContent = text;
 				chatWindow.appendChild(messageElement);
 				chatWindow.scrollTop = chatWindow.scrollHeight;
+				console.log(`Added new message: ${text}`)
 			};
 
 			// Send button
-		  	sendButton?.addEventListener("click",() => {
+			sendButton?.addEventListener("click", () => {
 				if (sendtextbox && sendtextbox.value.trim()) {
 					const msgText = sendtextbox.value.trim();
 					addMessage(msgText);
@@ -127,13 +138,12 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				if (chatWindow) {
 					addMessage('@list - lists all connected users in the chat');
 					await socket.emit('list');
-				
+				}
+			});
 			socket.on('listObj', (list: string) => {
 				console.log('List chat clients connected ', list);
 				addMessage(list);
 			});
-				}
-			});
 
 
 			// Enter key to send message

src/chat/src/app.ts

@@ -73,26 +73,27 @@ declare module 'fastify' {
 }
 
 async function onReady(fastify: FastifyInstance) {
-
-
 	function connectedUser(io?: Server, target?: string): number {
 		let count = 0;
-	  const seen = new Set<string>(); // <- only log/count unique usernames
+		const seen = new Set<string>();
+		// <- only log/count unique usernames
 
 		for (const [socketId, username] of clientChat) {
 			// Basic sanity checks
-	    if (typeof socketId !== "string" || socketId.length === 0) {
+			if (typeof socketId !== 'string' || socketId.length === 0) {
 				clientChat.delete(socketId);
 				continue;
 			}
-	    if (typeof username !== "string" || username.length === 0) {
+			if (typeof username !== 'string' || username.length === 0) {
 				clientChat.delete(socketId);
 				continue;
 			}
 
 			// If we have the io instance, attempt to validate the socket is still connected
-	    if (io && typeof io.sockets?.sockets?.get === "function") {
+			if (io && typeof io.sockets?.sockets?.get === 'function') {
-	      const s = io.sockets.sockets.get(socketId) as Socket | undefined;
+				const s = io.sockets.sockets.get(socketId) as
+					| Socket
+					| undefined;
 				// If socket not found or disconnected, remove from map and skip
 				if (!s || s.disconnected) {
 					clientChat.delete(socketId);
@@ -107,32 +108,43 @@ async function onReady(fastify: FastifyInstance) {
 				seen.add(username);
 				count++;
 				// console.log(color.green,"count: ", count);
-	      	console.log(color.yellow, "Client:", color.reset, username);
+				console.log(color.yellow, 'Client:', color.reset, username);
 
 				const targetSocketId: any = target;
-			io.to(targetSocketId).emit("listObj", username);
+				io.to(targetSocketId).emit('listObj', username);
 
-
+				console.log(
-	      	console.log(color.yellow, "Chat Socket ID:", color.reset, socketId);
+					color.yellow,
+					'Chat Socket ID:',
+					color.reset,
+					socketId,
+				);
 				continue;
 			}
 
 			// If no io provided, assume entries in the map are valid and count them.
 			count++;
-	    console.log(color.red, "Client (unverified):", color.reset, username);
+			console.log(
-	    console.log(color.red, "Chat Socket ID (unverified):", color.reset, socketId);
+				color.red,
+				'Client (unverified):',
+				color.reset,
+				username,
+			);
+			console.log(
+				color.red,
+				'Chat Socket ID (unverified):',
+				color.reset,
+				socketId,
+			);
 		}
 
 		return count;
 	}
 
-
 	function broadcast(data: ClientMessage, sender?: string) {
 		fastify.io.fetchSockets().then((sockets) => {
-
 			for (const s of sockets) {
 				if (s.id !== sender) {
-				
 					// Send REAL JSON object
 					const clientName = clientChat.get(s.id) || null;
 					if (clientName !== null) {
@@ -148,7 +160,12 @@ async function onReady(fastify: FastifyInstance) {
 
 	fastify.io.on('connection', (socket: Socket) => {
 		socket.on('message', (message: string) => {
-			console.info(color.blue, 'Socket connected!', color.reset, socket.id);
+			console.info(
+				color.blue,
+				'Socket connected!',
+				color.reset,
+				socket.id,
+			);
 			console.log(
 				color.blue,
 				'Received message from client',
@@ -156,7 +173,6 @@ async function onReady(fastify: FastifyInstance) {
 				message,
 			);
 
-			
 			const obj: ClientMessage = JSON.parse(message) as ClientMessage;
 			clientChat.set(socket.id, obj.user);
 			console.log(
@@ -167,10 +183,14 @@ async function onReady(fastify: FastifyInstance) {
 			);
 			// Send object directly — DO NOT wrap it in a string
 			broadcast(obj, obj.SenderWindowID);
-			console.log(color.red, 'connected in the Chat :', connectedUser(fastify.io), color.reset);
+			console.log(
+				color.red,
+				'connected in the Chat :',
+				connectedUser(fastify.io),
+				color.reset,
+			);
 		});
 
-		
 		socket.on('testend', (sock_id_cl: string) => {
 			console.log('testend received from client socket id:', sock_id_cl);
 		});
@@ -178,26 +198,23 @@ async function onReady(fastify: FastifyInstance) {
 		socket.on('list', () => {
 			console.log(color.red, 'list activated', color.reset, socket.id);
 			connectedUser(fastify.io, socket.id);
-
-
 		});
 
-
+		socket.on('disconnecting', (reason) => {
-
-
-		socket.on("disconnecting", (reason) => {
-
 			const clientName = clientChat.get(socket.id) || null;
-			console.log(color.green, `Client disconnecting: ${clientName} (${socket.id}) reason:`, reason);
+			console.log(
+				color.green,
+				`Client disconnecting: ${clientName} (${socket.id}) reason:`,
+				reason,
+			);
 			if (reason === 'transport error') return;
 
-			
 			if (clientName !== null) {
 				const obj = {
-  			   type: "chat",
+					type: 'chat',
 					user: clientName,
-  			   token: "",
+					token: '',
-  			   text: `LEFT the chat`,
+					text: 'LEFT the chat',
 					timestamp: Date.now(),
 					SenderWindowID: socket.id,
 				};