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

Add Arrived in Chat and Left in chat LoginName

Browse source
This commit is contained in:
NigeParis 2025-11-24 11:18:32 +01:00 • committed by Maix0
parent 757a436fc6
commit 5031efa866
5 changed files with 123 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import client from '@app/api'
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", {
path: "/api/chat/socket.io/",
secure: false,
@ -12,13 +13,23 @@ const socket = io("wss://localhost:8888", {
});
// Listen for the 'connect' event
socket.on("connect", async () => {
console.log("I AM Connected to the server: ", socket.id);
// Emit a custom event 'coucou' with some data
//socket.emit("coucou", { message: " Nigel from coucou!" });
//socket.emit('testend', socket.id);
// Send a message to the server
//socket.send(" from the client: " + `${socket.id}`);
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,
token: document.cookie ?? "",
text: " has Just ARRIVED in the chat",
timestamp: Date.now(),
SenderWindowID: socket.id,
};
socket.emit('message', JSON.stringify(message));
});
// Listen for messages from the server "MsgObjectServer"
@ -34,7 +45,13 @@ socket.on("MsgObjectServer", (data: any) => {
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
if (chatWindow) {
const messageElement = document.createElement("div");
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
// if (getUser()?.id !== `${data.message.id}`) {
console.log('==================> HERE');
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
// } else {
// console.log('==================>AND HERE');
// messageElement.textContent = `here`;
// }
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
@ -48,7 +65,7 @@ type Providers = {
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
@ -58,8 +75,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const sendButton = document.getElementById('b-send') as HTMLButtonElement;
const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
const clearText = document.getElementById('b-logout') 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 username = document.getElementById('username') as HTMLDivElement;
const value = await client.chatTest();
@ -117,6 +135,16 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
});
// Help Text button
bhelp?.addEventListener("click", () => {
if (chatWindow) {
addMessage('@Help - List Chat Commands:');
addMessage('@list - lists all user connected');
}
});
// Enter key to send message
sendtextbox!.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {