Skip to content
This repository was archived by the owner on Jan 18, 2024. It is now read-only.

[DO NOT MERGE] Fix websocket controls on RN 0.68 #4305

Closed
lukmccall wants to merge 1 commit into from
Closed

[DO NOT MERGE] Fix websocket controls on RN 0.68 #4305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/dev-server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"@expo/bunyan": "4.0.0",
"@expo/metro-config": "0.3.13",
"@expo/osascript": "2.0.32",
"@react-native-community/cli-server-api": "^5.0.1",
"@react-native-community/cli-server-api": "^7.0.3",
Copy link
Contributor

@EvanBacon EvanBacon Apr 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should drop this dependency and import it from the project if available like we do for metro.

"body-parser": "1.19.0",
"chalk": "^4.0.0",
"connect": "^3.7.0",
Expand Down
22 changes: 17 additions & 5 deletions packages/dev-server/src/MetroDevServer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export async function runMetroDevServerAsync(
server: http.Server;
middleware: any;
messageSocket: MessageSocket;
debuggerProxyEndpoint: MessageSocket;
}> {
const Metro = importMetroFromProject(projectRoot);

Expand All @@ -85,7 +86,13 @@ export async function runMetroDevServerAsync(

const metroConfig = await ExpoMetroConfig.loadAsync(projectRoot, { reporter, ...options });

const { middleware, attachToServer } = createDevServerMiddleware({
const {
middleware,
debuggerProxyEndpoint,
messageSocketEndpoint,
eventsSocketEndpoint,
websocketEndpoints,
} = createDevServerMiddleware({
Comment on lines +89 to +95
Copy link
Contributor

@EvanBacon EvanBacon Apr 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to check which features are available based on the version installed and implement the new functionality only when the new features are available. Ultimately we'll drop this in SDK 46 when we drop the unversioned CLI.

port: metroConfig.server.port,
watchFolders: metroConfig.watchFolders,
logger: options.logger,
Expand All @@ -100,15 +107,20 @@ export async function runMetroDevServerAsync(
return middleware.use(metroMiddleware);
};

const server = await Metro.runServer(metroConfig, { hmrEnabled: true });
// @ts-ignore
const server = await Metro.runServer(metroConfig, { hmrEnabled: true, websocketEndpoints });

const { messageSocket, eventsSocket } = attachToServer(server);
reporter.reportEvent = eventsSocket.reportEvent;
// const { messageSocket, eventsSocket } = attachToServer(server);
// @ts-ignore
reporter.reportEvent = eventsSocketEndpoint.reportEvent;

return {
server,
middleware,
messageSocket,
// @ts-ignore
messageSocket: messageSocketEndpoint,
// @ts-ignore
debuggerProxyEndpoint,
};
}

Expand Down
33 changes: 27 additions & 6 deletions packages/dev-server/src/middleware/devServerMiddleware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import { remoteDevtoolsCorsMiddleware } from './remoteDevtoolsCorsMiddleware';
import { remoteDevtoolsSecurityHeadersMiddleware } from './remoteDevtoolsSecurityHeadersMiddleware';
import { suppressRemoteDebuggingErrorMiddleware } from './suppressErrorMiddleware';

export type AttachToServerFunction = ReturnType<
typeof createReactNativeDevServerMiddleware
>['attachToServer'];
// export type AttachToServerFunction = ReturnType<
// typeof createReactNativeDevServerMiddleware
// >['attachToServer'];

/**
* Extends the default `createDevServerMiddleware` and adds some Expo CLI-specific dev middleware
Expand All @@ -41,8 +41,21 @@ export function createDevServerMiddleware({
watchFolders: readonly string[];
port: number;
logger: Log;
}): { middleware: ConnectServer; attachToServer: AttachToServerFunction; logger: Log } {
const { middleware, attachToServer } = createReactNativeDevServerMiddleware({
}): {
middleware: ConnectServer;
debuggerProxyEndpoint: object;
messageSocketEndpoint: object;
eventsSocketEndpoint: object;
websocketEndpoints: object;
logger: Log;
} {
const {
middleware,
debuggerProxyEndpoint,
messageSocketEndpoint,
eventsSocketEndpoint,
websocketEndpoints,
} = createReactNativeDevServerMiddleware({
port,
watchFolders,
});
Expand All @@ -61,5 +74,13 @@ export function createDevServerMiddleware({
middleware.use('/logs', clientLogsMiddleware(logger));
middleware.use('/inspector', createJsInspectorMiddleware());

return { middleware, attachToServer, logger };
console.log(middleware);
return {
middleware,
debuggerProxyEndpoint,
messageSocketEndpoint,
eventsSocketEndpoint,
websocketEndpoints,
logger,
};
}
21 changes: 14 additions & 7 deletions packages/xdl/src/Webpack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,27 +179,34 @@ function attachNativeDevServerMiddlewareToDevServer(
{
server,
middleware,
attachToServer,
debuggerProxyEndpoint,
messageSocketEndpoint,
eventsSocketEndpoint,
logger,
}: { server: http.Server } & ReturnType<typeof createNativeDevServerMiddleware>
) {
// Hook up the React Native WebSockets to the Webpack dev server.
const { messageSocket, debuggerProxy, eventsSocket } = attachToServer(server);
// const { messageSocket, debuggerProxy, eventsSocket } = attachToServer(server);

customMessageSocketBroadcaster = messageSocket.broadcast;
// @ts-ignore
customMessageSocketBroadcaster = messageSocketEndpoint.broadcast;

const logReporter = new LogReporter(logger);
logReporter.reportEvent = eventsSocket.reportEvent;
// @ts-ignore
logReporter.reportEvent = eventsSocketEndpoint.reportEvent;

const { inspectorProxy } = attachInspectorProxy(projectRoot, {
middleware,
server,
});

return {
messageSocket,
eventsSocket,
debuggerProxy,
//@ts-ignore
messageSocket: messageSocketEndpoint,
//@ts-ignore
eventsSocket: eventsSocketEndpoint,
//@ts-ignore
debuggerProxy: debuggerProxyEndpoint,
logReporter,
inspectorProxy,
};
Expand Down
44 changes: 40 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2866,6 +2866,13 @@
dependencies:
serve-static "^1.13.1"

"@react-native-community/cli-debugger-ui@^7.0.3":
version "7.0.3"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-7.0.3.tgz#3eeeacc5a43513cbcae56e5e965d77726361bcb4"
integrity sha512-G4SA6jFI0j22o+j+kYP8/7sxzbCDqSp2QiHA/X5E0lsGEd2o9qN2zbIjiFr8b8k+VVAYSUONhoC0+uKuINvmkA==
dependencies:
serve-static "^1.13.1"

"@react-native-community/cli-hermes@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-5.0.1.tgz#039d064bf2dcd5043beb7dcd6cdf5f5cdd51e7fc"
Expand Down Expand Up @@ -2921,6 +2928,21 @@
serve-static "^1.13.1"
ws "^1.1.0"

"@react-native-community/cli-server-api@^7.0.3":
version "7.0.3"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-7.0.3.tgz#ba9695a2fdfef22750d141153efd94baf641129b"
integrity sha512-JDrLsrkBgNxbG2u3fouoVGL9tKrXUrTsaNwr+oCV+3XyMwbVe42r/OaQ681/iW/7mHXjuVkDnMcp7BMg7e2yJg==
dependencies:
"@react-native-community/cli-debugger-ui" "^7.0.3"
"@react-native-community/cli-tools" "^6.2.0"
compression "^1.7.1"
connect "^3.6.5"
errorhandler "^1.5.0"
nocache "^2.1.0"
pretty-format "^26.6.2"
serve-static "^1.13.1"
ws "^7.5.1"

"@react-native-community/cli-tools@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-5.0.1.tgz#9ee564dbe20448becd6bce9fbea1b59aa5797919"
Expand All @@ -2933,6 +2955,20 @@
open "^6.2.0"
shell-quote "1.6.1"

"@react-native-community/cli-tools@^6.2.0":
version "6.2.0"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-6.2.0.tgz#8f4adc2d83ab96e5654348533c8fa602742c4fce"
integrity sha512-08ssz4GMEnRxC/1FgTTN/Ud7mExQi5xMphItPjfHiTxpZPhrFn+IMx6mya0ncFEhhxQ207wYlJMRLPRRdBZ8oA==
dependencies:
appdirsjs "^1.2.4"
chalk "^4.1.2"
lodash "^4.17.15"
mime "^2.4.1"
node-fetch "^2.6.0"
open "^6.2.0"
semver "^6.3.0"
shell-quote "1.6.1"

"@react-native-community/cli-types@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-5.0.1.tgz#8c5db4011988b0836d27a5efe230cb34890915dc"
Expand Down Expand Up @@ -18571,10 +18607,10 @@ ws@^6.1.4, ws@^6.2.1:
dependencies:
async-limiter "~1.0.0"

ws@^7, ws@^7.2.3:
version "7.5.2"
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.2.tgz#09cc8fea3bec1bc5ed44ef51b42f945be36900f6"
integrity sha512-lkF7AWRicoB9mAgjeKbGqVUekLnSNO4VjKVnuPHpQeOxZOErX6BPXwJk70nFslRCEEA8EVW7ZjKwXaP9N+1sKQ==
ws@^7, ws@^7.2.3, ws@^7.5.1:
version "7.5.7"
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==

xcode@^2.0.0:
version "2.1.0"
Expand Down