rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added Connected button to show how many connected to the chat

Browse source
This commit is contained in:
NigeParis 2025-11-24 16:24:27 +01:00 • committed by Maix0
parent e530de6ce7
commit b215904cfd
3 changed files with 220 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/pages/chat/chat.html
View file

@ -5,7 +5,7 @@
Chat Box <span id="t-username"></span>
</h1><br>
<button id="b-clear" class="btn-style absolute top-6 right-6">Clear Text</button>
<button id="b-help" class="btn-style absolute top-18 left-6">Help</button>
<button id="b-help" class="btn-style absolute top-18 left-6">Connected</button>
<p>Welcome, <span id="username"></span></p>
<div id="t-chatbox" class="chatbox-style"></div>
</br>

51
frontend/src/pages/chat/chat.ts
View file

@ -6,21 +6,17 @@ import { getUser, updateUser } from "@app/auth";
import io from 'socket.io-client';
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
const socket = io("wss://localhost:8888", {
const socket = io("wss://localhost:8888", {
path: "/api/chat/socket.io/",
secure: false,
transports: ["websocket"],
});
// Listen for the 'connect' event
socket.on("connect", () => {
});
// Listen for the 'connect' event
socket.on("connect", () => {
console.log("I AM Connected to the server:", socket.id);
const user = getUser()?.name;
// Ensure we have a user AND socket is connected
if (!user || !socket.connected) return;
const message = {
type: "chat",
user,
@ -30,17 +26,15 @@ socket.on("connect", () => {
SenderWindowID: socket.id,
};
socket.emit('message', JSON.stringify(message));
});
// Listen for messages from the server "MsgObjectServer"
socket.on("MsgObjectServer", (data: any) => {
});
// Listen for messages from the server "MsgObjectServer"
socket.on("MsgObjectServer", (data: any) => {
console.log("Message Obj Recieved:", data.message);
console.log("Recieved data.message.text: ", data.message.text);
console.log("Recieved data.message.user: ", data.message.user);
console.log("Recieved data.message.type: ", data.message.type);
console.log("Recieved data.message.token: ", data.message.token);
console.log("Recieved data.message.timestamp: ", data.message.timestamp);
// Display the message in the chat window
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
if (chatWindow) {
@ -56,16 +50,16 @@ socket.on("MsgObjectServer", (data: any) => {
chatWindow.scrollTop = chatWindow.scrollHeight;
}
console.log("Getuser():", getUser());
});
});
type Providers = {
type Providers = {
name: string,
display_name: string,
icon_url?: string,
color?: { default: string, hover: string },
};
};
// function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
// function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
setTitle('Chat Page');
// Listen for the 'connect' event
@ -77,14 +71,13 @@ type Providers = {
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
const clearText = document.getElementById('b-clear') as HTMLButtonElement;
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
const bhelp = document.getElementById('b-help') as HTMLButtonElement;
const bconnected = document.getElementById('b-help') as HTMLButtonElement;
const username = document.getElementById('username') as HTMLDivElement;
const value = await client.chatTest();
if (value.kind === "success") {
console.log(value.payload);
}
else if (value.kind === "notLoggedIn") {
} else if (value.kind === "notLoggedIn") {
console.log('not logged in');
} else {
console.log('unknown response: ', value);
@ -101,16 +94,9 @@ type Providers = {
// Send button
sendButton?.addEventListener("click",() => {
if (sendtextbox && sendtextbox.value.trim()) {
const msgText = sendtextbox.value.trim();
addMessage(msgText);
const user = getUser();
if (user && socket?.connected) {
const message = {
@ -137,10 +123,15 @@ type Providers = {
// Help Text button
bhelp?.addEventListener("click", () => {
bconnected?.addEventListener("click", async () => {
if (chatWindow) {
addMessage('@Help - List Chat Commands:');
addMessage('@list - lists all user connected');
addMessage('@list - lists all connected users in the chat');
await socket.emit('list');
socket.on('listObj', (list: string) => {
console.log('List chat clients connected ', list);
addMessage(list);
});
}
});

34
src/chat/src/app.ts
View file

@ -6,7 +6,6 @@ import * as auth from '@shared/auth';
import * as swagger from '@shared/swagger';
import * as utils from '@shared/utils';
import { Server, Socket } from 'socket.io';
import { Null } from '@sinclair/typebox';
declare const __SERVICE_NAME: string;
@ -27,9 +26,6 @@ const app: FastifyPluginAsync = async (fastify, opts): Promise<void> => {
await fastify.register(db.useDatabase as FastifyPluginAsync, {});
await fastify.register(auth.jwtPlugin as FastifyPluginAsync, {});
await fastify.register(auth.authPlugin as FastifyPluginAsync, {});
// await fastify.register(useSocketIo, {
// path: '/api/chat/socket.io',
// });
// Place here your custom code!
for (const plugin of Object.values(plugins)) {
@ -79,7 +75,7 @@ declare module 'fastify' {
async function onReady(fastify: FastifyInstance) {
function connectedUser(io?: Server): number {
function connectedUser(io?: Server, target?: string): number {
let count = 0;
const seen = new Set<string>(); // <- only log/count unique usernames
@ -112,6 +108,11 @@ function connectedUser(io?: Server): number {
count++;
// console.log(color.green,"count: ", count);
console.log(color.yellow, "Client:", color.reset, username);
const targetSocketId: any = target;
io.to(targetSocketId).emit("listObj", username);
console.log(color.yellow, "Chat Socket ID:", color.reset, socketId);
continue;
}
@ -123,7 +124,7 @@ function connectedUser(io?: Server): number {
}
return count;
}
}
function broadcast(data: ClientMessage, sender?: string) {
@ -131,8 +132,8 @@ function connectedUser(io?: Server): number {
for (const s of sockets) {
if (s.id !== sender) {
// Send REAL JSON object
// Send REAL JSON object
const clientName = clientChat.get(s.id) || null;
if (clientName !== null) {
s.emit('MsgObjectServer', { message: data });
@ -144,6 +145,7 @@ function connectedUser(io?: Server): number {
}
});
}
fastify.io.on('connection', (socket: Socket) => {
socket.on('message', (message: string) => {
console.info(color.blue, 'Socket connected!', color.reset, socket.id);
@ -153,6 +155,8 @@ function connectedUser(io?: Server): number {
color.reset,
message,
);
const obj: ClientMessage = JSON.parse(message) as ClientMessage;
clientChat.set(socket.id, obj.user);
console.log(
@ -171,10 +175,23 @@ function connectedUser(io?: Server): number {
console.log('testend received from client socket id:', sock_id_cl);
});
socket.on('list', () => {
console.log(color.red, 'list activated', color.reset, socket.id);
connectedUser(fastify.io, socket.id);
});
socket.on("disconnecting", (reason) => {
const clientName = clientChat.get(socket.id) || null;
console.log(color.green, `Client disconnecting: ${clientName} (${socket.id}) reason:`, reason);
if (reason === 'transport error') return;
if (clientName !== null) {
const obj = {
type: "chat",
@ -186,8 +203,7 @@ function connectedUser(io?: Server): number {
};
broadcast(obj, obj.SenderWindowID);
console.log(`Client disconnecting: ${clientName} (${socket.id}) reason:`, reason);
clientChat.delete(obj.user);
// clientChat.delete(obj.user);
}
});
});