fix(dev): modify websocket client port

[ygj6]

close #1925

Modify client websocket port from __HMR_PORT__ to location.port .
Websocket client will connect to frontend port instead of backend port when there is a reverse proxy.

[bompus]

@ygj6 #1925 did you try using https://vitejs.dev/config/#server-hmr config options first?

From looking at the code - HMR_PORT is controlled by config.server.hmr.port

server: {
      port: 3000,
      https: true,
      hmr: {
        host: 'yourhost.local',
        port: 3001,
        protocol: 'wss'
      }
    }
}

[ygj6]

@ygj6 #1925 did you try using https://vitejs.dev/config/#server-hmr config options first?

From looking at the code - HMR_PORT is controlled by config.server.hmr.port

server: {
      port: 3000,
      https: true,
      hmr: {
        host: 'yourhost.local',
        port: 3001,
        protocol: 'wss'
      }
    }
}

Good. This config can solve problem in this case.
But I think this config option makes the reverse proxy meaningless.

[bompus]

If you still want to go through the reverse proxy on port 3000, wouldn't you just use the same port for both server and server.hmr and just make sure the hmr.protocol : "wss" and hmr.host is set to what ip/host you are connecting to?

[edorgeville]

This PR would solve my use case:
I have a Vite service that is accessed through port 80 on LAN, but we have a seperate reverse proxy configured that gives us access on a public facing URL over HTTPS.
Currently, if you access Vite locally on port 80, everything works correctly.
But if you try to access it through the reverse proxy (HTTPS, port 443), Vite's HMR tries to connect to port 80 ( __HMR_PORT__) and fails.
Changing __HMR_PORT__ to port 443 in the config would break the local access as well.

[fuzzykiller]

Implementing this change would enable a dev server proxy middleware for ASP.NET Core. Because the port chosen for the dev server is dynamic, a config file option is not really an appropriate solution. Additionally, the Vite.js dev server may not be running with HTTPS enabled when the reverse proxy is.

A fully “relative” WebSocket would solve all this and make the HMR host/port option obsolete.

[antfu]

Suggested change

	const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${location.port}`
	const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__ || location.port}`

Think this could be better. Respect server.hmr.port if specified explicitly or use the same port as client. clientInject.ts file needs to be changed accordingly.