Improved reconnect logic which failed in various networking szenarios.

static/js/controllers/mediastreamcontroller.js

@@ -44,6 +44,7 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
 			mediaStream.webrtc.doHangup("unload");
 			if (mediaStream.api.connector) {
 				mediaStream.api.connector.disabled = true;
+				mediaStream.api.connector.close();
 			}
 		});
 
@@ -523,15 +524,19 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
 					}
 					console.log("Stored data at the resurrection shrine", resurrect);
 				}
-				reconnecting = false;
-				_.delay(function() {
-					if (autoreconnect && !reconnecting) {
+				if (!reconnecting) {
 					reconnecting = true;
+					_.delay(function() {
+						if (autoreconnect) {
 							console.log("Requesting to reconnect ...");
 							mediaStream.reconnect();
 						}
+						reconnecting = false;
 					}, 500);
 					$scope.setStatus("reconnecting");
+				} else {
+					console.warn("Already reconnecting ...");
+				}
 			} else {
 				$scope.setStatus("closed");
 			}
@@ -541,7 +546,6 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
 			// TODO(lcooper): Is it really needful to do this stuff?
 			$timeout.cancel(ttlTimeout);
 			connected = true;
-			reconnecting = false;
 			$scope.updateStatus(true);
 		});
 
@@ -551,13 +555,11 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
 			switch (event.type) {
 				case "open":
 					connected = true;
-					reconnecting = false;
 					$scope.updateStatus(true);
 					$scope.setStatus("waiting");
 					break;
 				case "error":
-					if (reconnecting || connected) {
-						reconnecting = false;
+					if (connected) {
 						reconnect();
 					} else {
 						$scope.setStatus(event.type);

static/js/mediastream/connector.js

@@ -44,6 +44,11 @@ define(['jquery', 'underscore'], function($, _) {
 			return;
 		}
 
+		if (this.connecting !== null) {
+			console.warn("Refusing to connect while already connecting");
+			return;
+		}
+
 		this.error = false;
 		this.e.triggerHandler("connecting", [url]);
 		this.url = url;
@@ -51,11 +56,31 @@ define(['jquery', 'underscore'], function($, _) {
 			url += ("?t=" + this.token);
 			//console.log("Reusing existing token", this.token);
 		}
+
+		var that = this;
+
+		// Create connection.
 		var conn = this.conn = new WebSocket(url);
-		conn.onopen = _.bind(this.onopen, this);
-		conn.onerror = _.bind(this.onerror, this);
-		conn.onclose = _.bind(this.onclose, this);
-		conn.onmessage = _.bind(this.onmessage, this)
+		conn.onopen = function(event) {
+			if (event.target === that.conn) {
+				that.onopen(event);
+			}
+		};
+		conn.onerror = function(event) {
+			if (event.target === that.conn) {
+				that.onerror(event);
+			}
+		};
+		conn.onclose = function(event) {
+			if (event.target === that.conn) {
+				that.onclose(event);
+			}
+		};
+		conn.onmessage = function(event) {
+			if (event.target === that.conn) {
+				that.onmessage(event);
+			}
+		};
 
 		this.connecting = window.setTimeout(_.bind(function() {
 			console.warn("Connection timeout out after", this.connecting_timeout);
@@ -97,15 +122,15 @@ define(['jquery', 'underscore'], function($, _) {
 
 	Connector.prototype.close = function() {
 
+		window.clearTimeout(this.connecting);
+		this.connecting = null;
 		this.connected = false;
+
 		if (this.conn) {
 			var conn = this.conn;
 			this.conn = null;
-			if (!this.error) {
 			conn.close();
 		}
-			conn.onopen = conn.onerror = conn.onclose = conn.onmessage = null;
-		}
 
 	};
 
@@ -119,7 +144,9 @@ define(['jquery', 'underscore'], function($, _) {
 	};
 
 	Connector.prototype.onopen = function(event) {
+
 		window.clearTimeout(this.connecting);
+		this.connecting = null;
 		this.connecting_timeout = timeout;
 
 		// Connection successfully established.
@@ -133,11 +160,13 @@ define(['jquery', 'underscore'], function($, _) {
 			data = this.queue.shift();
 			this.send(data);
 		}
+
 	};
 
 	Connector.prototype.onerror = function(event) {
 
 		window.clearTimeout(this.connecting);
+		this.connecting = null;
 		this.connecting_timeout = timeout;
 
 		//console.log("onerror", event);
@@ -151,6 +180,7 @@ define(['jquery', 'underscore'], function($, _) {
 	Connector.prototype.onclose = function(event) {
 
 		window.clearTimeout(this.connecting);
+		this.connecting = null;
 		this.connecting_timeout = timeout;
 
 		//console.log("onclose", event);
@@ -159,6 +189,7 @@ define(['jquery', 'underscore'], function($, _) {
 		if (!this.error) {
 			this.e.triggerHandler("close", [null, event]);
 		}
+
 	};
 
 	Connector.prototype.onmessage = function(event) {