fix(socket): improve connection stability with heartbeat and auto-reconnect

- Backend: Add pingInterval (25s) and pingTimeout (60s) for better keep-alive
- Frontend: Increase reconnection attempts to Infinity (keep trying forever)
- Frontend: Add reconnect event handlers to rejoin rooms after reconnection
- Frontend: Check initial connection state when reusing socket instance

frontend/src/hooks/useEventChat.js

@@ -46,15 +46,37 @@ const useEventChat = (slug, userId, event, messagesContainerRef) => {
       return;
     }
 
-    // Socket event listeners
-    socket.on('connect', () => {
+    // Function to join room (used on connect and reconnect)
+    const joinRoom = () => {
       setIsConnected(true);
-      // Join event room
       socket.emit('join_event_room', { slug });
+    };
+
+    // Check if already connected (socket instance may already be connected)
+    if (socket.connected) {
+      joinRoom();
+    }
+
+    // Socket event listeners
+    socket.on('connect', joinRoom);
+
+    socket.on('disconnect', (reason) => {
+      setIsConnected(false);
+      console.log('🔌 Disconnected:', reason);
     });
 
-    socket.on('disconnect', () => {
-      setIsConnected(false);
+    // Handle reconnection - rejoin room automatically
+    socket.on('reconnect', (attemptNumber) => {
+      console.log('🔄 Reconnected after', attemptNumber, 'attempts');
+      // Room will be joined via 'connect' event
+    });
+
+    socket.on('reconnect_attempt', (attemptNumber) => {
+      console.log('🔄 Reconnection attempt', attemptNumber);
+    });
+
+    socket.on('reconnect_error', (error) => {
+      console.error('🔄 Reconnection error:', error);
     });
 
     // Receive message history (initial 20 messages)
@@ -92,8 +114,11 @@ const useEventChat = (slug, userId, event, messagesContainerRef) => {
     // Cleanup
     return () => {
       socket.emit('leave_event_room');
-      socket.off('connect');
+      socket.off('connect', joinRoom);
       socket.off('disconnect');
+      socket.off('reconnect');
+      socket.off('reconnect_attempt');
+      socket.off('reconnect_error');
       socket.off('message_history');
       socket.off('event_message');
       socket.off('active_users');

frontend/src/hooks/useMatchChat.js

@@ -64,8 +64,18 @@ const useMatchChat = (match, userId, slug) => {
     // Socket event listeners
     socket.on('connect', joinMatchRoom);
 
-    socket.on('disconnect', () => {
+    socket.on('disconnect', (reason) => {
       setIsConnected(false);
+      console.log('🔌 Match chat disconnected:', reason);
+    });
+
+    // Handle reconnection
+    socket.on('reconnect', (attemptNumber) => {
+      console.log('🔄 Match chat reconnected after', attemptNumber, 'attempts');
+    });
+
+    socket.on('reconnect_attempt', (attemptNumber) => {
+      console.log('🔄 Match chat reconnection attempt', attemptNumber);
     });
 
     // Receive messages
@@ -82,6 +92,8 @@ const useMatchChat = (match, userId, slug) => {
     return () => {
       socket.off('connect', joinMatchRoom);
       socket.off('disconnect');
+      socket.off('reconnect');
+      socket.off('reconnect_attempt');
       socket.off('match_message');
     };
   }, [match, userId]);