added Quit Chat Button

frontend/src/pages/chat/chat.html

@@ -5,6 +5,7 @@
 		  ChatterBox<span id="t-username"></span>
     </h1><br>
     <button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
+    <button id="b-quit" class="btn-style absolute top-14 right-6">Quit Chat</button>
     <button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
 
     <!-- Center wrapper for chat + vertical box -->
@@ -12,9 +13,9 @@
       <!-- Groupe Chat + vertical box container -->
       <div id = "g-boxes" class="flex gap-2">
         <!-- Text Chat box panel + send -->
-        <div id = "g-textBoxes" class="flex flex-col">
+        <div id="g-textBoxes" class="flex flex-col">
           <div id="t-chatbox" class="chatbox-style"></div>
-          <div id = "t-input-send" class="flex gap-1 mt-2">
+          <div id="t-input-send" class="flex gap-1 mt-2">
             <input id="t-chat-window" placeholder="Type your message..." class="chat-window-style" />
             <button id="b-send" class="send-btn-style">Send</button>
           </div>

frontend/src/pages/chat/chat.ts

@@ -14,6 +14,9 @@ const color = {
 };
 
 
+
+
+
 // get the name of the machine used to connect 
 const machineHostName = window.location.hostname;
 console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);
@@ -101,6 +104,14 @@ if (bconnected) {
 	bconnected.click();
 }
 
+function logout(socket: Socket) {
+  socket.emit("logout");  // notify server
+  socket.disconnect();    // actually close the socket
+  localStorage.clear();
+  if (__socket !== undefined)
+		__socket.close();
+//   window.location.href = "/login";
+}
 
 
 function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
@@ -108,6 +119,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 
 	let socket = getSocket();
 	
+
+
 	// Listen for the 'connect' event
 	socket.on("connect", async () => {
 		
@@ -151,6 +164,16 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 		console.log("Getuser():", getUser());
 	});
 
+
+					
+
+	socket.on('logout', () => {
+		const bquit = document.getElementById('b-quit') as HTMLDivElement | null;
+		if (bquit instanceof HTMLDivElement) {	
+			bquit.click();
+		}
+	});
+
 	type Providers = {
 		name: string,
 		display_name: string,
@@ -191,6 +214,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			const bconnected = document.getElementById('b-help') as HTMLButtonElement;
 			const username = document.getElementById('username') as HTMLDivElement;
 			const buddies = document.getElementById('div-buddies') as HTMLDivElement;
+			const bquit = document.getElementById('b-quit') as HTMLDivElement;
 
 			chatWindow.textContent = '';
 			chatWindow.innerHTML = '';
@@ -240,16 +264,28 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			});
 
 
+
+
 			// Clear Text button
 			clearText?.addEventListener("click", () => {
+
 				if (chatWindow) {
 					bconnected.click();
 					chatWindow.innerHTML = '';
 				}
 			});
 
+			bquit?.addEventListener('click', () => {
+				if (socket) {
+					logout(socket);
+					setTitle('Chat Page');
+					bconnected.click();
+				} else {
+					getSocket();
+				}
+			});
+
 					
-			bconnected.click();
 			setInterval(async () => {
 			    bconnected.click();
 			}, 10000); // every 10 second
@@ -274,10 +310,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				}
 			
 			});
-			socket.on('listObj', (list: string) => {
-				console.log('List chat clients connected ', list);
-				addMessage(list);
-			});
 
 			socket.on('listBud', (myBuddies: string) => {
 				console.log('List buddies connected ', myBuddies);

src/chat/src/app.ts

@@ -131,7 +131,6 @@ async function onReady(fastify: FastifyInstance) {
 				console.log(color.yellow, 'Client:', color.reset, username.user);
 
 				const targetSocketId = target;
-				// io.to(targetSocketId!).emit('listObj', username.user);
 				io.to(targetSocketId!).emit('listBud', username.user);
 				console.log(
 					color.yellow,
@@ -160,23 +159,32 @@ async function onReady(fastify: FastifyInstance) {
 		return count;
 	}
 
-	function broadcast(data: ClientMessage, sender?: string) {
+function broadcast(data: ClientMessage, sender?: string) {
-		fastify.io.fetchSockets().then((sockets) => {
+	fastify.io.fetchSockets().then((sockets) => {
-			for (const s of sockets) {
+		for (const s of sockets) {
-				if (s.id !== sender) {
+
-					const clientName = clientChat.get(s.id)?.user;
+			// Skip sender's own socket
-					// Send REAL JSON object
+			if (s.id === sender) continue;
-					if (clientName !== undefined) {
+
-						s.emit('MsgObjectServer', { message: data });
+			// Get client name from map
-						console.log(color.green, 'Name Sender', clientChat);
+			const clientInfo = clientChat.get(s.id);
-					}
+
-					console.log(' Target window socket ID:', s.id);
+			if (!clientInfo?.user) {
-					console.log(' Target window ID:', [...s.rooms]);
+				console.log(color.yellow, `Skipping socket ${s.id} (no user found)`);
-					console.log(' Sender window ID:', sender ? sender : 'none');
+				continue;
-				}
 			}
-		});
+
-	}
+			// Emit structured JSON object
+			s.emit("MsgObjectServer", { message: data });
+
+			// Debug logs
+			console.log(color.green, "Broadcast to:", clientInfo.user);
+			console.log(" Target socket ID:", s.id);
+			console.log(" Target rooms:", [...s.rooms]);
+			console.log(" Sender socket ID:", sender ?? "none");
+		}
+	});
+}
 
 	fastify.io.on('connection', (socket: Socket) => {
 
@@ -256,6 +264,28 @@ async function onReady(fastify: FastifyInstance) {
 			}
 		});
 
+		socket.on("logout", () => {
+		  const clientInfo = clientChat.get(socket.id);
+		  const clientName = clientInfo?.user;
+		
+		  if (!clientName) return;
+		  	console.log(color.green, `Client logging out: ${clientName} (${socket.id})`);
+		  	const obj = {
+		    	type: "chat" as const,
+		    	user: clientName,
+		    	token: "",
+		    	text: "LEFT the chat",
+		    	timestamp: Date.now(),
+		    	SenderWindowID: socket.id,
+			};
+			broadcast(obj, socket.id);
+			// Optional: remove from map
+			clientChat.delete(socket.id);
+			// Ensure socket is fully disconnected
+			if (socket.connected) socket.disconnect(true);		
+		});
+
+
 
 		socket.on('disconnecting', (reason) => {
 			const clientName = clientChat.get(socket.id)?.user || null;