diff --git a/frontend/src/chat/chat.css b/frontend/src/chat/chat.css index e94c993..6204f43 100644 --- a/frontend/src/chat/chat.css +++ b/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 diff --git a/frontend/src/pages/chat/chat.html b/frontend/src/pages/chat/chat.html index 2f6c2a3..7c31b84 100644 --- a/frontend/src/pages/chat/chat.html +++ b/frontend/src/pages/chat/chat.html @@ -2,7 +2,7 @@

- ChatterBoxes 😀😀😀 + ChatterBoxes


@@ -10,7 +10,7 @@
-
+
@@ -20,13 +20,15 @@
- -
-

Ping Buddies

+ +
+

Ping Buddies

-

Alice

-

Bob

-

Charlie

+
+ +
diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index 54d0910..6e5369c 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/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://localhost:8888`; + let addressHost = `wss://${machineHostName}: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); + }); + diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index d89b248..2b03457 100644 --- a/src/chat/src/app.ts +++ b/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 }); }