Skip to content

Commit cd33062

Browse files
cipolleschifacebook-github-bot
authored andcommitted
Derive WebSocket scheme and port from dev server URL for React DevTools (#55894)
Summary: ## Summary: Derive the WebSocket scheme (ws/wss) and port from the dev server URL in `setUpReactDevTools.js` so React DevTools connections work correctly when the dev server is accessed over HTTPS. The Android `OkHttpClientProvider` and `WebSocketModule` changes from the original ATOD patch are intentionally omitted because these are production modules that cannot depend on the dev-only `DevSupportHttpClient` module due to Buck module boundaries. ## Changelog: [GENERAL][CHANGED] - Derive WebSocket scheme and port from dev server URL for React DevTools connections, supporting HTTPS dev servers ## Test Plan: Validated that the JS change correctly derives ws/wss scheme and port from the dev server URL, falling back to ws://host:8097 for local development. ## Facebook: Partially applied from nest/mobile/apps/atod-sample/patches/react-native+0.83.1+004+atod-websocket.patch (Android OkHttpClientProvider and WebSocketModule changes omitted — they create an invalid Buck dependency from production modules to dev-only modules) Reviewed By: cortinico Differential Revision: D95043354
1 parent 4a3080b commit cd33062

File tree

1 file changed

+23
-6
lines changed

1 file changed

+23
-6
lines changed

packages/react-native/Libraries/Core/setUpReactDevTools.js

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -146,17 +146,34 @@ if (__DEV__) {
146146
? guessHostFromDevServerUrl(devServer.url)
147147
: 'localhost';
148148

149-
// Read the optional global variable for backward compatibility.
150-
// It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
151-
const port =
149+
// Derive scheme and port from the dev server URL when possible,
150+
// falling back to ws://host:8097 for local development.
151+
let wsScheme = 'ws';
152+
let port = 8097;
153+
154+
if (
152155
// $FlowFixMe[prop-missing]
153156
// $FlowFixMe[incompatible-use]
154157
window.__REACT_DEVTOOLS_PORT__ != null
155-
? window.__REACT_DEVTOOLS_PORT__
156-
: 8097;
158+
) {
159+
// $FlowFixMe[prop-missing]
160+
port = window.__REACT_DEVTOOLS_PORT__;
161+
} else if (devServer.bundleLoadedFromServer) {
162+
try {
163+
const devUrl = new URL(devServer.url);
164+
if (devUrl.protocol === 'https:') {
165+
wsScheme = 'wss';
166+
}
167+
if (devUrl.port) {
168+
port = parseInt(devUrl.port, 10);
169+
} else if (devUrl.protocol === 'https:') {
170+
port = 443;
171+
}
172+
} catch (e) {}
173+
}
157174

158175
const WebSocket = require('../WebSocket/WebSocket').default;
159-
ws = new WebSocket('ws://' + host + ':' + port);
176+
ws = new WebSocket(wsScheme + '://' + host + ':' + port);
160177
ws.addEventListener('close', event => {
161178
isWebSocketOpen = false;
162179
});

0 commit comments

Comments
 (0)