From 288394a6bcde0068843652798b2abf39af2c4225 Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Sun, 27 Oct 2024 14:56:45 +0100 Subject: [PATCH 1/3] Use websocket /message endpoint to deliver reload request --- .../vscode-extension/src/project/metro.ts | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/vscode-extension/src/project/metro.ts b/packages/vscode-extension/src/project/metro.ts index 1e58dde5d..2b9ee6be6 100644 --- a/packages/vscode-extension/src/project/metro.ts +++ b/packages/vscode-extension/src/project/metro.ts @@ -267,28 +267,35 @@ export class Metro implements Disposable { return initPromise; } - public async reload() { - const appReady = this.devtools.appReady(); - await fetch(`http://localhost:${this._port}/reload`); - await appReady; - } - - public async openDevMenu() { - // to send request to open dev menu, we route it through metro process - // that maintains a websocket connection with the device. Specifically, - // /message endpoint is used to send messages to the device, and metro proxies - // messages between different clients connected to that endpoint. - // Therefore, to send the message to the device we: - // 1. connect to the /message endpoint over websocket - // 2. send specifically formatted message to open dev menu + private async sendMessageToDevice(message: "devMenu" | "reload") { + // we use metro's /message websocket endpoint to deliver specifically formatted + // messages to the device. + // Metro implements a websocket proxy that proxies messages between connected + // clients. This is a mechanism used by the CLI to deliver messages for things + // like reload or open dev menu. + // The message format is a JSON object with a "method" field that specifies + // the action, and version field with the protocol version (currently 2). const ws = new WebSocket(`ws://localhost:${this._port}/message`); await new Promise((resolve) => ws.addEventListener("open", resolve)); ws.send( - JSON.stringify({ version: 2 /* protocol version, needs to be set to 2 */, method: "devMenu" }) + JSON.stringify({ + version: 2 /* protocol version, needs to be set to 2 */, + method: message, + }) ); + // we disconnect immediately after sending the message as there's no need + // to keep the connection open since we use it on rare occations. ws.close(); } + public async reload() { + await this.sendMessageToDevice("reload"); + } + + public async openDevMenu() { + await this.sendMessageToDevice("devMenu"); + } + public async getDebuggerURL() { const WAIT_FOR_DEBUGGER_TIMEOUT_MS = 15_000; From fdabfeb6c4f41f21482ee61c6ae65527bb24c695 Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Tue, 29 Oct 2024 22:15:36 +0100 Subject: [PATCH 2/3] Update packages/vscode-extension/src/project/metro.ts Co-authored-by: filip131311 <159789821+filip131311@users.noreply.github.com> --- packages/vscode-extension/src/project/metro.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-extension/src/project/metro.ts b/packages/vscode-extension/src/project/metro.ts index 2b9ee6be6..37a9d4cb1 100644 --- a/packages/vscode-extension/src/project/metro.ts +++ b/packages/vscode-extension/src/project/metro.ts @@ -267,7 +267,7 @@ export class Metro implements Disposable { return initPromise; } - private async sendMessageToDevice(message: "devMenu" | "reload") { + private async sendMessageToDevice(method: "devMenu" | "reload") { // we use metro's /message websocket endpoint to deliver specifically formatted // messages to the device. // Metro implements a websocket proxy that proxies messages between connected From 5b35fa69658ecc088e54d98eef1319fbfadd3a1b Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Tue, 29 Oct 2024 22:15:44 +0100 Subject: [PATCH 3/3] Update packages/vscode-extension/src/project/metro.ts Co-authored-by: filip131311 <159789821+filip131311@users.noreply.github.com> --- packages/vscode-extension/src/project/metro.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-extension/src/project/metro.ts b/packages/vscode-extension/src/project/metro.ts index 37a9d4cb1..bb56b1385 100644 --- a/packages/vscode-extension/src/project/metro.ts +++ b/packages/vscode-extension/src/project/metro.ts @@ -280,7 +280,7 @@ export class Metro implements Disposable { ws.send( JSON.stringify({ version: 2 /* protocol version, needs to be set to 2 */, - method: message, + method, }) ); // we disconnect immediately after sending the message as there's no need