Fix Broken Socket on Client for Custom/Random Port Numbers (#1060)

* moving polyfills to the top, sockjs should init only after server has completed listen

* fixes #1059: custom/random ports break sockjs url in the client

Author: shellscape

bin/webpack-dev-server.js

@@ -3,6 +3,7 @@
 'use strict';
 
 /* eslint global-require: off, import/order: off, no-console: off */
+require('../lib/polyfills');
 
 const fs = require('fs');
 const net = require('net');

client/index.js

@@ -33,6 +33,10 @@ if (typeof __resourceQuery === 'string' && __resourceQuery) {
   urlParts = url.parse((scriptHost || '/'), false, true);
 }
 
+if (!urlParts.port || urlParts.port === '0') {
+  urlParts.port = self.location.port;
+}
+
 let hot = false;
 let initial = true;
 let currentHash = '';
@@ -176,7 +180,7 @@ const socketUrl = url.format({
   protocol,
   auth: urlParts.auth,
   hostname,
-  port: (urlParts.port === '0') ? self.location.port : urlParts.port,
+  port: urlParts.port,
   pathname: urlParts.path == null || urlParts.path === '/' ? '/sockjs-node' : urlParts.path
 });
 

lib/Server.js

@@ -1,6 +1,7 @@
 'use strict';
 
 /* eslint no-console: off, func-names: off */
+require('./polyfills');
 
 const fs = require('fs');
 const http = require('http');
@@ -22,8 +23,6 @@ const webpackDevMiddleware = require('webpack-dev-middleware');
 const OptionsValidationError = require('./OptionsValidationError');
 const optionsSchema = require('./optionsSchema.json');
 
-require('./polyfills');
-
 const clientStats = { errorDetails: false };
 
 function Server(compiler, options) {
@@ -483,49 +482,58 @@ Server.prototype.checkHost = function (headers) {
 };
 
 // delegate listen call and init sockjs
-Server.prototype.listen = function (port, hostname) {
+Server.prototype.listen = function (port, hostname, fn) {
   this.listenHostname = hostname;
   // eslint-disable-next-line
-  const returnValue = this.listeningApp.listen.apply(this.listeningApp, arguments);
-  const sockServer = sockjs.createServer({
-    // Use provided up-to-date sockjs-client
-    sockjs_url: '/__webpack_dev_server__/sockjs.bundle.js',
-    // Limit useless logs
-    log(severity, line) {
-      if (severity === 'error') {
-        console.log(line);
-      }
-    }
-  });
-  sockServer.on('connection', (conn) => {
-    if (!conn) return;
-    if (!this.checkHost(conn.headers)) {
-      this.sockWrite([conn], 'error', 'Invalid Host header');
-      conn.close();
-      return;
-    }
-    this.sockets.push(conn);
 
-    conn.on('close', () => {
-      const connIndex = this.sockets.indexOf(conn);
-      if (connIndex >= 0) {
-        this.sockets.splice(connIndex, 1);
+  const returnValue = this.listeningApp.listen(port, hostname, (err) => {
+    const sockServer = sockjs.createServer({
+      // Use provided up-to-date sockjs-client
+      sockjs_url: '/__webpack_dev_server__/sockjs.bundle.js',
+      // Limit useless logs
+      log(severity, line) {
+        if (severity === 'error') {
+          console.log(line);
+        }
       }
     });
 
-    if (this.clientLogLevel) { this.sockWrite([conn], 'log-level', this.clientLogLevel); }
+    sockServer.on('connection', (conn) => {
+      console.log('connection.remotePort', conn.remotePort);
+      if (!conn) return;
+      if (!this.checkHost(conn.headers)) {
+        this.sockWrite([conn], 'error', 'Invalid Host header');
+        conn.close();
+        return;
+      }
+      this.sockets.push(conn);
 
-    if (this.clientOverlay) { this.sockWrite([conn], 'overlay', this.clientOverlay); }
+      conn.on('close', () => {
+        const connIndex = this.sockets.indexOf(conn);
+        if (connIndex >= 0) {
+          this.sockets.splice(connIndex, 1);
+        }
+      });
 
-    if (this.hot) this.sockWrite([conn], 'hot');
+      if (this.clientLogLevel) { this.sockWrite([conn], 'log-level', this.clientLogLevel); }
 
-    if (!this._stats) return;
-    this._sendStats([conn], this._stats.toJson(clientStats), true);
-  });
+      if (this.clientOverlay) { this.sockWrite([conn], 'overlay', this.clientOverlay); }
+
+      if (this.hot) this.sockWrite([conn], 'hot');
+
+      if (!this._stats) return;
+      this._sendStats([conn], this._stats.toJson(clientStats), true);
+    });
 
-  sockServer.installHandlers(this.listeningApp, {
-    prefix: '/sockjs-node'
+    sockServer.installHandlers(this.listeningApp, {
+      prefix: '/sockjs-node'
+    });
+
+    if (fn) {
+      fn.call(this.listeningApp, err);
+    }
   });
+
   return returnValue;
 };