added PingBuddies Bar to detect connected Chatters in real time
This commit is contained in:
NigeParis
parent
d54b4c7d5f
commit
ddead83583
4 changed files with 75 additions and 57 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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-->
|
||||
<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]">
|
||||
<p id="ping-title" class="text-sm font-semibold text-gray-700">Ping Buddies</p>
|
||||
<!-- Vertical Ping Buddies box panel-->
|
||||
<div id="ping-box" class="ping-box">
|
||||
<p id="ping-title" class="ping-title">Ping Buddies</p>
|
||||
<div id="ping-list" class="flex-1 overflow-y-auto">
|
||||
<p>Alice</p>
|
||||
<p>Bob</p>
|
||||
<p>Charlie</p>
|
||||
<div id = "div-buddies">
|
||||
<!-- <p>Alice</p>
|
||||
<p>Bob</p>
|
||||
<p>Charlie</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue