Update SocketContext.jsx

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

@@ -1,64 +1,99 @@
-import { createContext, useState, useEffect, useCallback } from 'react';
-import { io } from 'socket.io-client';
+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);
+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) {
-      const newSocket = io(window.location.hostname === 'localhost' ? 'http://localhost:5287' : '/');
+    const connect = useCallback(() => {
+        if (socket) return;
 
-      newSocket.on('connect', () => {
-        setConnected(true);
-        console.log('Socket connected');
-      });
+        const serverUrl = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://localhost:5287';
 
-      newSocket.on('disconnect', () => {
-        setConnected(false);
-        console.log('Socket disconnected');
-      });
+        try {
+            const newSocket = io(serverUrl, {
+                reconnectionAttempts: 3,
+                timeout: 10000,
+                reconnectionDelay: 1000
+            });
 
-      setSocket(newSocket);
-    }
-  }, [socket]);
+            newSocket.on('connect', () => {
+                console.log('Socket connected with ID:', newSocket.id);
+                setConnected(true);
+                connectAttempts.current = 0;
+            });
 
-  const disconnect = useCallback(() => {
-    if (socket) {
-      socket.disconnect();
-      setSocket(null);
-      setConnected(false);
-    }
-  }, [socket]);
+            newSocket.on('disconnect', (reason) => {
+                console.log('Socket disconnected:', reason);
+                setConnected(false);
+            });
 
-  const send = useCallback((event, data) => {
-    if (socket) {
-      socket.emit(event, data);
-    } else {
-      console.error('Cannot send event, socket not connected');
-    }
-  }, [socket]);
+            newSocket.on('connect_error', (error) => {
+                console.error('Connection error:', error);
+                connectAttempts.current += 1;
 
-  const on = useCallback((event, callback) => {
-    if (socket) {
-      socket.on(event, callback);
-    }
-    return () => {
-      if (socket) socket.off(event, callback);
-    };
-  }, [socket]);
+                if (connectAttempts.current >= maxAttempts) {
+                    console.error('Max connection attempts reached, giving up');
+                    newSocket.disconnect();
+                }
+            });
 
-  useEffect(() => {
-    return () => {
-      if (socket) socket.disconnect();
-    };
-  }, [socket]);
+            setSocket(newSocket);
+        } catch (err) {
+            console.error('Error creating socket connection:', err);
+        }
+    }, [socket]);
 
-  return (
-    <SocketContext.Provider value={{ connected, connect, disconnect, send, on, socket }}>
-      {children}
-    </SocketContext.Provider>
-  );
+    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 (
+        <SocketContext.Provider value={{socket, connected, connect, disconnect, send, on}}>
+            {children}
+        </SocketContext.Provider>
+    );
 };