Added machine Name to display address of connect in logs

docker-compose.yml

@@ -141,7 +141,7 @@ services:
       - JWT_SECRET=KRUGKIDROVUWG2ZAMJZG653OEBTG66BANJ2W24DTEBXXMZLSEB2GQZJANRQXU6JA
       - DATABASE_DIR=/volumes/database
       - PROVIDER_FILE=/extra/providers.toml
-
+      - SESSION_MANAGER=${SESSION_MANAGER}
 
   ###############
   #    USER     #

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;
+}

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,17 +48,11 @@ 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;
@@ -52,7 +63,12 @@ document.addEventListener("visibilitychange", async () => {
 	});
 	return;
 }
-	if (document.visibilityState === "visible") {
+	
+	
+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', {
@@ -62,7 +78,58 @@ document.addEventListener("visibilitychange", async () => {
 	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);
+			}
 		}
 	}
 };

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<void> => {
 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;