diff --git a/packages/react-native/Libraries/Inspector/NetworkOverlay.js b/packages/react-native/Libraries/Inspector/NetworkOverlay.js index 41946e2f762264..d9c56bbc2113c1 100644 --- a/packages/react-native/Libraries/Inspector/NetworkOverlay.js +++ b/packages/react-native/Libraries/Inspector/NetworkOverlay.js @@ -106,7 +106,7 @@ class NetworkOverlay extends React.Component { }; // Map of `socketId` -> `index in `this.state.requests`. - _socketIdMap: {[string]: number} = {}; + _socketIdMap: {[number]: number} = {}; // Map of `xhr._index` -> `index in `this.state.requests`. _xhrIdMap: {[key: number]: number, ...} = {}; @@ -275,7 +275,7 @@ class NetworkOverlay extends React.Component { }); }); - WebSocketInterceptor.setOnMessageCallback((socketId, message) => { + WebSocketInterceptor.setOnMessageCallback((message, socketId) => { const socketIndex = this._socketIdMap[socketId]; if (socketIndex === undefined) { return; @@ -294,7 +294,7 @@ class NetworkOverlay extends React.Component { }); }); - WebSocketInterceptor.setOnCloseCallback((socketId, message) => { + WebSocketInterceptor.setOnCloseCallback((message, socketId) => { const socketIndex = this._socketIdMap[socketId]; if (socketIndex === undefined) { return; @@ -308,7 +308,7 @@ class NetworkOverlay extends React.Component { }); }); - WebSocketInterceptor.setOnErrorCallback((socketId, message) => { + WebSocketInterceptor.setOnErrorCallback((message, socketId) => { const socketIndex = this._socketIdMap[socketId]; if (socketIndex === undefined) { return; diff --git a/packages/react-native/Libraries/WebSocket/WebSocketInterceptor.js b/packages/react-native/Libraries/WebSocket/WebSocketInterceptor.js index 20eea68c720412..586eb603c04553 100644 --- a/packages/react-native/Libraries/WebSocket/WebSocketInterceptor.js +++ b/packages/react-native/Libraries/WebSocket/WebSocketInterceptor.js @@ -40,50 +40,78 @@ let isInterceptorEnabled = false; const WebSocketInterceptor = { /** * Invoked when RCTWebSocketModule.close(...) is called. + * The callback is invoked with the following parameters: + * - `'code'` - The status code explaining why the connection was closed, + * - `'reason'` - The reason explaining why the connection was closed, + * - `'socketId'` - The id of the socket. */ - setCloseCallback(callback: $FlowFixMe) { + setCloseCallback(callback: ?(number | null, string | null, number) => void) { closeCallback = callback; }, /** * Invoked when RCTWebSocketModule.send(...) or sendBinary(...) is called. + * The callback is invoked with the following parameters: + * - `'data'` - The data sent, + * - `'socketId'` - The id of the socket. */ - setSendCallback(callback: $FlowFixMe) { + setSendCallback(callback: ?(string | ArrayBuffer, number) => void) { sendCallback = callback; }, /** * Invoked when RCTWebSocketModule.connect(...) is called. + * The callback is invoked with the following parameters: + * - `'url'` - The url of the socket, + * - `'protocols'` - The protocols of the socket, + * - `'options'` - The options of the socket, + * - `'socketId'` - The id of the socket. */ - setConnectCallback(callback: $FlowFixMe) { + setConnectCallback( + callback: ?(string, Array | null, Array, number) => void, + ) { connectCallback = callback; }, /** * Invoked when event "websocketOpen" happens. + * The callback is invoked with the following parameters: + * - `'socketId'` - The id of the socket. */ - setOnOpenCallback(callback: $FlowFixMe) { + setOnOpenCallback(callback: ?(number) => void) { onOpenCallback = callback; }, /** * Invoked when event "websocketMessage" happens. + * The callback is invoked with the following parameters: + * - `'data'` - The data received, + * - `'socketId'` - The id of the socket. */ - setOnMessageCallback(callback: $FlowFixMe) { + setOnMessageCallback(callback: ?(string | ArrayBuffer, number) => void) { onMessageCallback = callback; }, /** * Invoked when event "websocketFailed" happens. + * The callback is invoked with the following parameters: + * - `'message'` - The error message, + * - `'socketId'` - The id of the socket. */ - setOnErrorCallback(callback: $FlowFixMe) { + setOnErrorCallback(callback: ?({message: string}, number) => void) { onErrorCallback = callback; }, /** * Invoked when event "websocketClosed" happens. + * The callback is invoked with the following parameters: + * - `'code'` - The status code explaining why the connection was closed, + * - `'reason'` - The reason explaining why the connection was closed, + * - `'socketId'` - The id of the socket. */ - setOnCloseCallback(callback: $FlowFixMe) { + setOnCloseCallback( + callback: ?({code: number, reason: ?string}, number) => void, + ) { onCloseCallback = callback; }, @@ -105,10 +133,10 @@ const WebSocketInterceptor = { eventEmitter.addListener('websocketMessage', ev => { if (onMessageCallback) { onMessageCallback( - ev.id, ev.type === 'binary' ? WebSocketInterceptor._arrayBufferToString(ev.data) : ev.data, + ev.id, ); } }), @@ -121,13 +149,13 @@ const WebSocketInterceptor = { // $FlowFixMe[incompatible-type] eventEmitter.addListener('websocketClosed', ev => { if (onCloseCallback) { - onCloseCallback(ev.id, {code: ev.code, reason: ev.reason}); + onCloseCallback({code: ev.code, reason: ev.reason}, ev.id); } }), // $FlowFixMe[incompatible-type] eventEmitter.addListener('websocketFailed', ev => { if (onErrorCallback) { - onErrorCallback(ev.id, {message: ev.message}); + onErrorCallback({message: ev.message}, ev.id); } }), ]; diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 174bdb7abb1226..927bcf9b8d3ff1 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -5244,7 +5244,7 @@ declare class NetworkOverlay extends React.Component { offset: number, visibleLength: number, }; - _socketIdMap: { [string]: number }; + _socketIdMap: { [number]: number }; _xhrIdMap: { [key: number]: number, ... }; state: State; _enableXHRInterception(): void; @@ -9493,13 +9493,19 @@ declare module.exports: WebSocketEvent; exports[`public API should not change unintentionally Libraries/WebSocket/WebSocketInterceptor.js 1`] = ` "declare const WebSocketInterceptor: { - setCloseCallback(callback: $FlowFixMe): void, - setSendCallback(callback: $FlowFixMe): void, - setConnectCallback(callback: $FlowFixMe): void, - setOnOpenCallback(callback: $FlowFixMe): void, - setOnMessageCallback(callback: $FlowFixMe): void, - setOnErrorCallback(callback: $FlowFixMe): void, - setOnCloseCallback(callback: $FlowFixMe): void, + setCloseCallback( + callback: ?(number | null, string | null, number) => void + ): void, + setSendCallback(callback: ?(string | ArrayBuffer, number) => void): void, + setConnectCallback( + callback: ?(string, Array | null, Array, number) => void + ): void, + setOnOpenCallback(callback: ?(number) => void): void, + setOnMessageCallback(callback: ?(string | ArrayBuffer, number) => void): void, + setOnErrorCallback(callback: ?({ message: string }, number) => void): void, + setOnCloseCallback( + callback: ?({ code: number, reason: ?string }, number) => void + ): void, isInterceptorEnabled(): boolean, _unregisterEvents(): void, _registerEvents(): void,