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

Chat basic works - with also console out pur to check data

Browse source
This commit is contained in:
NigeParis 2025-11-20 12:35:06 +01:00 • committed by Maix0
parent 486f0ff425
commit d43e62dfc1
4 changed files with 107 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,25 +1,18 @@
<div class="displaybox"> <div class="displaybox">
<div id="mainbox" class="mainboxDisplay"> <div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-6 left-6">Whoami</button>
<h1 class="text-3xl font-bold text-gray-800">
<button id="b-whoami" class="btn-style absolute top-6 left-6">Whoami</button> Chat Box <span id="t-username"></span>
<h1 class="text-3xl font-bold text-gray-800"> </h1><br>
Chat Box <span id="t-username"></span> <button id="b-logout" class="btn-style absolute top-6 right-6">Clear Text</button>
</h1><br> <p>Welcome, <span id="username"></span></p>
<button id="b-logout" class="btn-style absolute top-6 right-6">Clear Text</button> <div id="t-chatbox" class="chatbox-style"></div>
</br>
<div class="flex gap-2">
<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style flex-1" />
<p>Welcome, <span id="username"></span></p> <button id="b-send" class="send-btn-style">Send</button>
</div>
</br>
<div id="t-chatbox" class="chatbox-style"></div> <p class="text-gray-400">From this Chat Box you can send messages to other players</p>
</br> </div>
<div class="flex gap-2"> </div>
<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style flex-1" />
<button id="b-send" class="send-btn-style">Send</button>
</div>
</br>
<p class="text-gray-400">From this Chat Box you can send messages to other players</p>
</div>
</div>

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

