Use mqtt client to simulate pub/sub

UI.Web.Dashboard/package.json

@@ -23,7 +23,9 @@
     "hasher": "^1.2.0",
     "jquery": "^3.2.1",
     "knockout": "^3.4.1",
+    "knockout-postbox": "^0.6.0",
     "lodash": "^4.17.4",
+    "mqtt": "^2.9.0",
     "requirejs": "^2.3.2",
     "requirejs-text": "^2.0.12"
   }

UI.Web.Dashboard/src/app/components.config.js

@@ -3,7 +3,7 @@
     pages: [
         // [Scaffolded pages will be inserted here. To retain this feature, don't remove this comment.]
         { name: 'home', path: 'pages/home/home' },
-        { name: 'about', path: 'pages/about/about' }
+        { name: 'test', path: 'pages/test/test' }
     ],
     // Components - knockout components intended as parts of pages, a.k.a. components
     components: [

UI.Web.Dashboard/src/app/config.js

+define({
+    current: {
+        mqtt_server_url: "mqtt://test.mosquitto.org:8080",
+        mqtt_topic: "e60ffc7e-ce53-4365-bccf-d167df60cd66"
+    }
+});
\ No newline at end of file

UI.Web.Dashboard/src/app/require.config.js

@@ -6,9 +6,11 @@ var require = {
         "crossroads":           "../node_modules/crossroads/dist/crossroads.min",
         "hasher":               "../node_modules/hasher/dist/js/hasher.min",
         "knockout":             "../node_modules/knockout/build/output/knockout-latest",
+        "knockout-postbox":     "../node_modules/knockout-postbox/build/knockout-postbox.min",
         "signals":              "../node_modules/signals/dist/signals.min",
         "text":                 "../node_modules/requirejs-text/text",
         "lodash":               "../node_modules/lodash/lodash",
-        "jquery":               "../node_modules/jquery/dist/jquery.min"
+        "jquery":               "../node_modules/jquery/dist/jquery.min",
+        "mqtt":                 "../node_modules/mqtt/dist/mqtt.min"
     }
 };

UI.Web.Dashboard/src/app/router.js

@@ -12,7 +12,7 @@ define(["knockout", "crossroads", "hasher"], function(ko, crossroads, hasher) {
     return new Router({
         routes: [
             { url: '',          params: { page: 'home' } },
-            { url: 'about',     params: { page: 'about' } }
+            { url: 'test',     params: { page: 'test' } }
         ]
     });
 

UI.Web.Dashboard/src/components/nav-bar/nav-bar.html

@@ -21,8 +21,8 @@
           <a href="#">Home</a>
         </li>
 
-        <li data-bind="css: { active: route().page === 'about' }">
-          <a href="#about">About</a>
+        <li data-bind="css: { active: route().page === 'test' }">
+          <a href="#test">Test</a>
         </li>
       </ul>
 

UI.Web.Dashboard/src/pages/about/about.html

-<h2>About</h2>
-
-<p>This component has no viewmodel. It's just an HTML template.</p>

UI.Web.Dashboard/src/pages/about/about.js

-define(['text!./about.html'], function (aboutTemplate) {
-    // This module could have been a template-only component.
-    // For examples, see earlier commits or the original
-    // generator-ko project.
-    return { viewModel: function (){}, template: aboutTemplate };
-});
\ No newline at end of file

UI.Web.Dashboard/src/pages/home/home.js

@@ -3,12 +3,14 @@ define([
   "text!./home.html",
   "components/sensor/sensorViewModel",
   "queryHandlers/sensorReadingsQueryHandler",
+  "services/mqttListener",
   "lodash"
 ], function (
   ko,
   homeTemplate, 
   SensorViewModel,
   SensorReadingsQueryHandler,
+  MqttListener,
   _
 ) {
 
@@ -18,6 +20,9 @@ define([
     this.sensors = ko.observableArray();
     this.isRefreshing = ko.observable(false);
     this.queryHandler = new SensorReadingsQueryHandler();
+
+    var mqttListener = new MqttListener();
+    mqttListener.init();
   }
 
   HomeViewModel.prototype.addSensor = function (key, sensorData) {

UI.Web.Dashboard/src/pages/test/test.html

+<h2>Test publish page</h2>
+
+<p>Input of this text box will be published over MQTT</p>
+
+<input data-bind="textInput : inputText" type="text"/>
+<button data-bind="click: publish" type="button">Publish</button>

UI.Web.Dashboard/src/pages/test/test.js

+define(['text!./test.html',
+    "knockout",
+    "services/mqttPublisher"
+], function (testTemplate, ko, MqttPublisher) {
+
+    function TestViewModel() {
+        this.inputText = ko.observable();
+        this._publisher = new MqttPublisher();
+    }
+
+    TestViewModel.prototype.publish = function () {
+        this._publisher.publish(this.inputText());
+    };
+
+    return {
+        viewModel: TestViewModel,
+        template: testTemplate
+    };
+});
\ No newline at end of file

UI.Web.Dashboard/src/services/mqttListener.js

+define(["app/config", "mqtt", "lodash", "knockout", "knockout-postbox"], function(config, mqtt, _, ko) {
+
+  function MqttListener() {
+  }
+
+  MqttListener.prototype.init = function(){
+    this.client  = mqtt.connect(config.current.mqtt_server_url);
+
+    console.debug("Mqtt listener connecting to: " + config.current.mqtt_server_url);
+    this.client.on('connect', _.bind(function () {
+        console.debug("Mqtt listener connected to topic: " + config.current.mqtt_topic);
+        this.client.subscribe(config.current.mqtt_topic); 
+    }, this));
+
+    this.client.on('message', function (topic, message) {
+        // message is Buffer 
+        var messegeBody = JSON.parse(message.toString());
+        console.debug("Mqtt message received: " + message.toString());        
+        ko.postbox.publish("sensorUpdate", messegeBody);
+    });
+  }
+
+  MqttListener.prototype.end = function(){
+      if(this.client){
+          this.client.end();
+      }
+  };
+
+  return MqttListener;
+});
\ No newline at end of file

UI.Web.Dashboard/src/services/mqttPublisher.js

+define(["app/config", "mqtt"], function(config, mqtt) {
+
+  function MqttPublisher() {
+  }
+
+  MqttPublisher.prototype.publish = function(messageBody){
+    var client  = mqtt.connect(config.current.mqtt_server_url);
+
+    client.on('connect', function () {
+        client.publish(config.current.mqtt_topic, messageBody);
+        client.end();
+    });
+  };
+
+  return MqttPublisher;
+});
\ No newline at end of file