Add MQTT subscribe functionality in main dashboard #299

templates/home.html.twig

@@ -10,13 +10,10 @@
     <!-- END: Subheader -->
 {% endblock %}
 
-{% block scripts %}
-{{ include('map/' ~ map_js_file) }}
-<script>
 
-{% if 'OpenStreet' in map_js_file %}
-    initMap();
-{% endif %} 
+{% block scripts %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
+<script>
 
 function initMap() {
     var default_lat = {% trans %}default_lat{% endtrans %};
@@ -25,6 +22,38 @@ function initMap() {
     var map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13);
 }
 
+{{ include('map/' ~ map_js_file) }}
+
+// TODO: put this in .env
+var mqtt;
+var timeout = 2000;
+var host = '192.168.56.4';
+var port = 8083;
+
+function onConnect() {
+    console.log('connected!');
+
+    mqtt.subscribe('test.channel');
+}
+
+function onMessage(msg) {
+    console.log(msg);
+}
+
+function mqttConnect() {
+    mqtt = new Paho.MQTT.Client(host, port, "clientjs");
+    var options = {
+        timeout: 3,
+        onSuccess: onConnect,
+    };
+
+    mqtt.onMessageArrived = onMessage;
+
+    console.log('connecting to mqtt server...');
+    mqtt.connect(options);
+}
+
+mqttConnect();
+
 </script>
 {% endblock %}
-

templates/map/initOpenStreetMap.js

@@ -120,4 +120,6 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
     return map;
 }
 
+initMap();
+
 </script>