Update SocketContext.jsx

client/src/common/contexts/SocketContext/SocketContext.jsx

@@ -1,27 +1,50 @@
-import { createContext, useState, useEffect, useCallback } from 'react';
+import {createContext, useState, useEffect, useCallback, useRef} from 'react';
-import { io } from 'socket.io-client';
+import {io} from 'socket.io-client';
 
 export const SocketContext = createContext();
 
-export const SocketProvider = ({ children }) => {
+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) {
+        if (socket) return;
-      const newSocket = io(window.location.hostname === 'localhost' ? 'http://localhost:5287' : '/');
 
-      newSocket.on('connect', () => {
+        const serverUrl = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://localhost:5287';
-        setConnected(true);
+
-        console.log('Socket connected');
+        try {
+            const newSocket = io(serverUrl, {
+                reconnectionAttempts: 3,
+                timeout: 10000,
+                reconnectionDelay: 1000
             });
 
-      newSocket.on('disconnect', () => {
+            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);
-        console.log('Socket disconnected');
+            });
+
+            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]);
 
@@ -30,34 +53,46 @@ export const SocketProvider = ({ children }) => {
             socket.disconnect();
             setSocket(null);
             setConnected(false);
+            console.log('Socket manually disconnected');
         }
     }, [socket]);
 
     const send = useCallback((event, data) => {
-    if (socket) {
+        if (!socket || !connected) {
-      socket.emit(event, data);
+            console.warn(`Cannot send event "${event}": socket not connected`);
-    } else {
+            return false;
-      console.error('Cannot send event, socket not connected');
         }
-  }, [socket]);
+
+        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) {
+        if (!socket) {
-      socket.on(event, callback);
+            console.warn(`Cannot listen for event "${event}": socket not initialized`);
-    }
             return () => {
-      if (socket) socket.off(event, callback);
             };
+        }
+
+        socket.on(event, callback);
+        return () => socket.off(event, callback);
     }, [socket]);
 
     useEffect(() => {
         return () => {
-      if (socket) socket.disconnect();
+            if (socket) {
+                socket.disconnect();
+            }
         };
     }, [socket]);
 
     return (
-    <SocketContext.Provider value={{ connected, connect, disconnect, send, on, socket }}>
+        <SocketContext.Provider value={{socket, connected, connect, disconnect, send, on}}>
             {children}
         </SocketContext.Provider>
     );