mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Kudo Chien
3d7e1380b4
Summary: when specifying dev server without port, e.g. http://www.example.com/, there are some issues. 1. redbox error <img src="https://user-images.githubusercontent.com/46429/190540390-8ee420f2-7642-427b-9f2e-e0c6d31015f8.png" width="30%"> 2. showing -1 in loading view <img src="https://user-images.githubusercontent.com/46429/190540727-158f35ad-359f-443a-a4b0-768dd2f7e400.png" width="50%"> the root cause is coming from [`java.net.URL.getPort()` will return -1 when the url doesn't have a port](https://developer.android.com/reference/java/net/URL#getPort()). this pr replaces the parser to [`okhttp3.HttpUrl`](https://square.github.io/okhttp/4.x/okhttp/okhttp3/-http-url/#port) that it will have default port 80 for http or port 443 for https. the two call paths should only serve http/https address, not file:// address. it should be safe to change from java.net.URL to okhttp3.HttpUrl. not fully related, in the case above, android will connect to `ws://www.example.com/:8097` for react-devtools we should strip the trailing slash in *setUpReactDevTools.js* ## Changelog [Android] [Fixed] - Fix port as -1 if dev server without specifying port on Android Pull Request resolved: https://github.com/facebook/react-native/pull/34705 Test Plan: test on rn-tester with the following steps 1. `yarn start` 2. open another terminal and run `ngrok http 8081` and it will return a tunnel url, e.g. `71a1-114-36-194-97.jp.ngrok.io` 3. open dev setting in app and change the dev server to `71a1-114-36-194-97.jp.ngrok.io` 5. reload the app Reviewed By: cipolleschi Differential Revision: D39573988 Pulled By: cortinico fbshipit-source-id: 397df90ab30533207bd87a3f069132d97c22c7fd
81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
if (__DEV__) {
|
|
let isWebSocketOpen = false;
|
|
let ws = null;
|
|
|
|
const reactDevTools = require('react-devtools-core');
|
|
const connectToDevTools = () => {
|
|
if (ws !== null && isWebSocketOpen) {
|
|
// If the DevTools backend is already connected, don't recreate the WebSocket.
|
|
// This would break the connection.
|
|
// If there isn't an active connection, a backend may be waiting to connect,
|
|
// in which case it's okay to make a new one.
|
|
return;
|
|
}
|
|
|
|
// not when debugging in chrome
|
|
// TODO(t12832058) This check is broken
|
|
if (!window.document) {
|
|
const AppState = require('../AppState/AppState');
|
|
const getDevServer = require('./Devtools/getDevServer');
|
|
|
|
// Don't steal the DevTools from currently active app.
|
|
// Note: if you add any AppState subscriptions to this file,
|
|
// you will also need to guard against `AppState.isAvailable`,
|
|
// or the code will throw for bundles that don't have it.
|
|
const isAppActive = () => AppState.currentState !== 'background';
|
|
|
|
// Get hostname from development server (packager)
|
|
const devServer = getDevServer();
|
|
const host = devServer.bundleLoadedFromServer
|
|
? devServer.url
|
|
.replace(/https?:\/\//, '')
|
|
.replace(/\/$/, '')
|
|
.split(':')[0]
|
|
: 'localhost';
|
|
|
|
// Read the optional global variable for backward compatibility.
|
|
// It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
|
|
const port =
|
|
window.__REACT_DEVTOOLS_PORT__ != null
|
|
? window.__REACT_DEVTOOLS_PORT__
|
|
: 8097;
|
|
|
|
const WebSocket = require('../WebSocket/WebSocket');
|
|
ws = new WebSocket('ws://' + host + ':' + port);
|
|
ws.addEventListener('close', event => {
|
|
isWebSocketOpen = false;
|
|
});
|
|
ws.addEventListener('open', event => {
|
|
isWebSocketOpen = true;
|
|
});
|
|
|
|
const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
|
|
|
|
reactDevTools.connectToDevTools({
|
|
isAppActive,
|
|
resolveRNStyle: require('../StyleSheet/flattenStyle'),
|
|
nativeStyleEditorValidAttributes: Object.keys(
|
|
ReactNativeStyleAttributes,
|
|
),
|
|
websocket: ws,
|
|
});
|
|
}
|
|
};
|
|
|
|
const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
|
|
RCTNativeAppEventEmitter.addListener('RCTDevMenuShown', connectToDevTools);
|
|
connectToDevTools(); // Try connecting once on load
|
|
}
|