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

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

@ -4,7 +4,8 @@
<h1 class="text-3xl font-bold text-gray-800">
Chat Box <span id="t-username"></span>
</h1><br>
<button id="b-logout" class="btn-style absolute top-6 right-6">Clear Text</button>
<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>
<p>Welcome, <span id="username"></span></p>
<div id="t-chatbox" class="chatbox-style"></div>
</br>

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') {

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

@ -1,48 +0,0 @@
////WORKING ON THE SEPARATE NONO FUCTIONNELING SOCKET CLIENT TO BE IMPORTED INTO CHAT.TS////
// import io from "socket.io-client";
// // const socket = io("wss://localhost:8888");
// export const socket = io("wss://localhost:8888", {
// path: "/api/chat/socket.io/",
// secure: false,
// transports: ["websocket"],
// });
// // 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("MsgObjectClient", { message: " Nigel from coucou!" });
// console.log('sent console.log coucou');
// // Send a message to the server
// socket.send(" from the client: " + `${socket.id}`);
// console.log("MESSAGE REPLY RETURNED FROM SERVER =====>: ", socket.emit("", {: " Nigel from coucou!"}).id);
// });
// // Listen for messages from the server
// socket.on("MsgObjectServer", (data) => {
// console.log("Message from server:", data);
// });
// socket.on("", (data) => {
// console.log("MESSAGE REPLY RETURNED FROM SERVER =====>:", data);
// });
// // Disconnected
// socket.on("disconnect", (reason) => {
// console.log("Socket disconnected:", reason);
// });
// // Socket.IO connection errors
// socket.on("connect_error", (err) => {
// console.error("Connection error:", err.message);
// });
// // Server-side errors
// socket.on("error", (err) => {
// console.error("Socket error:", err);
// });