Backport #579 and #589

Author: SpaceK33z

bin/webpack-dev-server.js

@@ -45,6 +45,8 @@ var optimist = require("optimist")
 
 .boolean("history-api-fallback").describe("history-api-fallback", "Fallback to /index.html for Single Page Applications.")
 
+.string("client-log-level").describe("client-log-level", "Log level in the browser (info, warning, error or none)").default("client-log-level", "info")
+
 .boolean("compress").describe("compress", "enable gzip compression")
 
 .boolean("open").describe("open", "Open default browser")
@@ -156,6 +158,9 @@ if(argv["inline"])
 if(argv["history-api-fallback"])
 	options.historyApiFallback = true;
 
+if(argv["client-log-level"])
+	options.clientLogLevel = argv["client-log-level"];
+
 if(argv["compress"])
 	options.compress = true;
 

client/index.js

@@ -1,6 +1,6 @@
 var url = require('url');
-var SockJS = require("sockjs-client");
 var stripAnsi = require('strip-ansi');
+var socket = require('./socket');
 
 function getCurrentScriptSource() {
 	// `document.currentScript` is the most accurate way to find the current script,
@@ -16,10 +16,9 @@ function getCurrentScriptSource() {
 	throw new Error("[WDS] Failed to get current script source");
 }
 
-// If this bundle is inlined, use the resource query to get the correct url.
-// Else, get the url from the <script> this file was called with.
 var urlParts;
-if (typeof __resourceQuery === "string" && __resourceQuery) {
+if(typeof __resourceQuery === "string" && __resourceQuery) {
+	// If this bundle is inlined, use the resource query to get the correct url.
 	urlParts = url.parse(__resourceQuery.substr(1));
 } else {
 	// Else, get the url from the <script> this file was called with.
@@ -28,54 +27,70 @@ if (typeof __resourceQuery === "string" && __resourceQuery) {
 	urlParts = url.parse((scriptHost ? scriptHost : "/"), false, true);
 }
 
-var sock = null;
 var hot = false;
 var initial = true;
 var currentHash = "";
+var logLevel = "info";
+
+function log(level, msg) {
+	if(logLevel === "info" && level === "info")
+		return console.log(msg);
+	if(["info", "warning"].indexOf(logLevel) >= 0 && level === "warning")
+		return console.warn(msg);
+	if(["info", "warning", "error"].indexOf(logLevel) >= 0 && level === "error")
+		return console.error(msg);
+}
 
 var onSocketMsg = {
 	hot: function() {
 		hot = true;
-		console.log("[WDS] Hot Module Replacement enabled.");
+		log("info", "[WDS] Hot Module Replacement enabled.");
 	},
 	invalid: function() {
-		console.log("[WDS] App updated. Recompiling...");
+		log("info", "[WDS] App updated. Recompiling...");
 	},
 	hash: function(hash) {
 		currentHash = hash;
 	},
 	"still-ok": function() {
-		console.log("[WDS] Nothing changed.")
+		log("info", "[WDS] Nothing changed.")
+	},
+	"log-level": function(level) {
+		logLevel = level;
 	},
 	ok: function() {
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	warnings: function(warnings) {
-		console.log("[WDS] Warnings while compiling.");
+		log("info", "[WDS] Warnings while compiling.");
 		for(var i = 0; i < warnings.length; i++)
 			console.warn(stripAnsi(warnings[i]));
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	errors: function(errors) {
-		console.log("[WDS] Errors while compiling.");
+		log("info", "[WDS] Errors while compiling.");
 		for(var i = 0; i < errors.length; i++)
 			console.error(stripAnsi(errors[i]));
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	"proxy-error": function(errors) {
-		console.log("[WDS] Proxy error.");
+		log("info", "[WDS] Proxy error.");
 		for(var i = 0; i < errors.length; i++)
-			console.error(stripAnsi(errors[i]));
+			log("error", stripAnsi(errors[i]));
 		if(initial) return initial = false;
+	},
+	close: function() {
+		log("error", "[WDS] Disconnected!");
 	}
 };
 
-
 var hostname = urlParts.hostname;
-if(!urlParts.hostname || urlParts.hostname === '0.0.0.0') {
+var protocol = urlParts.protocol;
+
+if(urlParts.hostname === '0.0.0.0') {
 	// why do we need this check?
 	// hostname n/a for file protocol (example, when using electron, ionic)
 	// see: https://github.com/webpack/webpack-dev-server/pull/384
@@ -84,44 +99,30 @@ if(!urlParts.hostname || urlParts.hostname === '0.0.0.0') {
 	}
 }
 
-var port = (!urlParts.port || urlParts.port === '0') ? window.location.port : urlParts.port;
-
-var formattedUrl = url.format({
-		protocol: (window.location.protocol === "https:" || urlParts.hostname === '0.0.0.0') ? window.location.protocol : urlParts.protocol,
-		auth: urlParts.auth,
-		hostname: hostname,
-		port: port,
-		pathname: urlParts.path == null || urlParts.path === '/' ? "/sockjs-node" : urlParts.path
-	});
-
-var newConnection = function() {
-	sock = new SockJS(formattedUrl);
-
-	sock.onclose = function() {
-		console.error("[WDS] Disconnected!");
-
-		// Try to reconnect.
-		sock = null;
-		setTimeout(function() {
-			newConnection();
-		}, 2000);
-	};
+// `hostname` can be empty when the script path is relative. In that case, specifying
+// a protocol would result in an invalid URL.
+// When https is used in the app, secure websockets are always necessary
+// because the browser doesn't accept non-secure websockets.
+if(hostname && (window.location.protocol === "https:" || urlParts.hostname === '0.0.0.0')) {
+	protocol = window.location.protocol;
+}
 
-	sock.onmessage = function(e) {
-		// This assumes that all data sent via the websocket is JSON.
-		var msg = JSON.parse(e.data);
-		onSocketMsg[msg.type](msg.data);
-	};
-};
+var socketUrl = url.format({
+	protocol: protocol,
+	auth: urlParts.auth,
+	hostname: hostname,
+	port: (urlParts.port === '0') ? window.location.port : urlParts.port,
+	pathname: urlParts.path == null || urlParts.path === '/' ? "/sockjs-node" : urlParts.path
+});
 
-newConnection();
+socket(socketUrl, onSocketMsg);
 
 function reloadApp() {
 	if(hot) {
-		console.log("[WDS] App hot update...");
+		log("info", "[WDS] App hot update...");
 		window.postMessage("webpackHotUpdate" + currentHash, "*");
 	} else {
-		console.log("[WDS] App updated. Reloading...");
+		log("info", "[WDS] App updated. Reloading...");
 		window.location.reload();
 	}
 }

client/live.js

@@ -1,34 +1,13 @@
 var $ = require("jquery");
-var SockJS = require("sockjs-client");
 var stripAnsi = require('strip-ansi');
+var socket = require('./socket');
 require("./style.css");
 
-var sock = null;
 var hot = false;
 var currentHash = "";
 
-var newConnection = function(handlers) {
-	sock = new SockJS('/sockjs-node');
-
-	sock.onclose = function() {
-		handlers.close();
-
-		// Try to reconnect.
-		sock = null;
-		setTimeout(function() {
-			newConnection(handlers);
-		}, 2000);
-	};
-
-	sock.onmessage = function(e) {
-		// This assumes that all data sent via the websocket is JSON.
-		var msg = JSON.parse(e.data);
-		handlers[msg.type](msg.data);
-	};
-};
-
 $(function() {
-	var body = $("body").html(require("./page.jade")());
+	$("body").html(require("./page.jade")());
 	var status = $("#status");
 	var okness = $("#okness");
 	var $errors = $("#errors");
@@ -38,8 +17,11 @@ $(function() {
 	var contentPage = window.location.pathname.substr("/webpack-dev-server".length) + window.location.search;
 
 	status.text("Connecting to sockjs server...");
-	$errors.hide(); iframe.hide();
-	header.css({borderColor: "#96b5b4"});
+	$errors.hide();
+	iframe.hide();
+	header.css({
+		borderColor: "#96b5b4"
+	});
 
 	var onSocketMsg = {
 		hot: function() {
@@ -49,24 +31,30 @@ $(function() {
 		invalid: function() {
 			okness.text("");
 			status.text("App updated. Recompiling...");
-			header.css({borderColor: "#96b5b4"});
-			$errors.hide(); if(!hot) iframe.hide();
+			header.css({
+				borderColor: "#96b5b4"
+			});
+			$errors.hide();
+			if(!hot) iframe.hide();
 		},
 		hash: function(hash) {
 			currentHash = hash;
 		},
 		"still-ok": function() {
 			okness.text("");
 			status.text("App ready.");
-			header.css({borderColor: ""});
-			$errors.hide(); if(!hot) iframe.show();
+			header.css({
+				borderColor: ""
+			});
+			$errors.hide();
+			if(!hot) iframe.show();
 		},
 		ok: function() {
 			okness.text("");
 			$errors.hide();
 			reloadApp();
 		},
-		warnings: function(warnings) {
+		warnings: function() {
 			okness.text("Warnings while compiling.");
 			$errors.hide();
 			reloadApp();
@@ -75,30 +63,41 @@ $(function() {
 			status.text("App updated with errors. No reload!");
 			okness.text("Errors while compiling.");
 			$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
-			header.css({borderColor: "#ebcb8b"});
-			$errors.show(); iframe.hide();
+			header.css({
+				borderColor: "#ebcb8b"
+			});
+			$errors.show();
+			iframe.hide();
 		},
 		"proxy-error": function(errors) {
 			status.text("Could not proxy to content base target!");
 			okness.text("Proxy error.");
 			$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
-			header.css({borderColor: "#ebcb8b"});
-			$errors.show(); iframe.hide();
+			header.css({
+				borderColor: "#ebcb8b"
+			});
+			$errors.show();
+			iframe.hide();
 		},
 		close: function() {
 			status.text("");
 			okness.text("Disconnected.");
 			$errors.text("\n\n\n  Lost connection to webpack-dev-server.\n  Please restart the server to reestablish connection...\n\n\n\n");
-			header.css({borderColor: "#ebcb8b"});
-			$errors.show(); iframe.hide();
+			header.css({
+				borderColor: "#ebcb8b"
+			});
+			$errors.show();
+			iframe.hide();
 		}
 	};
 
-	newConnection(onSocketMsg);
+	socket("/sockjs-node", onSocketMsg);
 
 	iframe.load(function() {
 		status.text("App ready.");
-		header.css({borderColor: ""});
+		header.css({
+			borderColor: ""
+		});
 		iframe.show();
 	});
 
@@ -113,7 +112,9 @@ $(function() {
 			iframe.show();
 		} else {
 			status.text("App updated. Reloading app...");
-			header.css({borderColor: "#96b5b4"});
+			header.css({
+				borderColor: "#96b5b4"
+			});
 			try {
 				var old = iframe[0].contentWindow.location + "";
 				if(old.indexOf("about") == 0) old = null;

client/socket.js

@@ -0,0 +1,41 @@
+var SockJS = require("sockjs-client");
+
+var retries = 0;
+var sock = null;
+
+function socket(url, handlers) {
+	sock = new SockJS(url);
+
+	sock.onopen = function() {
+		retries = 0;
+	}
+
+	sock.onclose = function() {
+		if(retries === 0)
+			handlers.close();
+
+		// Try to reconnect.
+		sock = null;
+
+		// After 10 retries stop trying, to prevent logspam.
+		if(retries <= 10) {
+			// Exponentially increase timeout to reconnect.
+			// Respectfully copied from the package `got`.
+			var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
+			retries += 1;
+
+			setTimeout(function() {
+				socket(url, handlers);
+			}, retryInMs);
+		}
+	};
+
+	sock.onmessage = function(e) {
+		// This assumes that all data sent via the websocket is JSON.
+		var msg = JSON.parse(e.data);
+		if(handlers[msg.type])
+			handlers[msg.type](msg.data);
+	};
+}
+
+module.exports = socket;

lib/Server.js

@@ -21,6 +21,7 @@ function Server(compiler, options) {
 
 	this.hot = options.hot;
 	this.headers = options.headers;
+	this.clientLogLevel = options.clientLogLevel;
 	this.sockets = [];
 
 	// Listening for events
@@ -339,6 +340,9 @@ Server.prototype.listen = function() {
 		}.bind(this));
 
 		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(), true);
 	}.bind(this));

package.json

@@ -52,7 +52,7 @@
   ],
   "scripts": {
     "prepublish": "webpack ./client/live.js client/live.bundle.js --colors --config client/webpack.config.js -p && webpack ./client/index.js client/index.bundle.js --colors --config client/webpack.config.js -p",
-    "lint": "eslint bin lib test client/{index,live,webpack.config}.js",
+    "lint": "eslint bin lib test client/{index,live,socket,webpack.config}.js",
     "beautify-lint": "beautify-lint lib/**.js bin/**.js",
     "beautify": "beautify-rewrite lib/**.js bin/**.js",
     "travis": "npm run lint && npm run beautify-lint && node lib/Server.js"