@ -5,9 +5,6 @@ import client from '@app/api'
import { getUser, updateUser } from "@app/auth"; import { getUser, updateUser } from "@app/auth";
import io from "socket.io-client"; import io from "socket.io-client";
// const socket = io("wss://localhost:8888");
const socket = io("wss://localhost:8888", { const socket = io("wss://localhost:8888", {
path: "/api/chat/socket.io/", path: "/api/chat/socket.io/",
secure: false, secure: false,
@ -19,13 +16,11 @@ socket.on("connect", async () => {
console.log("I AM Connected to the server: ", socket.id); console.log("I AM Connected to the server: ", socket.id);
// Emit a custom event 'coucou' with some data // Emit a custom event 'coucou' with some data
//socket.emit("coucou", { message: " Nigel from coucou!" }); //socket.emit("coucou", { message: " Nigel from coucou!" });
console.log('sent console.log coucou');
//socket.emit('testend', socket.id); //socket.emit('testend', socket.id);
// Send a message to the server // Send a message to the server
//socket.send(" from the client: " + `${socket.id}`); //socket.send(" from the client: " + `${socket.id}`);
}); });
// Listen for messages from the server "MsgObjectServer" // Listen for messages from the server "MsgObjectServer"
socket.on("MsgObjectServer", (data) => { socket.on("MsgObjectServer", (data) => {
console.log("Message Obj Recieved:", data.message); console.log("Message Obj Recieved:", data.message);
@ -46,8 +41,6 @@ socket.on("MsgObjectServer", (data) => {
console.log("Getuser():", getUser()); console.log("Getuser():", getUser());
}); });
type Providers = { type Providers = {
name: string, name: string,
display_name: string, display_name: string,
@ -62,104 +55,80 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
return { return {
html: authHtml, postInsert: async (app) => { html: authHtml, postInsert: async (app) => {
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 bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
const username = document.getElementById('username') as HTMLDivElement;
const sendButton = document.getElementById('b-send') as HTMLButtonElement; const addMessage = (text: string) => {
const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement; if (!chatWindow) return;
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement; const messageElement = document.createElement("div");
const clearText = document.getElementById('b-logout') as HTMLButtonElement; messageElement.textContent = text;
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement; chatWindow.appendChild(messageElement);
const username = document.getElementById('username') as HTMLDivElement; chatWindow.scrollTop = chatWindow.scrollHeight;
};
// 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 addMessage = (text: string) => { const message = {
if (!chatWindow) return; type: "chat",
const messageElement = document.createElement("div"); user: user.name,
messageElement.textContent = text; token: document.cookie,
chatWindow.appendChild(messageElement); text: msgText,
chatWindow.scrollTop = chatWindow.scrollHeight; timestamp: Date.now(),
};
// 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 = {
type: "chat",
user: user.name,
token: document.cookie,
text: msgText,
timestamp: Date.now(),
SenderWindowID: socket.id, SenderWindowID: socket.id,
}; };
socket.send(JSON.stringify(message)); socket.send(JSON.stringify(message));
} }
sendtextbox.value = "";
sendtextbox.value = ""; }
} });
});
// Clear Text button // Clear Text button
clearText?.addEventListener("click", () => { clearText?.addEventListener("click", () => {
if (chatWindow) { if (chatWindow) {
chatWindow.innerHTML = ''; chatWindow.innerHTML = '';
} }
}); });
// Enter key to send message // Enter key to send message
sendtextbox!.addEventListener('keydown', (event) => { sendtextbox!.addEventListener('keydown', (event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
sendButton?.click(); sendButton?.click();
} }
}); });
chatWindow.textContent = "World"; // Whoami button to display user name
bwhoami?.addEventListener('click', async () => {
// Whoami button to display user name try {
bwhoami?.addEventListener('click', async () => { const res = await client.guestLogin();
try { switch (res.kind) {
const res = await client.guestLogin(); case 'success': {
switch (res.kind) { let user = await updateUser();
case 'success': { if (user === null)
let user = await updateUser(); return showError('Failed to get user: no user ?');
if (user === null) setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
return showError('Failed to get user: no user ?'); break;
setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`); }
break; case 'failed': {
} showError(`Failed to login: ${res.msg}`);
case 'failed': {
showError(`Failed to login: ${res.msg}`);
}
} }
} catch (e) {
console.error("Login error:", e);
showError('Failed to login: Unknown error');
} }
}); } catch (e) {
console.error("Login error:", e);
showError('Failed to login: Unknown error');
}
});
} }
} }
}; };
addRoute('/chat', handleChat, { bypass_auth: true }); addRoute('/chat', handleChat, { bypass_auth: true });
// const value = await client.chatTest();
// if (value.kind === "success") {
// console.log(value.payload);
// }
// else if (value.kind === "notLoggedIn") {
// } else {
// console.log('unknown response: ', value);
// }
// Helper to add a message locally

14
src/chat/src/routes/nginx-chat.ts
View file

@ -3,15 +3,6 @@ import { MakeStaticResponse, typeResponse } from '@shared/utils';
import { Type } from '@sinclair/typebox'; import { Type } from '@sinclair/typebox';
import * as fsocketio from 'fastify-socket.io'; import * as fsocketio from 'fastify-socket.io';
// const fastify = Fastify();
// const io = new Server(fastify.server, {
// path: '/app/chat/socket.io/',
// cors: { origin: '*' },
// });
export const ChatRes = { export const ChatRes = {
200: typeResponse('success', 'chat.success', { 200: typeResponse('success', 'chat.success', {
name: Type.String(), name: Type.String(),
@ -20,14 +11,11 @@ export const ChatRes = {
}), }),
}; };
export type ChatResType = MakeStaticResponse<typeof ChatRes>; export type ChatResType = MakeStaticResponse<typeof ChatRes>;
const route: FastifyPluginAsync = async (fastify): Promise<void> => { const route: FastifyPluginAsync = async (fastify): Promise<void> => {
await fastify.register(fsocketio.default); await fastify.register(fsocketio.default);
// fastify.get( // fastify.get(
// '/api/chat/test', // '/api/chat/test',
// { // {
@ -43,4 +31,4 @@ const route: FastifyPluginAsync = async (fastify): Promise<void> => {
// }, // },
// ); // );
}; };
export default route; export default route;

83
src/chat/src/socket.ts
View file

@ -17,72 +17,43 @@ declare module 'fastify' {
testend: (sock_id_client: string) => void, testend: (sock_id_client: string) => void,
}> }>
} }
} };
export function setupSocketIo(fastify: import('fastify').FastifyInstance): void { export function setupSocketIo(fastify: import('fastify').FastifyInstance): void {
fastify.ready((err) => { fastify.ready((err) => {
if (err) throw err; if (err) throw err;
// function broadcast(message: any, sender?: any) { // Broadcast function to send messages to all connected clients except the sender
function broadcast(data: any, sender?: string) {
// fastify.io.fetchSockets().then((sockets) => { fastify.io.fetchSockets().then((sockets) => {
// console.log("Connected clients:", sockets.length); console.log("Connected clients:", sockets.length);
// for (const s of sockets) {
// if (s.id !== sender) {
// s.emit('MsgObjectServer',{ message: `${message}` });
// console.log("Socket ID:", s.id);
// console.log("Rooms:", [...s.rooms]);
// console.log("Sender:", sender ? sender : 'none');
// console.log("ID:", message.text ? message.text : 'none');
// }
// }
// });
// }
function broadcast(data: any, sender?: string) {
fastify.io.fetchSockets().then((sockets) => {
console.log("Connected clients:", sockets.length);
for (const s of sockets) {
if (s.id !== sender) {
// Send REAL JSON object
s.emit("MsgObjectServer", { message: data });
console.log(" emit window socket ID:", s.id);
console.log(" emit window ID:", [...s.rooms]);
console.log(" Sender window ID:", sender ? sender : "none");
console.log(" text recieved:", data.text ? data.text : "none");
console.log(color.red, "data:", color.reset, data ? data : "none");
}
}
});
}
for (const s of sockets) {
if (s.id !== sender) {
// Send REAL JSON object
s.emit("MsgObjectServer", { message: data });
console.log(" emit window socket ID:", s.id);
console.log(" emit window ID:", [...s.rooms]);
console.log(" Sender window ID:", sender ? sender : "none");
console.log(" text recieved:", data.text ? data.text : "none");
console.log(color.red, "data:", color.reset, data ? data : "none");
}
}
});
};
// console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(fastify.io))); // console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(fastify.io)));
fastify.io.on('connection', (socket : Socket) => { fastify.io.on('connection', (socket : Socket) => {
console.info(color.blue, 'Socket connected!', color.reset, socket.id); console.info(color.blue, 'Socket connected!', color.reset, socket.id);
socket.on("message", (message: string) => { socket.on("message", (message: string) => {
console.log(color.blue, `Received message from client`, color.reset, message); console.log(color.blue, `Received message from client`, color.reset, message);
const obj = JSON.parse(message); // { userID, text } const obj = JSON.parse(message); // { userID, text }
console.log(color.green, `Message from client`, color.reset, `${obj.userID}: ${obj.text}`); console.log(color.green, `Message from client`, color.reset, `${obj.userID}: ${obj.text}`);
// Send object directly — DO NOT wrap it in a string // Send object directly — DO NOT wrap it in a string
broadcast(obj, obj.SenderWindowID); broadcast(obj, obj.SenderWindowID);
}); });
socket.on('testend', (sock_id_cl : string) => { socket.on('testend', (sock_id_cl : string) => {
console.log('testend received from client socket id:', sock_id_cl); console.log('testend received from client socket id:', sock_id_cl);
}); });
@ -90,12 +61,6 @@ function broadcast(data: any, sender?: string) {
console.log("Client is disconnecting:", socket.id, "reason:", reason); console.log("Client is disconnecting:", socket.id, "reason:", reason);
console.log('Socket AAAAAAAActing because:', socket.connected); console.log('Socket AAAAAAAActing because:', socket.connected);
}); });
}); });
});
}); };
};