From d1496e1697cd5d7aa95f20ecb46cd7bd9aede93d Mon Sep 17 00:00:00 2001 From: NigeParis Date: Mon, 1 Dec 2025 12:16:08 +0100 Subject: [PATCH] added Quit Chat Button --- frontend/src/pages/chat/chat.html | 5 ++- frontend/src/pages/chat/chat.ts | 42 +++++++++++++++++--- src/chat/src/app.ts | 66 ++++++++++++++++++++++--------- 3 files changed, 88 insertions(+), 25 deletions(-) diff --git a/frontend/src/pages/chat/chat.html b/frontend/src/pages/chat/chat.html index dd8c5da..e6d9e92 100644 --- a/frontend/src/pages/chat/chat.html +++ b/frontend/src/pages/chat/chat.html @@ -5,6 +5,7 @@ ChatterBox
+ @@ -12,9 +13,9 @@
-
+
-
+
diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index 5706bb3..864608e 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/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); diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index 245d2d6..e426758 100644 --- a/src/chat/src/app.ts +++ b/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) { - fastify.io.fetchSockets().then((sockets) => { - for (const s of sockets) { - if (s.id !== sender) { - const clientName = clientChat.get(s.id)?.user; - // 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]); - console.log(' Sender window ID:', sender ? sender : 'none'); - } +function broadcast(data: ClientMessage, sender?: string) { + fastify.io.fetchSockets().then((sockets) => { + for (const s of sockets) { + + // Skip sender's own socket + if (s.id === sender) continue; + + // Get client name from map + const clientInfo = clientChat.get(s.id); + + if (!clientInfo?.user) { + console.log(color.yellow, `Skipping socket ${s.id} (no user found)`); + 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) => { @@ -229,7 +237,7 @@ async function onReady(fastify: FastifyInstance) { if (userFromFrontend.oldUser !== userFromFrontend.user) { console.log(color.red, 'list activated', userFromFrontend.oldUser, color.reset); - if (client?.user === null) { + if (client?.user === null) { console.log('ERROR: clientName is NULL'); return; }; @@ -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;