From ab5da6093d99e34e6d54c5992ac89b217c346cbc Mon Sep 17 00:00:00 2001 From: MarryDream <2190758465@qq.com> Date: Mon, 31 Jul 2023 16:25:59 +0800 Subject: [PATCH] fix: websockets are no longer created when `server.hmr` is `false` (#13994) --- packages/vite/src/client/client.ts | 68 ++++++++++--------- .../vite/src/node/plugins/clientInjections.ts | 3 + 2 files changed, 39 insertions(+), 32 deletions(-) diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts index 8943fb0521a5d7..d76b2f8497c6b7 100644 --- a/packages/vite/src/client/client.ts +++ b/packages/vite/src/client/client.ts @@ -7,6 +7,7 @@ import '@vite/env' // injected by the hmr plugin when served declare const __BASE__: string declare const __SERVER_HOST__: string +declare const __HMR_ENABLE__: string declare const __HMR_PROTOCOL__: string | null declare const __HMR_HOSTNAME__: string | null declare const __HMR_PORT__: number | null @@ -21,6 +22,7 @@ const importMetaUrl = new URL(import.meta.url) // use server configuration, then fallback to inference const serverHost = __SERVER_HOST__ +const serverEnable = __HMR_ENABLE__ const socketProtocol = __HMR_PROTOCOL__ || (importMetaUrl.protocol === 'https:' ? 'wss' : 'ws') const hmrPort = __HMR_PORT__ @@ -32,41 +34,43 @@ const base = __BASE__ || '/' const messageBuffer: string[] = [] let socket: WebSocket -try { - let fallback: (() => void) | undefined - // only use fallback when port is inferred to prevent confusion - if (!hmrPort) { - fallback = () => { - // fallback to connecting directly to the hmr server - // for servers which does not support proxying websocket - socket = setupWebSocket(socketProtocol, directSocketHost, () => { - const currentScriptHostURL = new URL(import.meta.url) - const currentScriptHost = - currentScriptHostURL.host + - currentScriptHostURL.pathname.replace(/@vite\/client$/, '') - console.error( - '[vite] failed to connect to websocket.\n' + - 'your current setup:\n' + - ` (browser) ${currentScriptHost} <--[HTTP]--> ${serverHost} (server)\n` + - ` (browser) ${socketHost} <--[WebSocket (failing)]--> ${directSocketHost} (server)\n` + - 'Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .', - ) - }) - socket.addEventListener( - 'open', - () => { - console.info( - '[vite] Direct websocket connection fallback. Check out https://vitejs.dev/config/server-options.html#server-hmr to remove the previous connection error.', +if (serverEnable) { + try { + let fallback: (() => void) | undefined + // only use fallback when port is inferred to prevent confusion + if (!hmrPort) { + fallback = () => { + // fallback to connecting directly to the hmr server + // for servers which does not support proxying websocket + socket = setupWebSocket(socketProtocol, directSocketHost, () => { + const currentScriptHostURL = new URL(import.meta.url) + const currentScriptHost = + currentScriptHostURL.host + + currentScriptHostURL.pathname.replace(/@vite\/client$/, '') + console.error( + '[vite] failed to connect to websocket.\n' + + 'your current setup:\n' + + ` (browser) ${currentScriptHost} <--[HTTP]--> ${serverHost} (server)\n` + + ` (browser) ${socketHost} <--[WebSocket (failing)]--> ${directSocketHost} (server)\n` + + 'Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .', ) - }, - { once: true }, - ) + }) + socket.addEventListener( + 'open', + () => { + console.info( + '[vite] Direct websocket connection fallback. Check out https://vitejs.dev/config/server-options.html#server-hmr to remove the previous connection error.', + ) + }, + { once: true }, + ) + } } - } - socket = setupWebSocket(socketProtocol, socketHost, fallback) -} catch (error) { - console.error(`[vite] failed to connect to websocket (${error}). `) + socket = setupWebSocket(socketProtocol, socketHost, fallback) + } catch (error) { + console.error(`[vite] failed to connect to websocket (${error}). `) + } } function setupWebSocket( diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts index 5ac79c8d14ef8e..914460ed52a6a1 100644 --- a/packages/vite/src/node/plugins/clientInjections.ts +++ b/packages/vite/src/node/plugins/clientInjections.ts @@ -29,6 +29,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin { const serverHost = `${resolvedServerHostname}:${resolvedServerPort}${devBase}` let hmrConfig = config.server.hmr + const hmrEnable = hmrConfig !== false hmrConfig = isObject(hmrConfig) ? hmrConfig : undefined const host = hmrConfig?.host || null const protocol = hmrConfig?.protocol || null @@ -58,6 +59,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin { const baseReplacement = escapeReplacement(devBase) const definesReplacement = () => serializedDefines const serverHostReplacement = escapeReplacement(serverHost) + const hmrEnableReplacement = escapeReplacement(hmrEnable) const hmrProtocolReplacement = escapeReplacement(protocol) const hmrHostnameReplacement = escapeReplacement(host) const hmrPortReplacement = escapeReplacement(port) @@ -72,6 +74,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin { .replace(/__BASE__/g, baseReplacement) .replace(`__DEFINES__`, definesReplacement) .replace(`__SERVER_HOST__`, serverHostReplacement) + .replace(`__HMR_ENABLE__`, hmrEnableReplacement) .replace(`__HMR_PROTOCOL__`, hmrProtocolReplacement) .replace(`__HMR_HOSTNAME__`, hmrHostnameReplacement) .replace(`__HMR_PORT__`, hmrPortReplacement)