fix: use same host for websocket server as for http server when previ…

…ewing locally (#1309)

.changeset/strange-insects-jog.md

@@ -0,0 +1,5 @@
+---
+'@redocly/cli': patch
+---
+
+The `--host/-h` argument in the `preview-docs` command is now also used by the WebSocket server for hot reloading.

packages/cli/src/commands/preview-docs/preview-server/hot.js

@@ -1,13 +1,29 @@
 (function run() {
   const Socket = window.SimpleWebsocket;
   const port = window.__OPENAPI_CLI_WS_PORT;
+  const host = window.__OPENAPI_CLI_WS_HOST;
 
   let socket;
 
   reconnect();
 
+  function getFormattedHost() {
+    // Use localhost when bound to all interfaces
+    if (host === '::' || host === '0.0.0.0') {
+      return 'localhost';
+    }
+
+    // Other IPv6 addresses must be wrapped in brackets
+    if (host.includes('::')) {
+      return `[${host}]`;
+    }
+
+    // Otherwise return as-is
+    return host;
+  }
+
   function reconnect() {
-    socket = new Socket(`ws://127.0.0.1:${port}`);
+    socket = new Socket(`ws://${getFormattedHost()}:${port}`);
     socket.on('connect', () => {
       socket.send('{"type": "ping"}');
     });
@@ -29,13 +45,14 @@
 
     socket.on('close', () => {
       socket.destroy();
-      console.log('Connection lost, trying to reconnect in 4s');
+      console.log('[hot] Connection lost, trying to reconnect in 4s');
       setTimeout(() => {
         reconnect();
       }, 4000);
     });
 
     socket.on('error', () => {
+      console.log('[hot] Error connecting to hot reloading server');
       socket.destroy();
     });
   }

packages/cli/src/commands/preview-docs/preview-server/preview-server.ts

@@ -12,7 +12,8 @@ function getPageHTML(
   htmlTemplate: string,
   redocOptions: object = {},
   useRedocPro: boolean,
-  wsPort: number
+  wsPort: number,
+  host: string
 ) {
   let templateSrc = readFileSync(htmlTemplate, 'utf-8');
 
@@ -28,6 +29,7 @@ function getPageHTML(
   <script>
     window.__REDOC_EXPORT = '${useRedocPro ? 'RedoclyReferenceDocs' : 'Redoc'}';
     window.__OPENAPI_CLI_WS_PORT = ${wsPort};
+    window.__OPENAPI_CLI_WS_HOST = "${host}";
   </script>
   <script src="/simplewebsocket.min.js"></script>
   <script src="/hot.js"></script>
@@ -67,7 +69,7 @@ export default async function startPreviewServer(
 
     if (request.url?.endsWith('/') || path.extname(request.url!) === '') {
       respondWithGzip(
-        getPageHTML(htmlTemplate || defaultTemplate, getOptions(), useRedocPro, wsPort),
+        getPageHTML(htmlTemplate || defaultTemplate, getOptions(), useRedocPro, wsPort, host),
         request,
         response,
         {
@@ -143,7 +145,7 @@ export default async function startPreviewServer(
     console.timeEnd(colorette.dim(`GET ${request.url}`));
   };
 
-  const wsPort = await getPort({ portRange: [32201, 32301] });
+  const wsPort = await getPort({ port: 32201, portRange: [32201, 32301], host });
 
   const server = startHttpServer(port, host, handler);
   server.on('listening', () => {
@@ -152,5 +154,5 @@ export default async function startPreviewServer(
     );
   });
 
-  return startWsServer(wsPort);
+  return startWsServer(wsPort, host);
 }

packages/cli/src/commands/preview-docs/preview-server/server.ts

@@ -62,8 +62,8 @@ export function startHttpServer(port: number, host: string, handler: http.Reques
   return http.createServer(handler).listen(port, host);
 }
 
-export function startWsServer(port: number) {
-  const socketServer = new SocketServer({ port, clientTracking: true });
+export function startWsServer(port: number, host: string) {
+  const socketServer = new SocketServer({ port, host, clientTracking: true });
 
   socketServer.on('connection', (socket: any) => {
     socket.on('data', (data: string) => {