refactor: web socket url generation (#3319)

Author: snitin315

lib/utils/DevServerPlugin.js

@@ -51,8 +51,10 @@ class DevServerPlugin {
       port = `&port=${options.client.port}`;
     } else if (options.webSocketServer.options.port && !isSockJSType) {
       port = `&port=${options.webSocketServer.options.port}`;
-    } else {
+    } else if (options.port) {
       port = `&port=${options.port}`;
+    } else {
+      port = '';
     }
 
     /** @type {string} */

test/e2e/TransportMode.test.js

@@ -94,4 +94,54 @@ describe('transportMode client', () => {
       });
     });
   });
+
+  describe('unspecified port', () => {
+    beforeAll((done) => {
+      const options = {
+        host: '0.0.0.0',
+        hot: false,
+        client: { transport: 'sockjs' },
+        webSocketServer: 'sockjs',
+      };
+      testServer.startAwaitingCompilation(config, options, done);
+    });
+
+    describe('on browser client', () => {
+      it('logs correctly', (done) => {
+        runBrowser().then(({ page, browser }) => {
+          const res = [];
+          page.goto(`http://localhost:8080/main`);
+          page.on('console', ({ _text }) => {
+            res.push(_text);
+          });
+
+          page.waitForTimeout(initConsoleDelay).then(() => {
+            testServer.close(() => {
+              // make sure the client gets the close message
+              page.waitForTimeout(awaitServerCloseDelay).then(() => {
+                browser.close().then(() => {
+                  for (let i = res.length - 1; i >= 0; i--) {
+                    if (res[i] === '[webpack-dev-server] Disconnected!') {
+                      break;
+                    } else if (
+                      res[i] === 'close' ||
+                      res[i].includes('net::ERR_CONNECTION_REFUSED') ||
+                      // this indicates a WebSocket Error object that was logged
+                      res[i].includes('JSHandle@object')
+                    ) {
+                      // remove additional logging for the now failing connection,
+                      // since this could be a variable number of error messages
+                      res.splice(i, 1);
+                    }
+                  }
+                  expect(res).toMatchSnapshot();
+                  done();
+                });
+              });
+            });
+          });
+        });
+      });
+    });
+  });
 });

test/e2e/__snapshots__/TransportMode.test.js.snap.webpack4

@@ -22,6 +22,14 @@ Array [
 ]
 `;
 
+exports[`transportMode client unspecified port on browser client logs correctly 1`] = `
+Array [
+  "Hey.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+]
+`;
+
 exports[`transportMode client ws on browser client logs correctly 1`] = `
 Array [
   "Hey.",

test/e2e/__snapshots__/TransportMode.test.js.snap.webpack5

@@ -22,6 +22,14 @@ Array [
 ]
 `;
 
+exports[`transportMode client unspecified port on browser client logs correctly 1`] = `
+Array [
+  "Hey.",
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] Disconnected!",
+]
+`;
+
 exports[`transportMode client ws on browser client logs correctly 1`] = `
 Array [
   "Hey.",