From 6494df20066133f3909b79b9a342df5ad8c12028 Mon Sep 17 00:00:00 2001 From: bitsearch Date: Wed, 21 Jan 2026 14:28:38 +0100 Subject: [PATCH] chat global fonctionnel (par contre doublons a regler) --- srcs/frontend/src/global_chat.js | 97 ++++++++++++++++++++++++++++++-- srcs/frontend/src/index.html | 4 +- srcs/frontend/src/login.js | 5 +- srcs/frontend/src/style.css | 8 +++ 4 files changed, 106 insertions(+), 8 deletions(-) diff --git a/srcs/frontend/src/global_chat.js b/srcs/frontend/src/global_chat.js index ab5cd6d..af43ea9 100644 --- a/srcs/frontend/src/global_chat.js +++ b/srcs/frontend/src/global_chat.js @@ -24,7 +24,56 @@ export class GlobalChat extends fenetre { this.applyStyles(); this.applyEvents(); - this.connect_sockio_global_chat(); + // Connexion au chat global est déclenchée via des contrôles dédiés + this.connected = false; + this.createConnectControls(); + } + + // Crée les contrôles Connect / Reconnect dans la fenêtre du chat + createConnectControls() { + this.controls = document.createElement("div"); + this.controls.style.display = "flex"; + this.controls.style.gap = "8px"; + this.controls.style.marginTop = "6px"; + + this.connectButton = document.createElement("button"); + this.connectButton.textContent = "Connecter"; + this.connectButton.style.padding = "6px 12px"; + this.connectButton.style.background = "#28a745"; + this.connectButton.style.color = "white"; + this.connectButton.style.border = "none"; + this.connectButton.style.borderRadius = "6px"; + this.connectButton.style.cursor = "pointer"; + + this.reconnectButton = document.createElement("button"); + this.reconnectButton.textContent = "Reconnecter"; + this.reconnectButton.style.padding = "6px 12px"; + this.reconnectButton.style.background = "#007bff"; + this.reconnectButton.style.color = "white"; + this.reconnectButton.style.border = "none"; + this.reconnectButton.style.borderRadius = "6px"; + this.reconnectButton.style.cursor = "pointer"; + + this.controls.append(this.connectButton, this.reconnectButton); + this.body.appendChild(this.controls); + + this.connectButton.addEventListener("click", () => this.connect_sockio_global_chat()); + this.reconnectButton.addEventListener("click", () => this.reconnect_sockio_global_chat()); + } + + async reconnect_sockio_global_chat() { + // Déconnecte et reconnecte le socket si nécessaire + if (this.socket) { + try { + this.socket.close(); + } catch (e) { + // ignore + } + this.socket = null; + this.output.innerHTML += '
Reconnexion en cours...
'; + } + this.connected = false; + await this.connect_sockio_global_chat(); } applyStyles() { @@ -40,7 +89,7 @@ export class GlobalChat extends fenetre { this.output.style.flex = "1"; this.output.style.overflowY = "auto"; this.output.style.padding = "8px"; - this.output.style.background = "#f8f9fa"; + this.output.style.background = "#7fb8f1"; this.output.style.borderRadius = "6px"; this.output.style.display = "flex"; this.output.style.flexDirection = "column"; @@ -81,6 +130,30 @@ export class GlobalChat extends fenetre { }); } + // Envoie le message courant via Socket.IO + sendMessage() { + const content = this.input.value.trim(); + if (!content) return; + + // Envoi au backend si connecté + if (this.socket && this.socket.connected) { + this.socket.emit("chat-message", { content }); + } else { + this.output.innerHTML += '
Erreur: vous n\'êtes pas connecté au chat global
'; + return; + } + + // Affichage immédiat dans l'interface pour feedback utilisateur + const div = document.createElement("div"); + div.className = "chat-message"; + div.innerHTML = `Moi: ${content}`; + this.output.appendChild(div); + this.output.scrollTop = this.output.scrollHeight; + + // Reset input + this.input.value = ""; + } + async connect_sockio_global_chat() { const token = localStorage.getItem("auth_token"); @@ -94,6 +167,12 @@ export class GlobalChat extends fenetre { return; } + // Si déjà connecté, ne pas tenter de nouveau + if (this.socket && this.socket.connected) { + this.output.innerHTML += '
Déjà connecté au chat global
'; + return; + } + if (!window.io) { const script = document.createElement("script"); script.src = "/socket.io/socket.io.js"; @@ -108,13 +187,21 @@ export class GlobalChat extends fenetre { }); } - this.socket = io({ + const ioConfig = { auth: { token }, reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 1000, transports: ["websocket", "polling"] - }); + }; + // Optionnel: se connecter via un port alternatif si défini (ex: pour contourner le proxy) + const altPort = window.GLOBAL_CHAT_ALT_PORT; + if (altPort) { + const host = location.hostname || 'localhost'; + this.socket = io(`http://${host}:${altPort}`, ioConfig); + } else { + this.socket = io(ioConfig); + } this.socket.on("connect", () => { console.log("→ SOCKET CONNECTÉ ! ID =", this.socket.id); @@ -140,4 +227,4 @@ export class GlobalChat extends fenetre { this.output.scrollTop = this.output.scrollHeight; }); } -} \ No newline at end of file +} diff --git a/srcs/frontend/src/index.html b/srcs/frontend/src/index.html index a1387ae..529532b 100644 --- a/srcs/frontend/src/index.html +++ b/srcs/frontend/src/index.html @@ -4,7 +4,7 @@ scribl.lidl_edition - + @@ -30,4 +30,4 @@ - \ No newline at end of file + diff --git a/srcs/frontend/src/login.js b/srcs/frontend/src/login.js index c452296..263c3b9 100644 --- a/srcs/frontend/src/login.js +++ b/srcs/frontend/src/login.js @@ -109,7 +109,10 @@ export class LoginWindow extends fenetre { } } else { - console.error("ERROR", data); + // Afficher une erreur utilisateur plus visible + const errMsg = data && data.message ? data.message : "Échec de la connexion"; + this.message.innerText = errMsg; + this.message.style.color = "#ff4d4d"; } } diff --git a/srcs/frontend/src/style.css b/srcs/frontend/src/style.css index e3a12f2..ef664ce 100644 --- a/srcs/frontend/src/style.css +++ b/srcs/frontend/src/style.css @@ -48,3 +48,11 @@ h1 { position: fixed; z-index: 3; } + +/* Message styling for system/info messages in windows */ +.system { + color: #333; +} +.system.error { + color: #ff4d4d; +}