diff --git a/integration/hmr-log-test.ts b/integration/hmr-log-test.ts index 1a9fe3af396..2d4f30f768e 100644 --- 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 index 6f6b63fd291..a43a6ca5219 100644 --- 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/__tests__/cli-test.ts b/packages/remix-dev/__tests__/cli-test.ts index 0ce72093343..d0b6dc5302e 100644 --- a/packages/remix-dev/__tests__/cli-test.ts +++ b/packages/remix-dev/__tests__/cli-test.ts @@ -122,7 +122,6 @@ describe("remix CLI", () => { --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: diff --git a/packages/remix-dev/cli/commands.ts b/packages/remix-dev/cli/commands.ts index 200a7a81dc6..81687e195a2 100644 --- 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 index 524b1bdc844..72958b13491 100644 --- 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 index e4492d350a9..d8b114f01e4 100644 --- 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; } = {}; + 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 index 83ea95fb5ca..a66ca95a0db 100644 --- 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) => {