feat: add sockPort options in queryString

.gitignore

@@ -9,3 +9,4 @@ client
 coverage
 ssl/*.pem
 node_modules
+.vscode

client-src/default/index.js

@@ -221,12 +221,14 @@ if (
 ) {
   protocol = self.location.protocol;
 }
-
 const socketUrl = url.format({
   protocol,
   auth: urlParts.auth,
   hostname,
-  port,
+  port:
+    urlParts.path == null || urlParts.path === '/'
+      ? port
+      : querystring.parse(urlParts.path).sockPort || port,
   // If sockPath is provided it'll be passed in via the __resourceQuery as a
   // query param so it has to be parsed out of the querystring in order for the
   // client to open the socket to the correct location.

lib/options.json

@@ -67,6 +67,19 @@
     "sockPath": {
       "type": "string"
     },
+    "sockPort": {
+      "anyOf": [
+        {
+          "type": "number"
+        },
+        {
+          "type": "string"
+        },
+        {
+          "type": "null"
+        }
+      ]
+    },
     "watchOptions": {
       "type": "object"
     },

lib/utils/addEntries.js

@@ -17,10 +17,10 @@ function addEntries(config, options, server) {
 
     const domain = createDomain(options, app);
     const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : '';
+    const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : '';
     const entries = [
-      `${require.resolve('../../client/')}?${domain}${sockPath}`,
+      `${require.resolve('../../client/')}?${domain}${sockPath}${sockPort}`,
     ];
-
     if (options.hotOnly) {
       entries.push(require.resolve('webpack/hot/only-dev-server'));
     } else if (options.hot) {

lib/utils/createConfig.js

@@ -30,6 +30,10 @@ function createConfig(config, argv, { port }) {
     options.socket = argv.socket;
   }
 
+  if (argv.sockPort) {
+    options.sockPort = argv.sockPort;
+  }
+
   if (argv.progress) {
     options.progress = argv.progress;
   }

test/Client.test.js

@@ -109,3 +109,41 @@ describe('Client complex inline script path', () => {
     });
   });
 });
+
+describe('Client complex inline script path with sockPort', () => {
+  beforeAll((done) => {
+    const options = {
+      port: 9000,
+      host: '0.0.0.0',
+      inline: true,
+      watchOptions: {
+        poll: true,
+      },
+      sockPath: '/foo/test/bar/',
+      sockPort: 8080,
+    };
+    helper.startAwaitingCompilation(config, options, done);
+  });
+
+  afterAll(helper.close);
+
+  describe('browser client', () => {
+    jest.setTimeout(30000);
+
+    it('uses the correct sockPort', (done) => {
+      runBrowser().then(({ page, browser }) => {
+        page
+          .waitForRequest((requestObj) =>
+            requestObj.url().match(/foo\/test\/bar/)
+          )
+          .then((requestObj) => {
+            expect(requestObj.url()).toMatch(
+              /^http:\/\/localhost:8080\/foo\/test\/bar/
+            );
+            browser.close().then(done);
+          });
+        page.goto('http://localhost:9000/main');
+      });
+    });
+  });
+});