fix: avoid web socket connection when web socket server is not running (#3879)

Author: alexander-akait

lib/Server.js

@@ -1063,42 +1063,43 @@ class Server {
   }
 
   async initialize() {
-    const compilers = this.compiler.compilers || [this.compiler];
+    if (this.options.webSocketServer) {
+      const compilers = this.compiler.compilers || [this.compiler];
 
-    // eslint-disable-next-line no-shadow
-    compilers.forEach((compiler) => {
-      this.addAdditionalEntries(compiler);
+      // eslint-disable-next-line no-shadow
+      compilers.forEach((compiler) => {
+        this.addAdditionalEntries(compiler);
 
-      const webpack = compiler.webpack || require("webpack");
+        const webpack = compiler.webpack || require("webpack");
 
-      const providePlugin = new webpack.ProvidePlugin({
-        __webpack_dev_server_client__: this.getClientTransport(),
-      });
+        new webpack.ProvidePlugin({
+          __webpack_dev_server_client__: this.getClientTransport(),
+        }).apply(compiler);
 
-      providePlugin.apply(compiler);
+        // TODO remove after drop webpack v4 support
+        compiler.options.plugins = compiler.options.plugins || [];
 
-      // TODO remove after drop webpack v4 support
-      compiler.options.plugins = compiler.options.plugins || [];
+        if (this.options.hot) {
+          const HMRPluginExists = compiler.options.plugins.find(
+            (p) => p.constructor === webpack.HotModuleReplacementPlugin
+          );
 
-      if (this.options.hot) {
-        const HMRPluginExists = compiler.options.plugins.find(
-          (p) => p.constructor === webpack.HotModuleReplacementPlugin
-        );
+          if (HMRPluginExists) {
+            this.logger.warn(
+              `"hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.`
+            );
+          } else {
+            // Apply the HMR plugin
+            const plugin = new webpack.HotModuleReplacementPlugin();
 
-        if (HMRPluginExists) {
-          this.logger.warn(
-            `"hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.`
-          );
-        } else {
-          // apply the HMR plugin
-          const plugin = new webpack.HotModuleReplacementPlugin();
-          plugin.apply(compiler);
+            plugin.apply(compiler);
+          }
         }
-      }
-    });
+      });
 
-    if (this.options.client && this.options.client.progress) {
-      this.setupProgressPlugin();
+      if (this.options.client && this.options.client.progress) {
+        this.setupProgressPlugin();
+      }
     }
 
     this.setupHooks();
@@ -2065,7 +2066,6 @@ class Server {
     };
 
     const chokidar = require("chokidar");
-
     const watcher = chokidar.watch(watchPath, finalWatchOptions);
 
     // disabling refreshing on changing the content

test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack4

@@ -59,14 +59,7 @@ Array [
 
 exports[`hot and live reload should work and allow to disable live reload using the "webpack-dev-server-live-reload=false" (default): page errors 1`] = `Array []`;
 
-exports[`hot and live reload should work and do nothing when web socket server disabled (default): console messages 1`] = `
-Array [
-  "[HMR] Waiting for update signal from WDS...",
-  "WebSocket connection to 'ws://localhost:8095/ws' failed: Error during WebSocket handshake: Unexpected response code: 404",
-  "[webpack-dev-server] JSHandle@object",
-  "[webpack-dev-server] Disconnected!",
-]
-`;
+exports[`hot and live reload should work and do nothing when web socket server disabled (default): console messages 1`] = `Array []`;
 
 exports[`hot and live reload should work and do nothing when web socket server disabled (default): page errors 1`] = `Array []`;
 

test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5

@@ -59,14 +59,7 @@ Array [
 
 exports[`hot and live reload should work and allow to disable live reload using the "webpack-dev-server-live-reload=false" (default): page errors 1`] = `Array []`;
 
-exports[`hot and live reload should work and do nothing when web socket server disabled (default): console messages 1`] = `
-Array [
-  "[HMR] Waiting for update signal from WDS...",
-  "WebSocket connection to 'ws://localhost:8095/ws' failed: Error during WebSocket handshake: Unexpected response code: 404",
-  "[webpack-dev-server] JSHandle@object",
-  "[webpack-dev-server] Disconnected!",
-]
-`;
+exports[`hot and live reload should work and do nothing when web socket server disabled (default): console messages 1`] = `Array []`;
 
 exports[`hot and live reload should work and do nothing when web socket server disabled (default): page errors 1`] = `Array []`;
 

test/e2e/__snapshots__/web-socket-server.test.js.snap.webpack4

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`web socket server should work allow to disable: console messages 1`] = `
+Array [
+  "Hey.",
+]
+`;
+
+exports[`web socket server should work allow to disable: page errors 1`] = `Array []`;

test/e2e/__snapshots__/web-socket-server.test.js.snap.webpack5

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`web socket server should work allow to disable: console messages 1`] = `
+Array [
+  "Hey.",
+]
+`;
+
+exports[`web socket server should work allow to disable: page errors 1`] = `Array []`;

test/e2e/progress.test.js

@@ -20,8 +20,6 @@ describe("progress", () => {
     const compiler = webpack(reloadConfig);
     const devServerOptions = {
       port,
-      static: false,
-      hot: true,
       client: {
         progress: true,
       },

test/e2e/web-socket-server.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+const webpack = require("webpack");
+const Server = require("../../lib/Server");
+const config = require("../fixtures/client-config/webpack.config");
+const runBrowser = require("../helpers/run-browser");
+const port = require("../ports-map")["web-socket-server-test"];
+
+describe("web socket server", () => {
+  it("should work allow to disable", async () => {
+    const devServerPort = port;
+
+    const compiler = webpack(config);
+    const devServerOptions = {
+      webSocketServer: false,
+      port: devServerPort,
+    };
+    const server = new Server(devServerOptions, compiler);
+
+    await server.start();
+
+    const { page, browser } = await runBrowser();
+
+    const pageErrors = [];
+    const consoleMessages = [];
+
+    page
+      .on("console", (message) => {
+        consoleMessages.push(message);
+      })
+      .on("pageerror", (error) => {
+        pageErrors.push(error);
+      });
+
+    const webSocketRequests = [];
+
+    const client = page._client;
+
+    client.on("Network.webSocketCreated", (test) => {
+      webSocketRequests.push(test);
+    });
+
+    await page.goto(`http://127.0.0.1:${port}/main`, {
+      waitUntil: "networkidle0",
+    });
+
+    expect(webSocketRequests).toHaveLength(0);
+    expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+      "console messages"
+    );
+    expect(pageErrors).toMatchSnapshot("page errors");
+
+    await browser.close();
+    await server.stop();
+  });
+});

test/ports-map.js

@@ -73,6 +73,7 @@ const listOfTests = {
   "lazy-compilation": 1,
   "range-header": 1,
   port: 1,
+  "web-socket-server-test": 1,
 };
 
 let startPort = 8089;