feat: inherit host from vite server

Author: antfu

packages/core/src/client/standalone/vite.config.ts

@@ -18,8 +18,12 @@ export default defineConfig({
       name: 'setup',
       async configureServer(viteDevServer) {
         const context = await createDevToolsContext(viteDevServer.config, viteDevServer)
+        const host = viteDevServer.config.server.host === true
+          ? '0.0.0.0'
+          : viteDevServer.config.server.host || 'localhost'
         const { middleware } = await createDevToolsMiddleware({
           cwd: viteDevServer.config.root,
+          hostWebSocket: host,
           context,
         })
         viteDevServer.middlewares.use('/.devtools', middleware)

packages/core/src/node/cli-commands.ts

@@ -36,6 +36,7 @@ export async function start(options: StartOptions) {
 
   const { h3 } = await createDevToolsMiddleware({
     cwd: devtools.config.root,
+    hostWebSocket: host,
     context: devtools.context,
   })
 

packages/core/src/node/plugins/server.ts

@@ -15,8 +15,14 @@ export function DevToolsServer(): Plugin {
     apply: 'serve',
     async configureServer(viteDevServer) {
       context = await createDevToolsContext(viteDevServer.config, viteDevServer)
+
+      const host = viteDevServer.config.server.host === true
+        ? '0.0.0.0'
+        : viteDevServer.config.server.host || 'localhost'
+
       const { middleware } = await createDevToolsMiddleware({
         cwd: viteDevServer.config.root,
+        hostWebSocket: host,
         context,
       })
       viteDevServer.middlewares.use('/.devtools/', middleware)

packages/core/src/node/ws.ts

@@ -12,6 +12,7 @@ import { MARK_CHECK } from './constants'
 export interface CreateWsServerOptions {
   cwd: string
   portWebSocket?: number
+  hostWebSocket: string
   base?: string
   context: DevToolsNodeContext
 }
@@ -20,12 +21,14 @@ const ANONYMOUS_SCOPE = 'vite:anonymous:'
 
 export async function createWsServer(options: CreateWsServerOptions) {
   const rpcHost = options.context.rpc as unknown as RpcFunctionsHost
-  const port = options.portWebSocket ?? await getPort({ port: 7812, random: true })
+  const port = options.portWebSocket ?? await getPort({ port: 7812, random: true })!
+  const host = options.hostWebSocket ?? 'localhost'
 
   const wsClients = new Set<WebSocket>()
 
   const preset = createWsRpcPreset({
-    port: port!,
+    port,
+    host,
     onConnected: (ws, meta) => {
       wsClients.add(ws)
       console.log(c.green`${MARK_CHECK} Websocket client [${meta.id}] connected`)

packages/rpc/src/presets/ws/server.ts

@@ -8,6 +8,7 @@ import { defineRpcServerPreset } from '..'
 
 export interface WebSocketRpcServerOptions {
   port: number
+  host?: string
   onConnected?: (ws: WebSocket, meta: DevToolsNodeRpcSessionMeta) => void
   onDisconnected?: (ws: WebSocket, meta: DevToolsNodeRpcSessionMeta) => void
 }
@@ -28,12 +29,14 @@ export const createWsRpcPreset: RpcServerPreset<
 > = defineRpcServerPreset((options: WebSocketRpcServerOptions) => {
   const {
     port,
+    host = 'localhost',
     onConnected = NOOP,
     onDisconnected = NOOP,
   } = options
 
   const wss = new WebSocketServer({
     port,
+    host,
   })
 
   return <ClientFunctions extends object, ServerFunctions extends object>(