@@ -52,97 +52,96 @@ const useWebSocket = (websocketUrl, onEvent) => {
5252 const retryTimeoutRef = useRef ( null ) ; // Reconnection timeout reference
5353 const disconnectTimeoutRef = useRef ( null ) ; // Timeout for delayed disconnection
5454
55- const connect = ( ) => {
56- if ( retryCountRef . current > MAX_RETRIES ) {
57- setState ( { isConnected : false , error : 'Max reconnection attempts reached.' } ) ;
58- console . warn ( "Max WebSocket reconnection attempts reached." ) ;
59- return ;
60- }
61-
62- if ( socketRef . current ) {
63- console . warn ( "WebSocket instance already exists. Skipping connect." ) ;
64- return ;
65- }
66-
67- console . log (
68- `Connecting to WebSocket at ${ websocketUrl } ${ retryCountRef . current }
69- ) ;
70-
71- // Create WebSocket connection
72- const socket = new WebSocket ( websocketUrl ) ;
73- socketRef . current = socket ;
74-
75- socket . onopen = ( ) => {
76- console . log ( "WebSocket connected successfully." ) ;
77- setState ( { isConnected : true , error : null } ) ;
78- retryCountRef . current = 0 ; // Reset retries on successful connection
79-
80- // Clear any pending disconnect timeout
81- if ( disconnectTimeoutRef . current ) {
82- clearTimeout ( disconnectTimeoutRef . current ) ;
83- disconnectTimeoutRef . current = null ;
55+ useEffect ( ( ) => {
56+ const connect = ( ) => {
57+ if ( retryCountRef . current > MAX_RETRIES ) {
58+ setState ( { isConnected : false , error : 'Max reconnection attempts reached.' } ) ;
59+ console . warn ( "Max WebSocket reconnection attempts reached." ) ;
60+ return ;
8461 }
85- } ;
8662
87- socket . onmessage = ( message ) => {
88- try {
89- const event = JSON . parse ( message . data ) ;
90- if ( onEvent ) onEvent ( event ) ;
91- } catch ( error ) {
92- console . error ( "Failed to parse WebSocket message:" , error ) ;
63+ if ( socketRef . current ) {
64+ console . warn ( "WebSocket instance already exists. Skipping connect." ) ;
65+ return ;
9366 }
94- } ;
9567
96- socket . onerror = ( error ) => {
97- console . error ( "WebSocket encountered an error:" , error . message || error ) ;
98- setState ( ( prev ) => ( {
99- ...prev ,
100- error : error . message || 'WebSocket encountered an error' ,
101- } ) ) ;
102- } ;
103-
104- socket . onclose = ( event ) => {
105- console . warn (
106- `WebSocket closed (code: ${ event . code } ${
107- event . reason || "none"
108- } )`
68+ console . log (
69+ `Connecting to WebSocket at ${ websocketUrl } ${ retryCountRef . current }
10970 ) ;
11071
111- if ( event . code === 1000 ) {
112- // Normal closure; no reconnection required
113- console . log ( "WebSocket closed normally." ) ;
114- setState ( { isConnected : false , error : null } ) ;
72+ // Create WebSocket connection
73+ const socket = new WebSocket ( websocketUrl ) ;
74+ socketRef . current = socket ;
75+
76+ socket . onopen = ( ) => {
77+ console . log ( "WebSocket connected successfully." ) ;
78+ setState ( { isConnected : true , error : null } ) ;
79+ retryCountRef . current = 0 ; // Reset retries on successful connection
80+
81+ // Clear any pending disconnect timeout
82+ if ( disconnectTimeoutRef . current ) {
83+ clearTimeout ( disconnectTimeoutRef . current ) ;
84+ disconnectTimeoutRef . current = null ;
85+ }
86+ } ;
87+
88+ socket . onmessage = ( message ) => {
89+ try {
90+ const event = JSON . parse ( message . data ) ;
91+ if ( onEvent ) onEvent ( event ) ;
92+ } catch ( error ) {
93+ console . error ( "Failed to parse WebSocket message:" , error ) ;
94+ }
95+ } ;
96+
97+ socket . onerror = ( error ) => {
98+ console . error ( "WebSocket encountered an error:" , error . message || error ) ;
99+ setState ( ( prev ) => ( {
100+ ...prev ,
101+ error : error . message || 'WebSocket encountered an error' ,
102+ } ) ) ;
103+ } ;
104+
105+ socket . onclose = ( event ) => {
106+ console . warn (
107+ `WebSocket closed (code: ${ event . code } ${ event . reason || "none"
108+ } )`
109+ ) ;
110+
111+ if ( event . code === 1000 ) {
112+ // Normal closure; no reconnection required
113+ console . log ( "WebSocket closed normally." ) ;
114+ setState ( { isConnected : false , error : null } ) ;
115+ socketRef . current = null ;
116+ return ;
117+ }
118+
119+ // Introduce delayed disconnection
120+ disconnectTimeoutRef . current = setTimeout ( ( ) => {
121+ setState ( ( prev ) => ( { ...prev , isConnected : false } ) ) ;
122+ } , 4000 ) ; // Delay for 4 seconds
123+
124+ setState ( ( prev ) => ( {
125+ ...prev ,
126+ error : event . reason || 'Connection closed' ,
127+ } ) ) ;
115128 socketRef . current = null ;
116- return ;
117- }
118129
119- // Introduce delayed disconnection
120- disconnectTimeoutRef . current = setTimeout ( ( ) => {
121- setState ( ( prev ) => ( { ...prev , isConnected : false } ) ) ;
122- } , 4000 ) ; // Delay for 4 seconds
123-
124- setState ( ( prev ) => ( {
125- ...prev ,
126- error : event . reason || 'Connection closed' ,
127- } ) ) ;
128- socketRef . current = null ;
129-
130- // Handle reconnection with exponential backoff
131- const delay = Math . min (
132- RECONNECT_DELAY_BASE * 2 ** retryCountRef . current ,
133- MAX_RECONNECT_DELAY
134- ) ;
135-
136- console . log ( `Reconnecting in ${ delay / 1000 } ) ;
137- retryTimeoutRef . current = setTimeout ( ( ) => {
138- retryCountRef . current += 1 ; // Increment retry count in the ref
139- connect ( ) ;
140- } , delay ) ;
130+ // Handle reconnection with exponential backoff
131+ const delay = Math . min (
132+ RECONNECT_DELAY_BASE * 2 ** retryCountRef . current ,
133+ MAX_RECONNECT_DELAY
134+ ) ;
135+
136+ console . log ( `Reconnecting in ${ delay / 1000 } ) ;
137+ retryTimeoutRef . current = setTimeout ( ( ) => {
138+ retryCountRef . current += 1 ; // Increment retry count in the ref
139+ connect ( ) ;
140+ } , delay ) ;
141+ } ;
141142 } ;
142- } ;
143143
144- useEffect ( ( ) => {
145- connect ( ) ; // Establish the WebSocket connection
144+ connect ( ) ;
146145
147146 return ( ) => {
148147 if ( retryTimeoutRef . current ) clearTimeout ( retryTimeoutRef . current ) ;
@@ -153,7 +152,7 @@ const useWebSocket = (websocketUrl, onEvent) => {
153152 socketRef . current = null ;
154153 }
155154 } ;
156- } , [ websocketUrl ] ) ;
155+ } , [ websocketUrl , onEvent ] ) ;
157156
158157 return state ;
159158} ;
0 commit comments