feat(dev): use the same port for dev ready messages and websocket

remix-run · May 24, 2023 · 1a61bd6 · 1a61bd6
1 parent f2bcfcb
commit 1a61bd6
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 65 deletions.
diff --git a/integration/hmr-log-test.ts b/integration/hmr-log-test.ts
@@ -9,11 +9,7 @@ import { createFixtureProject, css, js, json } from "./helpers/create-fixture";
 
 test.setTimeout(120_000);
 
-let fixture = (options: {
-  appServerPort: number;
-  httpPort: number;
-  webSocketPort: number;
-}) => ({
+let fixture = (options: { appServerPort: number; httpPort: number }) => ({
   files: {
     "remix.config.js": js`
       module.exports = {
@@ -22,7 +18,6 @@ let fixture = (options: {
         future: {
           unstable_dev: {
             httpPort: ${options.httpPort},
-            webSocketPort: ${options.webSocketPort},
           },
           v2_routeConvention: true,
           v2_errorBoundary: true,
@@ -252,9 +247,8 @@ test("HMR", async ({ page }) => {
   let portRange = makeRange(4080, 4099);
   let appServerPort = await getPort({ port: portRange });
   let httpPort = await getPort({ port: portRange });
-  let webSocketPort = await getPort({ port: portRange });
   let projectDir = await createFixtureProject(
-    fixture({ appServerPort, httpPort, webSocketPort })
+    fixture({ appServerPort, httpPort })
   );
 
   // spin up dev server

diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
@@ -9,11 +9,7 @@ import { createFixtureProject, css, js, json } from "./helpers/create-fixture";
 
 test.setTimeout(120_000);
 
-let fixture = (options: {
-  appServerPort: number;
-  httpPort: number;
-  webSocketPort: number;
-}) => ({
+let fixture = (options: { appServerPort: number; httpPort: number }) => ({
   files: {
     "remix.config.js": js`
       module.exports = {
@@ -22,7 +18,6 @@ let fixture = (options: {
         future: {
           unstable_dev: {
             httpPort: ${options.httpPort},
-            webSocketPort: ${options.webSocketPort},
           },
           v2_routeConvention: true,
           v2_errorBoundary: true,
@@ -251,9 +246,8 @@ test("HMR", async ({ page }) => {
   let portRange = makeRange(3080, 3099);
   let appServerPort = await getPort({ port: portRange });
   let httpPort = await getPort({ port: portRange });
-  let webSocketPort = await getPort({ port: portRange });
   let projectDir = await createFixtureProject(
-    fixture({ appServerPort, httpPort, webSocketPort })
+    fixture({ appServerPort, httpPort })
   );
 
   // spin up dev server

diff --git a/packages/remix-dev/cli/commands.ts b/packages/remix-dev/cli/commands.ts
@@ -183,7 +183,7 @@ export async function build(
       host: dev.httpHost,
       port: dev.httpPort,
     };
-    options.devWebSocketPort = dev.webSocketPort;
+    options.devWebSocketPort = dev.httpPort;
   }
 
   fse.emptyDirSync(config.assetsBuildDirectory);
@@ -224,7 +224,6 @@ export async function dev(
     httpHost?: string;
     httpPort?: number;
     restart?: boolean;
-    websocketPort?: number;
   } = {}
 ) {
   if (process.env.NODE_ENV && process.env.NODE_ENV !== "development") {
@@ -475,7 +474,6 @@ type DevBuildFlags = {
   httpScheme: string;
   httpHost: string;
   httpPort: number;
-  webSocketPort: number;
 };
 let resolveDevBuild = async (
   config: RemixConfig,
@@ -499,17 +497,11 @@ let resolveDevBuild = async (
     flags.httpPort ??
     (dev === true ? undefined : dev.httpPort) ??
     (await findPort());
-  // prettier-ignore
-  let webSocketPort =
-    flags.webSocketPort ??
-    (dev === true ? undefined : dev.webSocketPort) ??
-    (await findPort());
 
   return {
     httpScheme,
     httpHost,
     httpPort,
-    webSocketPort,
   };
 };
 
@@ -524,10 +516,7 @@ let resolveDevServe = async (
   let dev = config.future.unstable_dev;
   if (dev === false) throw Error("Cannot resolve dev options");
 
-  let { httpScheme, httpHost, httpPort, webSocketPort } = await resolveDevBuild(
-    config,
-    flags
-  );
+  let { httpScheme, httpHost, httpPort } = await resolveDevBuild(config, flags);
 
   // prettier-ignore
   let command =
@@ -561,7 +550,6 @@ let resolveDevServe = async (
     httpScheme,
     httpHost,
     httpPort,
-    webSocketPort,
     restart,
   };
 };
diff --git a/packages/remix-dev/cli/run.ts b/packages/remix-dev/cli/run.ts
@@ -48,7 +48,6 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
     --http-host         HTTP(S) host for the dev server. Default: localhost
     --http-port         HTTP(S) port for the dev server. Default: any open port
     --no-restart        Do not restart the app server when rebuilds occur.
-    --websocket-port    WebSocket port for the dev server. Default: any open port
   \`init\` Options:
     --no-delete         Skip deleting the \`remix.init\` script
   \`routes\` Options:
@@ -188,7 +187,6 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       "--http-host": String,
       "--http-port": Number,
       "--no-restart": Boolean,
-      "--websocket-port": Number,
     },
     {
       argv,
@@ -225,10 +223,6 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     flags.httpPort = flags["http-port"];
     delete flags["http-port"];
   }
-  if (flags["websocket-port"]) {
-    flags.webSocketPort = flags["websocket-port"];
-    delete flags["websocket-port"];
-  }
 
   if (args["--no-delete"]) {
     flags.delete = false;

diff --git a/packages/remix-dev/devServer_unstable/index.ts b/packages/remix-dev/devServer_unstable/index.ts
@@ -1,5 +1,6 @@
 import * as path from "node:path";
 import * as stream from "node:stream";
+import * as http from "node:http";
 import fs from "fs-extra";
 import prettyMs from "pretty-ms";
 import execa from "execa";
@@ -44,18 +45,10 @@ export let serve = async (
     httpScheme: string;
     httpHost: string;
     httpPort: number;
-    webSocketPort: number;
     restart: boolean;
   }
 ) => {
   await loadEnv(initialConfig.rootDirectory);
-  let websocket = Socket.serve({ port: options.webSocketPort });
-  let httpOrigin: Origin = {
-    scheme: options.httpScheme,
-    host: options.httpHost,
-    port: options.httpPort,
-  };
-
   let state: {
     appServer?: execa.ExecaChildProcess;
     manifest?: Manifest;
@@ -65,6 +58,30 @@ export let serve = async (
     prevLoaderHashes?: Record<string, string>;
   } = {};
 
+  let app = express()
+    // handle `broadcastDevReady` messages
+    .use(express.json())
+    .post("/ping", (req, res) => {
+      let { buildHash } = req.body;
+      if (typeof buildHash !== "string") {
+        console.warn(`Unrecognized payload: ${req.body}`);
+        res.sendStatus(400);
+      }
+      if (buildHash === state.manifest?.version) {
+        state.appReady?.ok();
+      }
+      res.sendStatus(200);
+    });
+
+  let server = http.createServer(app);
+  let websocket = Socket.serve(server);
+
+  let httpOrigin: Origin = {
+    scheme: options.httpScheme,
+    host: options.httpHost,
+    port: options.httpPort,
+  };
+
   let bin = await detectBin();
   let startAppServer = (command: string) => {
     console.log(`> ${command}`);
@@ -119,7 +136,7 @@ export let serve = async (
         sourcemap: true,
         onWarning: warnOnce,
         devHttpOrigin: httpOrigin,
-        devWebSocketPort: options.webSocketPort,
+        devWebSocketPort: options.httpPort,
       },
     },
     {
@@ -198,28 +215,14 @@ export let serve = async (
     }
   );
 
-  let httpServer = express()
-    // handle `broadcastDevReady` messages
-    .use(express.json())
-    .post("/ping", (req, res) => {
-      let { buildHash } = req.body;
-      if (typeof buildHash !== "string") {
-        console.warn(`Unrecognized payload: ${req.body}`);
-        res.sendStatus(400);
-      }
-      if (buildHash === state.manifest?.version) {
-        state.appReady?.ok();
-      }
-      res.sendStatus(200);
-    })
-    .listen(httpOrigin.port, () => {
-      console.log("Remix dev server ready");
-    });
+  server.listen(httpOrigin.port, () => {
+    console.log("Remix dev server ready");
+  });
 
   return new Promise(() => {}).finally(async () => {
     await kill(state.appServer);
     websocket.close();
-    httpServer.close();
+    server.close();
     await dispose();
   });
 };

diff --git a/packages/remix-dev/devServer_unstable/socket.ts b/packages/remix-dev/devServer_unstable/socket.ts
@@ -1,4 +1,5 @@
 import WebSocket from "ws";
+import type { Server as HTTPServer } from "http";
 
 import { type Manifest } from "../manifest";
 import type * as HMR from "./hmr";
@@ -14,8 +15,8 @@ type Message =
 
 type Broadcast = (message: Message) => void;
 
-export let serve = (options: { port: number }) => {
-  let wss = new WebSocket.Server({ port: options.port });
+export let serve = (server: HTTPServer) => {
+  let wss = new WebSocket.Server({ server });
 
   let broadcast: Broadcast = (message) => {
     wss.clients.forEach((client) => {