1
- import { useEffect , useRef , useState } from " react" ;
2
- import { io as socketIO , Socket } from " socket.io-client" ;
1
+ import { useEffect , useRef , useState } from ' react' ;
2
+ import { io as socketIO , Socket } from ' socket.io-client' ;
3
3
4
- import { log } from " ./utils/logger" ;
5
- import { getPlatformSpecificURL , PlatformOS } from " ./platformUtils" ;
4
+ import { log } from ' ./utils/logger' ;
5
+ import { getPlatformSpecificURL , PlatformOS } from ' ./platformUtils' ;
6
6
7
7
interface Props {
8
8
deviceName : string ; // Unique name to identify the device
@@ -16,20 +16,20 @@ interface Props {
16
16
* @default false
17
17
*/
18
18
enableLogs ?: boolean ;
19
- /**
19
+ /**
20
20
* Whether the app is running on a physical device or an emulator/simulator
21
21
* This can affect how the socket URL is constructed, especially on Android
22
22
* @default false
23
23
*/
24
- isDevice ?: boolean ; // Whether the app is running on a physical device
24
+ isDevice ?: boolean // Whether the app is running on a physical device
25
25
}
26
26
27
27
/**
28
28
* Create a singleton socket instance that persists across component renders
29
29
* This way multiple components can share the same socket connection
30
30
*/
31
31
let globalSocketInstance : Socket | null = null ;
32
- let currentSocketURL = "" ;
32
+ let currentSocketURL = '' ;
33
33
34
34
/**
35
35
* Hook that handles socket connection for device-dashboard communication
@@ -49,7 +49,7 @@ export function useMySocket({
49
49
envVariables,
50
50
platform,
51
51
enableLogs = false ,
52
- isDevice = false ,
52
+ isDevice = false
53
53
} : Props ) {
54
54
const socketRef = useRef < Socket | null > ( null ) ;
55
55
const [ socket , setSocket ] = useState < Socket | null > ( null ) ;
@@ -85,15 +85,11 @@ export function useMySocket({
85
85
} ;
86
86
87
87
const onConnectError = ( error : Error ) => {
88
- log (
89
- `${ logPrefix } Socket connection error: ${ error . message } ` ,
90
- enableLogs ,
91
- "error"
92
- ) ;
88
+ log ( `${ logPrefix } Socket connection error: ${ error . message } ` , enableLogs , 'error' ) ;
93
89
} ;
94
90
95
91
const onConnectTimeout = ( ) => {
96
- log ( `${ logPrefix } Socket connection timeout` , enableLogs , " error" ) ;
92
+ log ( `${ logPrefix } Socket connection timeout` , enableLogs , ' error' ) ;
97
93
} ;
98
94
99
95
// Get the platform-specific URL
@@ -113,21 +109,18 @@ export function useMySocket({
113
109
envVariables : JSON . stringify ( envVariables ) ,
114
110
} ,
115
111
reconnection : false ,
116
- transports : [ " websocket" ] , // Prefer websocket transport for React Native
112
+ transports : [ ' websocket' ] , // Prefer websocket transport for React Native
117
113
} ) ;
118
114
} else {
119
- log (
120
- `${ logPrefix } Reusing existing socket instance to ${ platformUrl } ` ,
121
- enableLogs
122
- ) ;
115
+ log ( `${ logPrefix } Reusing existing socket instance to ${ platformUrl } ` , enableLogs ) ;
123
116
}
124
117
125
118
socketRef . current = globalSocketInstance ;
126
119
setSocket ( socketRef . current ) ;
127
120
128
121
// Setup error event listener
129
- socketRef . current . on ( " connect_error" , onConnectError ) ;
130
- socketRef . current . on ( " connect_timeout" , onConnectTimeout ) ;
122
+ socketRef . current . on ( ' connect_error' , onConnectError ) ;
123
+ socketRef . current . on ( ' connect_timeout' , onConnectTimeout ) ;
131
124
132
125
// Check initial connection state
133
126
if ( socketRef . current . connected ) {
@@ -136,39 +129,31 @@ export function useMySocket({
136
129
}
137
130
138
131
// Set up event handlers
139
- socketRef . current . on ( " connect" , onConnect ) ;
140
- socketRef . current . on ( " disconnect" , onDisconnect ) ;
132
+ socketRef . current . on ( ' connect' , onConnect ) ;
133
+ socketRef . current . on ( ' disconnect' , onDisconnect ) ;
141
134
142
135
// Clean up event listeners on unmount but don't disconnect
143
136
return ( ) => {
144
137
if ( socketRef . current ) {
145
138
log ( `${ logPrefix } Cleaning up socket event listeners` , enableLogs ) ;
146
- socketRef . current . off ( " connect" , onConnect ) ;
147
- socketRef . current . off ( " disconnect" , onDisconnect ) ;
148
- socketRef . current . off ( " connect_error" , onConnectError ) ;
149
- socketRef . current . off ( " connect_timeout" , onConnectTimeout ) ;
139
+ socketRef . current . off ( ' connect' , onConnect ) ;
140
+ socketRef . current . off ( ' disconnect' , onDisconnect ) ;
141
+ socketRef . current . off ( ' connect_error' , onConnectError ) ;
142
+ socketRef . current . off ( ' connect_timeout' , onConnectTimeout ) ;
150
143
// Don't disconnect socket on component unmount
151
144
// We want it to remain connected for the app's lifetime
152
145
}
153
146
} ;
154
147
} catch ( error ) {
155
- log (
156
- `${ logPrefix } Failed to initialize socket: ${ error } ` ,
157
- enableLogs ,
158
- "error"
159
- ) ;
148
+ log ( `${ logPrefix } Failed to initialize socket: ${ error } ` , enableLogs , 'error' ) ;
160
149
}
161
150
// ## DON'T ADD ANYTHING ELSE TO THE DEPENDENCY ARRAY ###
162
151
// eslint-disable-next-line react-hooks/exhaustive-deps
163
152
} , [ persistentDeviceId ] ) ;
164
153
165
154
// Update the socket query parameters when deviceName changes
166
155
useEffect ( ( ) => {
167
- if (
168
- socketRef . current &&
169
- socketRef . current . io . opts . query &&
170
- persistentDeviceId
171
- ) {
156
+ if ( socketRef . current && socketRef . current . io . opts . query && persistentDeviceId ) {
172
157
socketRef . current . io . opts . query = {
173
158
...socketRef . current . io . opts . query ,
174
159
deviceName,
@@ -184,25 +169,15 @@ export function useMySocket({
184
169
const platformUrl = getPlatformSpecificURL ( socketURL , platform , isDevice ) ;
185
170
186
171
// Compare with last known URL to avoid direct property access
187
- if (
188
- socketRef . current &&
189
- currentSocketURL !== platformUrl &&
190
- persistentDeviceId
191
- ) {
192
- log (
193
- `${ logPrefix } Socket URL changed from ${ currentSocketURL } to ${ platformUrl } ` ,
194
- enableLogs
195
- ) ;
172
+ if ( socketRef . current && currentSocketURL !== platformUrl && persistentDeviceId ) {
173
+ log ( `${ logPrefix } Socket URL changed from ${ currentSocketURL } to ${ platformUrl } ` , enableLogs ) ;
196
174
197
175
try {
198
176
// Only recreate socket if URL actually changed
199
177
socketRef . current . disconnect ( ) ;
200
178
currentSocketURL = platformUrl ;
201
179
202
- log (
203
- `${ logPrefix } Creating new socket connection to ${ platformUrl } ` ,
204
- enableLogs
205
- ) ;
180
+ log ( `${ logPrefix } Creating new socket connection to ${ platformUrl } ` , enableLogs ) ;
206
181
globalSocketInstance = socketIO ( platformUrl , {
207
182
autoConnect : true ,
208
183
query : {
@@ -213,29 +188,16 @@ export function useMySocket({
213
188
envVariables : JSON . stringify ( envVariables ) ,
214
189
} ,
215
190
reconnection : false ,
216
- transports : [ " websocket" ] , // Prefer websocket transport for React Native
191
+ transports : [ ' websocket' ] , // Prefer websocket transport for React Native
217
192
} ) ;
218
193
219
194
socketRef . current = globalSocketInstance ;
220
195
setSocket ( socketRef . current ) ;
221
196
} catch ( error ) {
222
- log (
223
- `${ logPrefix } Failed to update socket connection: ${ error } ` ,
224
- enableLogs ,
225
- "error"
226
- ) ;
197
+ log ( `${ logPrefix } Failed to update socket connection: ${ error } ` , enableLogs , 'error' ) ;
227
198
}
228
199
}
229
- } , [
230
- socketURL ,
231
- deviceName ,
232
- logPrefix ,
233
- persistentDeviceId ,
234
- platform ,
235
- enableLogs ,
236
- extraDeviceInfo ,
237
- envVariables ,
238
- ] ) ;
200
+ } , [ socketURL , deviceName , logPrefix , persistentDeviceId , platform , enableLogs , extraDeviceInfo , envVariables ] ) ;
239
201
240
202
/**
241
203
* Manually connect to the socket server
0 commit comments