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

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

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

31
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,7 +55,6 @@ 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 sendButton = document.getElementById('b-send') as HTMLButtonElement;
const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement; const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement;
const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement; const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement;
@ -70,9 +62,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement; const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
const username = document.getElementById('username') as HTMLDivElement; const username = document.getElementById('username') as HTMLDivElement;
const addMessage = (text: string) => { const addMessage = (text: string) => {
if (!chatWindow) return; if (!chatWindow) return;
const messageElement = document.createElement("div"); const messageElement = document.createElement("div");
@ -99,7 +88,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}; };
socket.send(JSON.stringify(message)); socket.send(JSON.stringify(message));
} }
sendtextbox.value = ""; sendtextbox.value = "";
} }
}); });
@ -119,8 +107,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
} }
}); });
chatWindow.textContent = "World";
// Whoami button to display user name // Whoami button to display user name
bwhoami?.addEventListener('click', async () => { bwhoami?.addEventListener('click', async () => {
try { try {
@ -142,24 +128,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
showError('Failed to login: Unknown error'); 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

12
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',
// { // {

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

@ -17,35 +17,14 @@ 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
// fastify.io.fetchSockets().then((sockets) => {
// 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) { 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);
@ -63,11 +42,7 @@ function broadcast(data: any, sender?: string) {
} }
} }
}); });
} };
// 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);
@ -79,10 +54,6 @@ function broadcast(data: any, sender?: string) {
// 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);
}); });
}); });
}); });
}; };