fix(client-src): don't use self.location.port (#1838)

ISSUE: #1777
REF: #1792
REF: #1664

Author: hiroppy

client-src/default/index.js

@@ -198,7 +198,6 @@ const onSocketMsg = {
 
 let hostname = urlParts.hostname;
 let protocol = urlParts.protocol;
-let port = urlParts.port;
 
 // check ipv4 and ipv6 `all hostname`
 if (hostname === '0.0.0.0' || hostname === '::') {
@@ -208,7 +207,6 @@ if (hostname === '0.0.0.0' || hostname === '::') {
   // eslint-disable-next-line no-bitwise
   if (self.location.hostname && !!~self.location.protocol.indexOf('http')) {
     hostname = self.location.hostname;
-    port = self.location.port;
   }
 }
 
@@ -228,8 +226,8 @@ const socketUrl = url.format({
   hostname,
   port:
     urlParts.path == null || urlParts.path === '/'
-      ? port
-      : querystring.parse(urlParts.path).sockPort || port,
+      ? urlParts.port
+      : querystring.parse(urlParts.path).sockPort || urlParts.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.

test/Client.test.js

@@ -7,20 +7,20 @@ const helper = require('./helper');
 const config = require('./fixtures/client-config/webpack.config');
 const runBrowser = require('./helpers/run-browser');
 
-function startProxy(port) {
-  const proxy = express();
-  proxy.use(
-    '/',
-    httpProxy({
-      target: 'http://localhost:9001',
-      ws: true,
-      changeOrigin: true,
-    })
-  );
-  return proxy.listen(port);
-}
-
 describe('Client code', () => {
+  function startProxy(port) {
+    const proxy = express();
+    proxy.use(
+      '/',
+      httpProxy({
+        target: 'http://localhost:9001',
+        ws: true,
+        changeOrigin: true,
+      })
+    );
+    return proxy.listen(port);
+  }
+
   beforeAll((done) => {
     const options = {
       compress: true,
@@ -38,6 +38,7 @@ describe('Client code', () => {
 
   afterAll(helper.close);
 
+  // [HPM] Proxy created: /  ->  http://localhost:9001
   describe('behind a proxy', () => {
     let proxy;
 
@@ -47,13 +48,21 @@ describe('Client code', () => {
       proxy = startProxy(9000);
     });
 
-    afterAll(() => {
-      proxy.close();
+    afterAll((done) => {
+      proxy.close(() => {
+        done();
+      });
     });
 
     it('responds with a 200', (done) => {
-      const req = request('http://localhost:9000');
-      req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
+      {
+        const req = request('http://localhost:9000');
+        req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
+      }
+      {
+        const req = request('http://localhost:9001');
+        req.get('/sockjs-node').expect(200, 'Welcome to SockJS!\n', done);
+      }
     });
 
     it('requests websocket through the proxy with proper port number', (done) => {
@@ -62,7 +71,7 @@ describe('Client code', () => {
           .waitForRequest((requestObj) => requestObj.url().match(/sockjs-node/))
           .then((requestObj) => {
             expect(requestObj.url()).toMatch(
-              /^http:\/\/localhost:9000\/sockjs-node/
+              /^http:\/\/localhost:9001\/sockjs-node/
             );
             browser.close().then(done);
           });