Limit websocket retries. (#589)

Before, the client script would retry for a websocket connection every two seconds.
This caused massive log spam.
Now, it will retry with an exponential timeout, and with a max of 10 retries.

Author: SpaceK33z

client/index.js

@@ -1,7 +1,7 @@
 /* global __resourceQuery */
 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,
@@ -28,10 +28,8 @@ if(typeof __resourceQuery === "string" && __resourceQuery) {
 	urlParts = url.parse((scriptHost ? scriptHost : "/"), false, true);
 }
 
-var sock = null;
 var hot = false;
 var initial = true;
-var connected = false;
 var currentHash = "";
 var logLevel = "info";
 
@@ -84,40 +82,21 @@ var onSocketMsg = {
 		for(var i = 0; i < errors.length; i++)
 			log("error", stripAnsi(errors[i]));
 		if(initial) return initial = false;
+	},
+	close: function() {
+		log("error", "[WDS] Disconnected!");
 	}
 };
 
-var newConnection = function() {
-	sock = new SockJS(url.format({
-		protocol: (window.location.protocol === "https:" || urlParts.hostname === '0.0.0.0') ? window.location.protocol : urlParts.protocol,
-		auth: urlParts.auth,
-		hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : urlParts.hostname,
-		port: (urlParts.port === '0') ? window.location.port : urlParts.port,
-		pathname: urlParts.path == null || urlParts.path === '/' ? "/sockjs-node" : urlParts.path
-	}));
-
-	sock.onclose = function() {
-		if(connected)
-			log("error", "[WDS] Disconnected!");
-
-		connected = false;
-
-		// Try to reconnect.
-		sock = null;
-		setTimeout(function() {
-			newConnection();
-		}, 2000);
-	};
-
-	sock.onmessage = function(e) {
-		connected = true;
-		// 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: (window.location.protocol === "https:" || urlParts.hostname === '0.0.0.0') ? window.location.protocol : urlParts.protocol,
+	auth: urlParts.auth,
+	hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : urlParts.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) {

client/live.js

@@ -1,32 +1,11 @@
 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() {
 	$("body").html(require("./page.pug")());
 	var status = $("#status");
@@ -112,7 +91,7 @@ $(function() {
 		}
 	};
 
-	newConnection(onSocketMsg);
+	socket("/sockjs-node", onSocketMsg);
 
 	iframe.load(function() {
 		status.text("App ready.");

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;

package.json

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