1+ import { createContext , useContext , useEffect } from 'react' ;
2+ import io from 'socket.io-client' ;
13import { API_URL } from "../config/api.config" ;
24
3- const SOCKET_URL = API_URL . replace ( '/api' , '' ) ;
5+ // Determine Socket URL based on environment
6+ // In development with proxy, use relative path
7+ // In production, use full backend URL
8+ const getSocketURL = ( ) => {
9+ if ( process . env . NODE_ENV === 'development' && ! process . env . REACT_APP_USE_PROD_API ) {
10+ // In development, connect directly to backend
11+ return 'http://localhost:5000' ;
12+ } else {
13+ // Use full backend URL
14+ return API_URL . replace ( '/api' , '' ) ;
15+ }
16+ } ;
17+
18+ const SOCKET_URL = getSocketURL ( ) ;
19+
20+ console . log ( 'Socket Configuration:' , {
21+ NODE_ENV : process . env . NODE_ENV ,
22+ USE_PROD_API : process . env . REACT_APP_USE_PROD_API ,
23+ SOCKET_URL : SOCKET_URL ,
24+ API_URL : API_URL
25+ } ) ;
426
527const socket = io ( SOCKET_URL , {
6- transports : [ 'websocket' , 'polling' ] ,
28+ path : '/socket.io' ,
29+ transports : [ 'polling' , 'websocket' ] , // Try polling first, then upgrade to websocket
730 withCredentials : true ,
831 reconnection : true ,
9- reconnectionAttempts : Infinity ,
32+ reconnectionAttempts : 5 ,
1033 reconnectionDelay : 1000 ,
1134 reconnectionDelayMax : 5000 ,
12- timeout : 20000 ,
13- autoConnect : false
35+ timeout : 10000 , // Reduced timeout
36+ autoConnect : false ,
37+ forceNew : false
1438} ) ;
1539
16- // Handle offline/online events
17- window . addEventListener ( 'online ', ( ) => {
18- socket . connect ( ) ;
40+ // Add socket event listeners for debugging
41+ socket . on ( 'connect ', ( ) => {
42+ console . log ( '✅ Socket.IO connected:' , socket . id ) ;
1943} ) ;
2044
21- window . addEventListener ( 'offline ', ( ) => {
22- socket . disconnect ( ) ;
45+ socket . on ( 'disconnect ', ( reason ) => {
46+ console . log ( '❌ Socket.IO disconnected:' , reason ) ;
2347} ) ;
2448
25- // Reconnect logic for mobile background state
26- document . addEventListener ( 'visibilitychange' , ( ) => {
27- if ( document . visibilityState === 'visible' ) {
28- socket . connect ( ) ;
29- }
30- } ) ;
49+ socket . on ( 'connect_error' , ( error ) => {
50+ console . error ( '❌ Socket.IO connection error:' , error . message ) ;
51+ } ) ;
52+
53+ socket . on ( 'reconnect' , ( attemptNumber ) => {
54+ console . log ( '🔄 Socket.IO reconnected after' , attemptNumber , 'attempts' ) ;
55+ } ) ;
56+
57+ socket . on ( 'reconnect_attempt' , ( attemptNumber ) => {
58+ console . log ( '🔄 Socket.IO reconnection attempt:' , attemptNumber ) ;
59+ } ) ;
60+
61+ socket . on ( 'reconnect_error' , ( error ) => {
62+ console . error ( '❌ Socket.IO reconnection error:' , error . message ) ;
63+ } ) ;
64+
65+ socket . on ( 'reconnect_failed' , ( ) => {
66+ console . error ( '❌ Socket.IO reconnection failed - max attempts reached' ) ;
67+ } ) ;
68+
69+ // Create context
70+ const SocketContext = createContext ( socket ) ;
71+
72+ // Hook to use socket
73+ export const useSocket = ( ) => {
74+ return useContext ( SocketContext ) ;
75+ } ;
76+
77+ // Provider component
78+ export const SocketProvider = ( { children } ) => {
79+ useEffect ( ( ) => {
80+ // Handle offline/online events
81+ const handleOnline = ( ) => {
82+ console . log ( 'Network online - connecting socket' ) ;
83+ socket . connect ( ) ;
84+ } ;
85+
86+ const handleOffline = ( ) => {
87+ console . log ( 'Network offline - disconnecting socket' ) ;
88+ socket . disconnect ( ) ;
89+ } ;
90+
91+ // Reconnect logic for mobile background state
92+ const handleVisibilityChange = ( ) => {
93+ if ( document . visibilityState === 'visible' ) {
94+ console . log ( 'App visible - connecting socket' ) ;
95+ socket . connect ( ) ;
96+ }
97+ } ;
98+
99+ window . addEventListener ( 'online' , handleOnline ) ;
100+ window . addEventListener ( 'offline' , handleOffline ) ;
101+ document . addEventListener ( 'visibilitychange' , handleVisibilityChange ) ;
102+
103+ return ( ) => {
104+ window . removeEventListener ( 'online' , handleOnline ) ;
105+ window . removeEventListener ( 'offline' , handleOffline ) ;
106+ document . removeEventListener ( 'visibilitychange' , handleVisibilityChange ) ;
107+ } ;
108+ } , [ ] ) ;
109+
110+ return (
111+ < SocketContext . Provider value = { socket } >
112+ { children }
113+ </ SocketContext . Provider >
114+ ) ;
115+ } ;
116+
117+ export default socket ;
0 commit comments