From 0880a75fa7f88927213724e5a7055e06147ad2d4 Mon Sep 17 00:00:00 2001
From: Kendrick Chan <kc@jankstudio.com>
Date: Tue, 15 Sep 2020 23:25:44 +0800
Subject: [PATCH] Use new mqtt library and enable reconnect #489

---
 public/assets/js/map_mqtt.js | 16 ++++++++++++++--
 templates/home.html.twig     |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/public/assets/js/map_mqtt.js b/public/assets/js/map_mqtt.js
index e3fc9900..8a38e8ff 100644
--- a/public/assets/js/map_mqtt.js
+++ b/public/assets/js/map_mqtt.js
@@ -10,20 +10,32 @@ class MapEventHandler {
         var client_id = "dash-" + user_id + "-" + d.getMonth() + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + "-" + d.getMilliseconds();
         console.log(client_id);
 
-        this.mqtt = new Paho.MQTT.Client(host, port, client_id);
+        let protocol = 'ws';
+        if (this.ssl)
+            protocol = 'wss';
+
+        this.mqtt = new Paho.Client(protocol + '://' + host + ':' + port + '/mqtt', client_id);
         var options = {
             useSSL: this.ssl,
-            timeout: 3,
+            timeout: 10,
+            keepAliveInterval: 10,
             invocationContext: this,
             onSuccess: this.onConnect.bind(this),
+            reconnect: true
         };
 
         this.mqtt.onMessageArrived = this.onMessage.bind(this);
+        this.mqtt.onConnectionLost = this.onConnectionLost;
 
         console.log('connecting to mqtt server...');
         this.mqtt.connect(options);
     }
 
+    onConnectionLost(err) {
+        console.log('mqtt connection lost');
+        console.log(err);
+    }
+
     onConnect(icontext) {
         console.log('mqtt connected!');
         var my = icontext.invocationContext;
diff --git a/templates/home.html.twig b/templates/home.html.twig
index 4da6bd72..50a013c5 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -12,7 +12,7 @@
 
 
 {% block scripts %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js" type="text/javascript"></script>
 <script src="{{ asset('assets/js/dashboard_map.js') }}"></script>
 <script src="{{ asset('assets/js/map_mqtt.js') }}"></script>
 {% if dashboard_enable == 'true' %}