Reconnect to MQTT broker automatically

mqtt_dash/static/main.js

@@ -1,18 +1,15 @@
-      // Called after form input is processed
-      function startConnect(brokerUri) {
+// Called after form input is processed
+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,
     });
-      }
 
-      // Called when the client connects
-      function 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");
@@ -41,25 +54,26 @@
         client.subscribe(topic);
     }
     // Subscribe to the requested topic
-      }
+}
 
-      // Called when the client loses its connection
-      function onConnectionLost(responseObject) {
+// Called when the client loses its connection
+function onConnectionLost(responseObject) {
     document.getElementById("wrapper").classList.remove("wrapper-ok");
     document.getElementById("wrapper").classList.add("wrapper-error");
     if (responseObject.errorCode !== 0) {
         console.log("onConnectionLost: " + responseObject.errorMessage);
     }
-      }
+    startConnect();
+}
 
-      function getByPath(obj, path) {
+function getByPath(obj, path) {
     var current=obj;
     path.split('.').forEach(function(p){ current = current[p]; });
     return current;
-      }
+}
 
-      // Called when a message arrives
-      function onMessageArrived(message) {
+// Called when a message arrives
+function onMessageArrived(message) {
     var views = document.getElementsByClassName(message.destinationName + "-value");
     for (var i = 0 ; i < views.length; i++) {
         var view = views.item(i);
@@ -88,34 +102,35 @@
         widgets.item(i).classList.remove("widget-unset");
     }
 
-      }
+}
 
-      // Called when the disconnection button is pressed
-      function startDisconnect() {
+// Called when the disconnection button is pressed
+function startDisconnect() {
     client.disconnect();
     document.getElementById("messages").innerHTML += '<span>Disconnected</span><br/>';
     updateScroll(); // Scroll to bottom of window
-      }
+}
 
-      // Updates #messages div to auto-scroll
-      function updateScroll() {
+// Updates #messages div to auto-scroll
+function updateScroll() {
     var element = document.getElementById("messages");
     element.scrollTop = element.scrollHeight;
-      }
+}
 
-      function publish(topic, value) {
+function publish(topic, value) {
     var message = new Paho.MQTT.Message(value);
     message.destinationName = topic;
     client.send(message);
-      }
+}
 
-      function updateContents(id, value) {
+function updateContents(id, value) {
     elem = document.getElementById(id);
     elem.innerHTML = value;
-      }
+}
 
-      function init(brokerUri) {
-          startConnect(brokerUri);
+function init(brokerUri) {
+    window.brokerUri = brokerUri
+    startConnect();
 
     var sliders = document.getElementsByClassName("slider");
 
@@ -145,4 +160,4 @@
     }
 
 
-      }
+}

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>