server.hmr.port config not respected on server side

[Conduitry]

Describe the bug

Specifying server.hmr.port does not seem to work properly in non-middleware (default) mode. The browser attempts to connect to the specified port, but there is no server listening there.

I originally opened an issue for this at sveltejs/kit#3017 but this can be reproduced in the pure Vite Svelte template, not just in SvelteKit - and I also highly doubt that this is Svelte-specific.

In digging into the issue, as close as I think I got to the core of it was in https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/index.ts and https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/ws.ts - Here createWebSocketServer is getting called with the httpServer, which then (if I'm understanding the code correctly), it attempts to reuse as the websocket server, despite the separate server.hmr.port that was passed.

I don't know where I'd suggest a change happen, but it does seem like a separate websocket server should be created by Vite if server.hmr is an object with a port and it does not include an explicit server instance in server.hmr.server.

Reproduction

1. Start from the svelte template (non-SvelteKit)
2. Edit vite.config.js to include server: { hmr: { port: 10000 } }
3. npm run dev
4. Load app in browser

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 8.84 GB / 12.32 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Yarn: 1.22.15
    npm: 8.1.4
  npmPackages:
    vite: ^2.7.0 => 2.7.1

Used Package Manager

npm

Logs

[vite] connecting... client.ts:22:8
Navigated to http://localhost:3000/
Firefox can’t establish a connection to the server at ws://localhost:10000/. client.ts:28:15
[vite] server connection lost. polling for restart... client.ts:222:10
[vite] connecting...

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Conduitry]

In case it helps someone else - What I ended up doing here, since I'm running Vite inside Docker, was to use server.hmr.clientPort instead of server.hmr.port and then use Docker to map the clientPort to the one Vite was still using internally by default.

This isn't a helpful workaround if you're not using containers, though, or if the reason you wanted to switch ports was because you already had something on that port.

[Conduitry]

I'm still seeing the same issue with a pnpm override specifying Vite 2.9.0-beta.2 and following the repro I outlined above. The browser attempts to connect to localhost:10000 and cannot make the connection and the page repeatedly reloads.

I'm looking at the documentation change that was part of #7282, and I'm not clear on what's being said. Is it an intended feature to be able to override just the port and let Vite continue to manage that (separate) HMR server itself?