diff --git a/client/src/common/contexts/SocketContext/SocketContext.jsx b/client/src/common/contexts/SocketContext/SocketContext.jsx
index 4c8b00d..bf34edb 100644
--- a/client/src/common/contexts/SocketContext/SocketContext.jsx
+++ b/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' : '/');
-
- newSocket.on('connect', () => {
- setConnected(true);
- console.log('Socket connected');
- });
-
- newSocket.on('disconnect', () => {
- setConnected(false);
- console.log('Socket disconnected');
- });
+ const connect = useCallback(() => {
+ if (socket) return;
- setSocket(newSocket);
- }
- }, [socket]);
+ const serverUrl = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://localhost:5287';
- const disconnect = useCallback(() => {
- if (socket) {
- socket.disconnect();
- setSocket(null);
- setConnected(false);
- }
- }, [socket]);
+ try {
+ const newSocket = io(serverUrl, {
+ reconnectionAttempts: 3,
+ timeout: 10000,
+ reconnectionDelay: 1000
+ });
- const send = useCallback((event, data) => {
- if (socket) {
- socket.emit(event, data);
- } else {
- console.error('Cannot send event, socket not connected');
- }
- }, [socket]);
+ newSocket.on('connect', () => {
+ console.log('Socket connected with ID:', newSocket.id);
+ setConnected(true);
+ connectAttempts.current = 0;
+ });
- const on = useCallback((event, callback) => {
- if (socket) {
- socket.on(event, callback);
- }
- return () => {
- if (socket) socket.off(event, callback);
- };
- }, [socket]);
+ newSocket.on('disconnect', (reason) => {
+ console.log('Socket disconnected:', reason);
+ setConnected(false);
+ });
- useEffect(() => {
- return () => {
- if (socket) socket.disconnect();
- };
- }, [socket]);
+ newSocket.on('connect_error', (error) => {
+ console.error('Connection error:', error);
+ connectAttempts.current += 1;
- return (
-
- {children}
-
- );
+ 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}
+
+ );
};