Reconnect to MQTT broker automatically

mqtt_dash/static/main.js

@@ -1,18 +1,15 @@
 // Called after form input is processed
-      function startConnect(brokerUri) {
+function startConnect() {
     // Generate a random client ID
-          clientId = "clientId-" + parseInt(Math.random() * 100);
+    clientId = "clientId-" + parseInt(Math.random() * 1000000);
     document.getElementById("wrapper").classList.add("wrapper-error");
     document.getElementById("wrapper").classList.remove("wrapper-ok");
 
     // Print output for the user in the messages div
-          document.getElementById("messages").innerHTML +=
-              '<span>Connecting to: ' + brokerUri+ '</span><br/>';
-          document.getElementById("messages").innerHTML +=
-              '<span>Using the following client value: ' + clientId + '</span><br/>';
+    log('Connecting to: ' + window.brokerUri + ', client ID: ' + clientId);
 
     // Initialize new Paho client connection
-          client = new Paho.MQTT.Client(brokerUri, clientId=clientId);
+    client = new Paho.MQTT.Client(window.brokerUri, clientId=clientId);
 
     // Set callback handlers
     client.onConnectionLost = onConnectionLost;
@@ -22,10 +19,26 @@
     client.connect({
         onSuccess: onConnect,
     });
+
+    connectionCheckTimeout = setTimeout(checkConnection, 1000);
+}
+
+function log(msg) {
+    console.log(msg);
+    //document.getElementById("messages").innerHTML += '<span>' + msg + '</span><br/>';
+}
+
+function checkConnection(){
+    clearTimeout(connectionCheckTimeout);
+    if (!client.isConnected()) {
+        //log("Error connecting to broker");
+        startConnect();
+    }
 }
 
 // Called when the client connects
 function onConnect() {
+    clearTimeout(connectionCheckTimeout);
     document.getElementById("wrapper").classList.remove("wrapper-error");
     document.getElementById("wrapper").classList.add("wrapper-ok");
     var subWidgets = document.getElementsByClassName("subscriber");
@@ -50,6 +63,7 @@
     if (responseObject.errorCode !== 0) {
         console.log("onConnectionLost: " + responseObject.errorMessage);
     }
+    startConnect();
 }
 
 function getByPath(obj, path) {
@@ -115,7 +129,8 @@
 }
 
 function init(brokerUri) {
-          startConnect(brokerUri);
+    window.brokerUri = brokerUri
+    startConnect();
 
     var sliders = document.getElementsByClassName("slider");
 

mqtt_dash/templates/base.html

@@ -26,8 +26,6 @@
          </div>
          <br/>
          <div id="messages"></div>
-         <input type="button" onclick="startConnect()" value="Connect">
-         <input type="button" onclick="startDisconnect()" value="Disconnect">
       </div>
       <br/>
       </div>