Improve reconnect robustness

mqtt_dash/static/main.js

@@ -1,7 +1,11 @@
 // Called after form input is processed
 function startConnect() {
+    if (connecting) {
+        return;
+    }
+    connecting = true;
     // Generate a random client ID
-    clientId = "clientId-" + parseInt(Math.random() * 1000000);
+    clientId = navigator.userAgent + "-" + parseInt(Math.random() * 1000000);
     document.getElementById("wrapper").classList.add("wrapper-error");
     document.getElementById("wrapper").classList.remove("wrapper-ok");
 
@@ -18,6 +22,7 @@ function startConnect() {
     // Connect the client, if successful, call onConnect function
     client.connect({
         onSuccess: onConnect,
+        timeout: 2
     });
 
     connectionCheckTimeout = setTimeout(checkConnection, 2000);
@@ -25,12 +30,13 @@ function startConnect() {
 
 function log(msg) {
     console.log(msg);
-    //document.getElementById("messages").innerHTML += '<span>' + msg + '</span><br/>';
+    document.getElementById("messages").innerHTML += '<span>' + msg + '</span><br/>';
 }
 
 function checkConnection(){
     clearTimeout(connectionCheckTimeout);
     if (!client.isConnected()) {
+        connecting = false;
         //log("Error connecting to broker");
         startConnect();
     }
@@ -38,6 +44,7 @@ function checkConnection(){
 
 // Called when the client connects
 function onConnect() {
+    connecting = false;
     clearTimeout(connectionCheckTimeout);
     document.getElementById("wrapper").classList.remove("wrapper-error");
     document.getElementById("wrapper").classList.add("wrapper-ok");
@@ -130,8 +137,8 @@ function updateContents(id, value) {
 
 function init(brokerUri) {
     window.brokerUri = brokerUri
+    connecting = false;
     startConnect();
-
     var sliders = document.getElementsByClassName("slider");
 
     for (var i = 0 ; i < sliders.length; i++) {