From 438cb10abb162d452624a543f9275df60bccf2b8 Mon Sep 17 00:00:00 2001 From: NigeParis Date: Sat, 29 Nov 2025 14:16:20 +0100 Subject: [PATCH] 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 | 59 +++++++++++++++++++++------------ frontend/src/routing/index.ts | 1 - src/chat/src/app.ts | 16 +++++---- 3 files changed, 46 insertions(+), 30 deletions(-) diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index 1636c86..a0c3faf 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/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://localhost:8888`; + let addressHost = `wss://${machineHostName}: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 }); diff --git a/frontend/src/routing/index.ts b/frontend/src/routing/index.ts index 9e504db..0c0b9a4 100644 --- a/frontend/src/routing/index.ts +++ b/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) { diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index c4e6677..245d2d6 100644 --- a/src/chat/src/app.ts +++ b/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) { - console.log('ERROR: client is NULL'); return; - }; + // if (client === null) { + // 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) { - client.user = clientName; - } + // if (client) { + // client.user = clientName; + // } } console.log( color.green, @@ -346,5 +347,6 @@ async function onReady(fastify: FastifyInstance) { broadcast(obj, obj.SenderWindowID); } }); + }); }