From 4ed588daa5f37988e047621fb05e8b3739ac183f Mon Sep 17 00:00:00 2001 From: NigeParis Date: Thu, 27 Nov 2025 18:20:19 +0100 Subject: [PATCH] Added machine Name to display address of connect in logs --- docker-compose.yml | 2 +- frontend/src/chat/chat.css | 9 +- frontend/src/pages/chat/chat.ts | 156 +++++++++++++++++++++++++------- src/chat/src/app.ts | 23 +++-- 4 files changed, 147 insertions(+), 43 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 1b166ef..ce19a47 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -122,7 +122,7 @@ services: - JWT_SECRET=KRUGKIDROVUWG2ZAMJZG653OEBTG66BANJ2W24DTEBXXMZLSEB2GQZJANRQXU6JA - DATABASE_DIR=/volumes/database - PROVIDER_FILE=/extra/providers.toml - + - SESSION_MANAGER=${SESSION_MANAGER} ############### # USER # diff --git a/frontend/src/chat/chat.css b/frontend/src/chat/chat.css index e2ddc60..b3cb9c3 100644 --- a/frontend/src/chat/chat.css +++ b/frontend/src/chat/chat.css @@ -92,6 +92,13 @@ p { div-test { @apply text-red-800 - text-right + text-right; + +} +div-notlog { + @apply + text-red-800 + text-3xl + text-center; } \ No newline at end of file diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index ba8dea1..65b5f69 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/frontend/src/pages/chat/chat.ts @@ -5,6 +5,21 @@ import client from '@app/api' import { getUser, updateUser } from "@app/auth"; import io, { Socket } from 'socket.io-client'; +const color = { + red: 'color: red; font-weight: bold;', + green: 'color: green; font-weight: bold;', + yellow: 'color: orange; font-weight: bold;', + blue: 'color: blue; font-weight: bold;', + reset: '', // not needed in browser +}; + + +// get the name of the machine useed to connect +const machineHostName = window.location.hostname; +console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow); + + + let __socket: Socket | undefined = undefined; document.addEventListener('ft:pageChange', () => { if (__socket !== undefined) @@ -15,8 +30,10 @@ document.addEventListener('ft:pageChange', () => { function getSocket(): Socket { + let addressHost = `wss://${machineHostName}:8888`; if (__socket === undefined) - __socket = io("wss://localhost:8888", { + + __socket = io(addressHost, { path: "/api/chat/socket.io/", secure: false, transports: ["websocket"], @@ -31,38 +48,88 @@ async function isLoggedIn() { -function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn { - let socket = getSocket(); - - - -document.addEventListener("visibilitychange", async () => { +async function windowStateHidden() { const socketId = __socket || undefined; let oldName = localStorage.getItem("oldName") || undefined; if (socketId == undefined) return; - if (document.visibilityState === "hidden") { - let userName = await updateUser(); - oldName = userName?.name || undefined; - if (oldName === undefined) return; - localStorage.setItem('oldName', oldName); - socketId.emit('client_left', { - user: userName?.name, - why: 'tab window hidden - socket not dead', - }); - return; - } - if (document.visibilityState === "visible") { - const res = await client.guestLogin(); - let user = await updateUser(); - socketId.emit('client_entered', { - userName: oldName, - user: user?.name, - }); - setTitle('Chat Page'); - return; - } -}); + let userName = await updateUser(); + oldName = userName?.name || undefined; + if (oldName === undefined) return; + localStorage.setItem('oldName', oldName); + socketId.emit('client_left', { + user: userName?.name, + why: 'tab window hidden - socket not dead', + }); + return; +} + + +async function windowStateVisable() { + const socketId = __socket || undefined; + let oldName = localStorage.getItem("oldName") || undefined; + if (socketId == undefined) return; + const res = await client.guestLogin(); + let user = await updateUser(); + socketId.emit('client_entered', { + userName: oldName, + user: user?.name, + }); + setTitle('Chat Page'); + return; +} + + + + + + + + + + +function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn { + let socket = getSocket(); + + +// document.addEventListener("visibilitychange", async () => { + +// const socketId = __socket || undefined; +// let oldName = localStorage.getItem("oldName") || undefined; + + + +// if (socketId == undefined) return; +// if (document.visibilityState === "hidden") { +// let userName = await updateUser(); +// oldName = userName?.name || undefined; +// if (oldName === undefined) return; +// localStorage.setItem('oldName', oldName); +// socketId.emit('client_left', { +// user: userName?.name, +// why: 'tab window hidden - socket not dead', +// }); +// return; +// } + + + +// if (document.visibilityState === "visible") { +// const res = await client.guestLogin(); +// let user = await updateUser(); +// socketId.emit('client_entered', { +// userName: oldName, +// user: user?.name, +// }); +// setTitle('Chat Page'); +// return; +// } + + + + + +// }); @@ -133,11 +200,7 @@ document.addEventListener("visibilitychange", async () => { const value = await client.chatTest(); if (value.kind === "success") { console.log(value.payload); - } else if (value.kind === "notLoggedIn") { - console.log('not logged in'); - } else { - console.log('unknown response: ', value); - } + const addMessage = (text: string) => { @@ -147,8 +210,20 @@ document.addEventListener("visibilitychange", async () => { chatWindow.appendChild(messageElement); chatWindow.scrollTop = chatWindow.scrollHeight; console.log(`Added new message: ${text}`) + return ; }; + if (window.location.pathname === "/app/chat") { + window.addEventListener("focus", () => { + windowStateVisable(); + console.log("%cWindow is focused on /chat", color.green); + }); + + window.addEventListener("blur", () => { + windowStateHidden(); + console.log("%cWindow is not focused on /chat", color.red); + }); + } socket.once('welcome', (data) => { addMessage (`${data.msg} ` + getUser()?.name); @@ -253,6 +328,19 @@ document.addEventListener("visibilitychange", async () => { showError('Failed to login: Unknown error'); } }); + + } else if (value.kind === "notLoggedIn") { + + if (!chatWindow) return; + const messageElement = document.createElement('div-notlog'); + messageElement.textContent = "Not Logged in ...."; + chatWindow.appendChild(messageElement); + chatWindow.scrollTop = chatWindow.scrollHeight; + console.log('not logged in'); + + } else { + console.log('unknown response: ', value); + } } } }; diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index 83876fa..d89b248 100644 --- a/src/chat/src/app.ts +++ b/src/chat/src/app.ts @@ -7,6 +7,22 @@ import * as swagger from '@shared/swagger'; import * as utils from '@shared/utils'; import { Server, Socket } from 'socket.io'; +// colors for console.log +export const color = { + red: '\x1b[31m', + green: '\x1b[32m', + yellow: '\x1b[33m', + blue: '\x1b[34m', + reset: '\x1b[0m', +}; + +// shows address for connection au server transcendance +const session = process.env.SESSION_MANAGER ?? ''; +const part = session.split('/')[1]; +const machineName = part.split('.')[0]; +console.log(color.yellow, 'Connect at : https://' + machineName + ':8888/app/login'); + + declare const __SERVICE_NAME: string; // Global map of clients @@ -52,13 +68,6 @@ const app: FastifyPluginAsync = async (fastify, opts): Promise => { export default app; export { app }; -export const color = { - red: '\x1b[31m', - green: '\x1b[32m', - yellow: '\x1b[33m', - blue: '\x1b[34m', - reset: '\x1b[0m', -}; type ClientMessage = { user: string;