Bug fixed multiple notification when user leaves by the side menu and comes back on chat without logining out

frontend/src/pages/chat/chat.ts

@@ -27,8 +27,8 @@ document.addEventListener('ft:pageChange', () => {
 })
 
 function getSocket(): Socket {
-	// let addressHost = `wss://${machineHostName}:8888`;
+	let addressHost = `wss://${machineHostName}:8888`;
-	let addressHost = `wss://localhost:8888`;
+	// let addressHost = `wss://localhost:8888`;
 	if (__socket === undefined)
 
 		__socket = io(addressHost, {
@@ -63,9 +63,12 @@ async function windowStateHidden() {
 async function windowStateVisable() {		
 	const socketId = __socket || undefined;
 	let oldName = localStorage.getItem("oldName") || undefined;
-	if (socketId == undefined) return;
+	console.log("%coldName :'" + oldName + "'", color.green);
+	
+	if (socketId === undefined || oldName === undefined) {console.log("%SOCKET ID", color.red); return;}
 	const res = await client.guestLogin();
 	let user = await updateUser();
+	console.log("%cUserName :'" + user?.name + "'", color.green);
 	socketId.emit('client_entered', {
 		userName: oldName,
 		user: user?.name,
@@ -101,10 +104,10 @@ if (bconnected) {
 
 
 function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
+	
+
 	let socket = getSocket();
-
+	
-
-
 	// Listen for the 'connect' event
 	socket.on("connect", async () => {
 		
@@ -163,6 +166,32 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 	};
 
 
+		let toggle = false
+		window.addEventListener("focus", () => {
+			if (window.location.pathname === "/app/chat" && !toggle) {
+			//   bconnected.click();
+			  console.log("%cWindow is focused on /chat:" + socket.id, color.green);
+			if (socket.id)
+				windowStateVisable();
+			  toggle = true;
+			}
+		});
+
+		window.addEventListener("blur", () => {
+		// if (window.location.pathname !== "/app/chat" && !toggle) {
+		// 	//   bconnected.click();
+		// 	  console.log("%cWindow is not focused on /chat", color.red);
+		
+			if (socket.id)
+				windowStateHidden();
+		// 	});
+		  		toggle = false;
+			// }
+		});
+
+
+
+
 	setTitle('Chat Page');
 	// Listen for the 'connect' event
 	return {
@@ -193,20 +222,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				return ;
 			};
 
-		if (window.location.pathname === "/app/chat") {
-		  window.addEventListener("focus", () => {
-			windowStateVisable();
-			bconnected.click();
-			console.log("%cWindow is focused on /chat", color.green);
-		  });
-		
-		  window.addEventListener("blur", () => {
-			windowStateHidden();
-			bconnected.click();
-			console.log("%cWindow is not focused on /chat", color.red);
-		  });
-		}
-
 			socket.once('welcome', (data) => {
 				chatWindow.textContent = '';
 				chatWindow.innerHTML = '';
@@ -214,7 +229,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				buddies.innerHTML = '';
 				bconnected.click();
 				addMessage (`${data.msg}  ` + getUser()?.name);
-			});
+		});
 
 			// Send button
 			sendButton?.addEventListener("click", () => {
@@ -331,5 +346,5 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 	}
 };
 addRoute('/chat', handleChat, { bypass_auth: true });
-addRoute('/chat/', handleChat, { bypass_auth: true });
+// addRoute('/chat/', handleChat, { bypass_auth: true });
 

frontend/src/routing/index.ts

@@ -196,7 +196,6 @@ export async function handleRoute() {
 		return navigateTo(`/login?returnTo=${encodeURIComponent(window.location.pathname)}`)
 	const app = document.getElementById('app')!;
 	document.dispatchEvent(new CustomEvent('ft:pageChange' as any, {} as any) as any);
-	document.dispatchEvent(new CustomEvent('ft:tabChange' as any, {} as any) as any);
 	let ret = await executeRouteHandler(route_handler, window.location.pathname, args)
 	app.innerHTML = ret.html;
 	if (ret.postInsert) {

src/chat/src/app.ts

@@ -168,6 +168,7 @@ async function onReady(fastify: FastifyInstance) {
 					// Send REAL JSON object
 					if (clientName !== undefined) {
 						s.emit('MsgObjectServer', { message: data });
+						console.log(color.green, 'Name Sender', clientChat);
 					}
 					console.log(' Target window socket ID:', s.id);
 					console.log(' Target window ID:', [...s.rooms]);
@@ -309,24 +310,24 @@ async function onReady(fastify: FastifyInstance) {
     		const userNameFromFrontend = data?.userName || null;
     		const userFromFrontend = data?.user || null;
 			let clientName = clientChat.get(socket.id)?.user || null;
-			const client = clientChat.get(socket.id) || null;
+			// const client = clientChat.get(socket.id) || null;
 			let text = 'is back in the chat';
 
 			if (clientName === null) {
 				console.log('ERROR: clientName is NULL'); return;
 			};
-			if (client === null) {
+			// if (client === null) {
-				console.log('ERROR: client is NULL'); return;
+			// 	console.log('ERROR: client is NULL'); return;
-			};
+			// };
 			if (userNameFromFrontend !== userFromFrontend) {
 				text = `'is back in the chat, I used to be called '${userNameFromFrontend}`;
 				clientName = userFromFrontend;
 				if (clientName === null) {
 					console.log('ERROR: clientName is NULL'); return;
 				};
-				if (client) {
+				// if (client) {
-  					client.user = clientName;
+  				// 	client.user = clientName;
-				}
+				// }
 			}
     		console.log(
     		    color.green,
@@ -346,5 +347,6 @@ async function onReady(fastify: FastifyInstance) {
     		    broadcast(obj, obj.SenderWindowID);
     		}
 		});
+
 	});
 }