From a5579cc474748b416ae79ffea4f492dde5a5d66f Mon Sep 17 00:00:00 2001 From: Mathias Wagner Date: Sat, 1 Mar 2025 13:51:05 +0100 Subject: [PATCH] Fix chatbox --- .../contexts/SocketContext/SocketContext.jsx | 99 ------------------- .../common/contexts/SocketContext/index.js | 1 - client/src/pages/Game/Game.jsx | 18 +++- server/handler/connection.js | 20 +++- 4 files changed, 34 insertions(+), 104 deletions(-) delete mode 100644 client/src/common/contexts/SocketContext/SocketContext.jsx delete mode 100644 client/src/common/contexts/SocketContext/index.js diff --git a/client/src/common/contexts/SocketContext/SocketContext.jsx b/client/src/common/contexts/SocketContext/SocketContext.jsx deleted file mode 100644 index bf34edb..0000000 --- a/client/src/common/contexts/SocketContext/SocketContext.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import {createContext, useState, useEffect, useCallback, useRef} from 'react'; -import {io} from 'socket.io-client'; - -export const SocketContext = createContext(); - -export const SocketProvider = ({children}) => { - const [socket, setSocket] = useState(null); - const [connected, setConnected] = useState(false); - const connectAttempts = useRef(0); - const maxAttempts = 3; - - const connect = useCallback(() => { - if (socket) return; - - const serverUrl = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://localhost:5287'; - - try { - const newSocket = io(serverUrl, { - reconnectionAttempts: 3, - timeout: 10000, - reconnectionDelay: 1000 - }); - - newSocket.on('connect', () => { - console.log('Socket connected with ID:', newSocket.id); - setConnected(true); - connectAttempts.current = 0; - }); - - newSocket.on('disconnect', (reason) => { - console.log('Socket disconnected:', reason); - setConnected(false); - }); - - newSocket.on('connect_error', (error) => { - console.error('Connection error:', error); - connectAttempts.current += 1; - - if (connectAttempts.current >= maxAttempts) { - console.error('Max connection attempts reached, giving up'); - newSocket.disconnect(); - } - }); - - setSocket(newSocket); - } catch (err) { - console.error('Error creating socket connection:', err); - } - }, [socket]); - - const disconnect = useCallback(() => { - if (socket) { - socket.disconnect(); - setSocket(null); - setConnected(false); - console.log('Socket manually disconnected'); - } - }, [socket]); - - const send = useCallback((event, data) => { - if (!socket || !connected) { - console.warn(`Cannot send event "${event}": socket not connected`); - return false; - } - - try { - socket.emit(event, data); - return true; - } catch (err) { - console.error(`Error sending event "${event}":`, err); - return false; - } - }, [socket, connected]); - - const on = useCallback((event, callback) => { - if (!socket) { - console.warn(`Cannot listen for event "${event}": socket not initialized`); - return () => { - }; - } - - socket.on(event, callback); - return () => socket.off(event, callback); - }, [socket]); - - useEffect(() => { - return () => { - if (socket) { - socket.disconnect(); - } - }; - }, [socket]); - - return ( - - {children} - - ); -}; diff --git a/client/src/common/contexts/SocketContext/index.js b/client/src/common/contexts/SocketContext/index.js deleted file mode 100644 index 3988501..0000000 --- a/client/src/common/contexts/SocketContext/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./SocketContext"; \ No newline at end of file diff --git a/client/src/pages/Game/Game.jsx b/client/src/pages/Game/Game.jsx index 912d6e4..897d930 100644 --- a/client/src/pages/Game/Game.jsx +++ b/client/src/pages/Game/Game.jsx @@ -126,7 +126,16 @@ export const Game = () => { if (data.timeRemaining) { setTimeLeft(data.timeRemaining); } - } + }, + "chat-message-confirmation": (msg) => { + setMessages(prev => prev.map(prevMsg => { + if (!prevMsg.system && prevMsg.text === msg.text && prevMsg.sender !== msg.sender) { + console.log(`Updating message sender from "${prevMsg.sender}" to "${msg.sender}"`); + return { ...prevMsg, sender: msg.sender }; + } + return prevMsg; + })); + }, }; const cleanupFunctions = Object.entries(eventHandlers).map( @@ -212,12 +221,15 @@ export const Game = () => { const handleSendMessage = useCallback(() => { if (inputValue.trim()) { - const messageData = { text: inputValue, sender: username }; + const currentUser = connectedUsers.find(u => u.id === socket?.id); + const senderName = currentUser?.name || username || "Player"; + + const messageData = { text: inputValue, sender: senderName }; send("send-message", messageData); setMessages(prev => [...prev, messageData]); setInputValue(""); } - }, [inputValue, username, send]); + }, [inputValue, send, socket?.id, connectedUsers, username]); const handleSongSelect = useCallback((song) => { setSelectedSong(song); diff --git a/server/handler/connection.js b/server/handler/connection.js index 592c795..1ba28f1 100644 --- a/server/handler/connection.js +++ b/server/handler/connection.js @@ -180,7 +180,25 @@ module.exports = (io) => (socket) => { socket.on("send-message", (messageData) => { const roomId = roomController.getUserRoom(socket.id); - if (roomId) socket.to(roomId).emit("chat-message", messageData); + if (!roomId) return; + + const serverUsername = roomController.getUserName(socket.id); + + if (!messageData.sender || messageData.sender === "Player" || messageData.sender === "Anonymous") { + if (serverUsername) { + console.log(`Fixing missing username for ${socket.id}: using "${serverUsername}" instead of "${messageData.sender || 'none'}"`); + messageData.sender = serverUsername; + } else { + console.warn(`Could not find username for user ${socket.id}`); + } + } + + socket.to(roomId).emit("chat-message", messageData); + + socket.emit("chat-message-confirmation", { + ...messageData, + sender: messageData.sender + }); }); socket.on("get-user-info", () => {