Hello Vite team, thanks for maintaining this nice tool! I just found a bug so I would like to fix it

Description

When server.middlewareMode: true and appType: "custom", we can pass Node.js server instance to server.hmr.server option as well to make sure we use single port to serve everything (HTML, client script, and HMR WebSocket).

In this case, currently the HMR WebSocket client tries to connect to the hard-coded port (24678), which is not listened on by anything and simply causes connection error.
Please try a repro here to reproduce the bug. (UPDATE: Now I included new playground & test case in this PR so you can use them instead as a repro)

In this PR, I propose to make sure to use importMetaUrl.port under this configuration so that the HMR WebSocket client can always connect to the server reliably in any case even under HTTP reverse proxy with WebSocket support, also under a firewall to allow only a single port (e.g. 8080 port for everything)

I now also added playground/custom-server-single-port to easily confirm the fixed behavior with a test case to verify established WebSocket connection with the correct target URL.

About the importance of this bug, this setup is quite useful when the dev server can be mounted in different environments including reverse proxies (assuming the reverse proxy can proxy WebSocket as well). Making sure multiple ports works fine with any environment is hard considering there can be many intermediate things including firewall / proxy config.

Additional context

I have several things I need help from reviewers.

• Is the logic correct? I believe this is at least an improvement but not sure about all the edge cases
• Is the added playground / test case reasonable? Is it fine to create the whole new playground for this specific case? (I think this case is important one though)

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

Notes on the added test case in this PR

I confirmed that this added test case fails as expected on the current main branch (13ac37d) and it passes with this PR.
Here is the local test run log:

On main (13ac37d)

$ pnpm run test-serve custom-server-single-port.spec.ts

> @vitejs/vite-monorepo@ test-serve /Users/naru/github.com/vitejs/vite
> vitest run -c vitest.config.e2e.ts "custom-server-single-port.spec.ts"


 RUN  v0.25.7 /Users/naru/github.com/vitejs/vite

x

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  playground/custom-server-single-port/__tests__/custom-server-single-port.spec.ts > HMR WebSocket connection should use the same host as the main server
Error: net::ERR_CONNECTION_REFUSED (http://localhost:24678/)
 ❯ Page.<anonymous> playground/custom-server-single-port/__tests__/custom-server-single-port.spec.ts:10:14
      8|   new Promise<{ webSocketUrl: string; payload: any }>((resolve, reject) => {
      9|     page.on('requestfailed', (request) => {
     10|       reject(new Error(request.failure().errorText + ` (${request.url()})`))
       |              ^
     11|     })
     12|
 ❯ Page.emit node:events:513:28
 ❯ BrowserContext._onRequestFailed node_modules/.pnpm/playwright-core@1.28.1/node_modules/playwright-core/lib/client/browserContext.js:146:20
 ❯ Proxy.<anonymous> node_modules/.pnpm/playwright-core@1.28.1/node_modules/playwright-core/lib/client/browserContext.js:112:16
 ❯ Proxy.emit node:events:513:28
 ❯ Connection.dispatch node_modules/.pnpm/playwright-core@1.28.1/node_modules/playwright-core/lib/client/connection.js:178:21
 ❯ Proxy.<anonymous> node_modules/.pnpm/playwright-core@1.28.1/node_modules/playwright-core/lib/client/browserType.js:176:22
 ❯ Proxy.emit node:events:513:28
 ❯ Connection.dispatch node_modules/.pnpm/playwright-core@1.28.1/node_modules/playwright-core/lib/client/connection.js:178:21
 ❯ Immediate.<anonymous> node_modules/.pnpm/playwright-core@1.28.1/node_modules/playwright-core/lib/inProcessFactory.js:46:83

This PR

$ pnpm run test-serve custom-server-single-port.spec.ts

> @vitejs/vite-monorepo@ test-serve /Users/naru/github.com/vitejs/vite
> vitest run -c vitest.config.e2e.ts "custom-server-single-port.spec.ts"


 RUN  v0.25.7 /Users/naru/github.com/vitejs/vite

·

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  21:29:56
   Duration  1.21s (transform 283ms, setup 135ms, collect 33ms, tests 418ms)