From 259f36ec0561927735e479388fe89020d5a37c44 Mon Sep 17 00:00:00 2001
From: Jan-Piet Mens <jpmens@gmail.com>
Date: Thu, 3 Jul 2014 19:14:43 +0200
Subject: [PATCH] cleaned up

---
 config.js  | 15 +++++-----
 index.html | 82 +++++++++++++++++++++++++++++-------------------------
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/config.js b/config.js
index cc5b33f..b3d6771 100644
--- a/config.js
+++ b/config.js
@@ -1,8 +1,9 @@
-websocketserver = '127.0.0.1';
-websocketport = 9001;
-topic = '#';
+host = '127.0.0.1';	// hostname or IP address
+port = 9001;
+topic = '#';		// topic to subscribe to
 useTLS = false;
-// username = null;
-// password = null;
-username = "jjolie";
-password = "aa";
+username = null;
+password = null;
+// username = "jjolie";
+// password = "aa";
+cleansession = true;
diff --git a/index.html b/index.html
index 923b912..cf970cd 100644
--- a/index.html
+++ b/index.html
@@ -9,52 +9,61 @@
     <script src="config.js" type="text/javascript"></script>
 
     <script type="text/javascript">
-    var client = new Messaging.Client(
-                        websocketserver,
-                        websocketport,
+    var mqtt;
+    var reconnectTimeout = 2000;
+
+    function MQTTconnect() {
+        mqtt = new Messaging.Client(
+                        host,
+                        port,
                         "web_" + parseInt(Math.random() * 100,
                         10));
+        var options = {
+            timeout: 3,
+            useSSL: useTLS,
+            cleanSession: cleansession,
+            onSuccess: onConnect,
+            onFailure: function (message) {
+                $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
+                setTimeout(MQTTconnect, reconnectTimeout);
+            }
+        };
 
-    client.onConnectionLost = function (responseObject) {
-        $('#status').val("connection lost: " + responseObject.errorMessage);
+        mqtt.onConnectionLost = onConnectionLost;
+        mqtt.onMessageArrived = onMessageArrived;
 
-    };
+        if (username != null) {
+            options.userName = username;
+            options.password = password;
+        }
+        console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
+        mqtt.connect(options);
+    }
 
-    client.onMessageArrived = function (message) {
-        var topic = message.destinationName;
-        var payload = message.payloadString;
+    function onConnect() {
+        $('#status').val('Connected to ' + host + ':' + port);
+        // Connection succeeded; subscribe to our topic
+        mqtt.subscribe(topic, {qos: 0});
+        $('#topic').val(topic);
+    }
+
+    function onConnectionLost(response) {
+        setTimeout(MQTTconnect, reconnectTimeout);
+        $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
 
-        $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
     };
 
-    var options = {
-        timeout: 3,
-        useSSL: useTLS,
-        onSuccess: function () {
-            $('#status').val('Connected to ' + websocketserver + ':' + websocketport);
-            // Connection succeeded; subscribe to our topic
-            client.subscribe(topic, {qos: 0});
-            $('#topic').val(topic);
+    function onMessageArrived(message) {
 
-        },
-        onFailure: function (message) {
-            $('#status').val("Connection failed: " + message.errorMessage);
+        var topic = message.destinationName;
+        var payload = message.payloadString;
 
-        }
+        $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
     };
 
-    function init() {
-        /* Connect to MQTT broker */
-        if (username != null) {
-            options.userName = username;
-            options.password = password;
-        }
-        console.log("TLS = " + useTLS + " username=" + username + " password=" + password);
-        client.connect(options);
-    }
 
     $(document).ready(function() {
-        init();
+        MQTTconnect();
     });
 
     </script>
@@ -62,13 +71,10 @@
   <body>
     <h1>Mosquitto Websockets</h1>
     <div>
-        Subscribed to <input type='text' id='topic' disabled /> Status: <input type='text' id='status' size="80" disabled />
-        <h3>Messages</h3>
+        <div>Subscribed to <input type='text' id='topic' disabled />
+        Status: <input type='text' id='status' size="80" disabled /></div>
 
-        <ul id='ws' style="font-family: 'Courier New', Courier, monospace;">
-        </ul>
+        <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
     </div>
-
-      </div>
   </body>
 </html>