added PingBuddies Bar to detect connected Chatters in real time

frontend/src/chat/chat.css

@@ -107,6 +107,33 @@
   text-gray-800
 }
 
+.ping-box {
+  @apply
+  w-[150px] 
+  ml-2 border-1
+  border-gray-500 
+  bg-white 
+  rounded-2xl 
+  p-2 
+  shadow-md 
+  flex flex-col 
+  gap-1 
+  h-[350px];
+}
+
+.ping-title {
+  @apply
+  text-sm 
+  font-semibold
+  text-blue-800;
+}
+
+div-buddies-list {
+  @apply
+  text-black
+  whitespace-pre-wrap;
+
+}
 
 p {
   @apply

frontend/src/pages/chat/chat.html

@@ -2,7 +2,7 @@
   <div id="mainbox" class="mainboxDisplay">
     <button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
     <h1 class="text-3xl font-bold text-gray-800">
-		ChatterBoxes 😀😀😀<span id="t-username"></span>
+		  ChatterBoxes <span id="t-username"></span>
     </h1><br>
     <button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
     <button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
@@ -10,7 +10,7 @@
     <!-- Center wrapper for chat + vertical box -->
     <div class="flex justify-center mt-2">
       <!-- Groupe Chat + vertical box container -->
-      <div id = "g-boxes" class="flex gap-1">
+      <div id = "g-boxes" class="flex gap-2">
         <!-- Text Chat box panel + send -->
         <div id = "g-textBoxes" class="flex flex-col">
           <div id="t-chatbox" class="chatbox-style"></div>
@@ -20,13 +20,15 @@
           </div>
         </div>
 
-        <!-- Vertical Ping box panel-->
+        <!-- Vertical Ping Buddies box panel-->
-        <div id="ping-box" class="w-[150px] ml-2 bg-gray-300 rounded-2xl p-2 shadow-md flex flex-col gap-1 h-[350px]">
+        <div id="ping-box" class="ping-box">
-          <p id="ping-title" class="text-sm font-semibold text-gray-700">Ping Buddies</p>
+          <p id="ping-title" class="ping-title">Ping Buddies</p>
           <div id="ping-list" class="flex-1 overflow-y-auto">
-            <p>Alice</p>
+            <div id = "div-buddies">
-            <p>Bob</p>
+              <!-- <p>Alice</p>
-            <p>Charlie</p>
+              <p>Bob</p>
+              <p>Charlie</p> -->
+            </div>
           </div>
         </div>
       </div>

frontend/src/pages/chat/chat.ts

@@ -30,8 +30,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, {
@@ -82,55 +82,23 @@ async function windowStateVisable() {
 
 
 
+async function listBuddies(buddies: HTMLDivElement, listBuddies: string ) {
 
+	if (!buddies) return;
+	const messageElement = document.createElement("div-buddies-list");
+	messageElement.textContent = listBuddies + '\n';
+	buddies.appendChild(messageElement);
+	buddies.scrollTop = buddies.scrollHeight;
+	console.log(`Added buddies: ${listBuddies}`)
+	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;
-// 	}
-
-
-
-
-
-// });
 
 
 
@@ -161,8 +129,14 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 		console.log("Recieved data.message.timestamp: ", data.message.timestamp);
 		// Display the message in the chat window
 		const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
+		const bconnected = document.getElementById('b-help') as HTMLButtonElement;
+		if (bconnected) {
+			bconnected.click();
+		}
+		
 		if (chatWindow) {
 			const messageElement = document.createElement("div");
+			
 			// if (getUser()?.id !== `${data.message.id}`) {
 			console.log('==================> HERE');
 			messageElement.textContent = `${data.message.user}: ${data.message.text}`;
@@ -197,6 +171,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 			const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
 			const bconnected = document.getElementById('b-help') as HTMLButtonElement;
 			const username = document.getElementById('username') as HTMLDivElement;
+			const buddies = document.getElementById('div-buddies') as HTMLDivElement;
 
 			const value = await client.chatTest();
 			if (value.kind === "success") {
@@ -216,6 +191,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 
 		if (window.location.pathname === "/app/chat") {
 		  window.addEventListener("focus", () => {
+			bconnected.click();
 			windowStateVisable();
 			console.log("%cWindow is focused on /chat", color.green);
 		  });
@@ -227,11 +203,13 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 		}
 
 			socket.once('welcome', (data) => {
+				bconnected.click();
 				addMessage (`${data.msg}  ` + getUser()?.name);
 			});
 
 			// Send button
 			sendButton?.addEventListener("click", () => {
+				bconnected.click();
 				if (sendtextbox && sendtextbox.value.trim()) {
 					const msgText = sendtextbox.value.trim();
 					addMessage(msgText);
@@ -259,6 +237,10 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				}
 			});
 
+					
+			// setInterval(async () => {
+			//     bconnected.click();
+			// }, 5000); // every 1 second
 
 			// Help Text button
 			bconnected?.addEventListener("click", async () => {
@@ -270,21 +252,27 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				const res = await client.guestLogin();
 				let user = await updateUser();
 				localStorage.setItem("oldName", oldUser);
-
+				buddies.textContent = "";
 				console.log('USER ', user?.name);
 				if (chatWindow) {
-					addMessage('@list - lists all connected users in the chat');
+					//addMessage('@list - lists all connected users in the chat');
 					socket.emit('list', {
 						oldUser: oldUser,
-						user: user?.name
+						user: user?.name,
 					});
 				}
+			
 			});
 			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);
+				listBuddies(buddies,myBuddies);
+			});
+
 
 
 

src/chat/src/app.ts

@@ -82,6 +82,7 @@ declare module 'fastify' {
 			hello: (message: string) => string;
 			MsgObjectServer: (data: { message: ClientMessage }) => void;
 			message: (msg: string) => void;
+			listBud: (msg: string) => void;
 			testend: (sock_id_client: string) => void;
 			client_entered: (userName: string, user: string) => void;
 			client_left: (userName: string, why: string) => void;
@@ -130,8 +131,8 @@ 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('listObj', username.user);
-
+				io.to(targetSocketId!).emit('listBud', username.user);
 				console.log(
 					color.yellow,
 					'Chat Socket ID:',
@@ -163,9 +164,9 @@ async function onReady(fastify: FastifyInstance) {
 	function broadcast(data: ClientMessage, sender?: string) {
 		fastify.io.fetchSockets().then((sockets) => {
 			for (const s of sockets) {
+				const clientName = clientChat.get(s.id)?.user;
 				if (s.id !== sender) {
 					// Send REAL JSON object
-					const clientName = clientChat.get(s.id)?.user;
 					if (clientName !== undefined) {
 						s.emit('MsgObjectServer', { message: data });
 					}