Merge pull request #1 from jamesbarnett91/websocketsv0.2

Switch from http polling to websockets

1 files changed, 64 insertions, 103 deletions

diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js
index 43524ad..821e9c1 100644
--- a/public/javascripts/dash.js
+++ b/public/javascripts/dash.js
@@ -1,8 +1,5 @@
 var dash = {
-  realtimeUsagePollRateMs: 1000,
-  powerStatePollRateMs: 60000,
-  historicalStatsPollRateMs: 300000,
-  pollingEnabled: true,
+  deviceId: null,
 
   realtimeGauge: null,
   realtimeTrendChart: null,
@@ -11,13 +8,59 @@ var dash = {
   dailyUsageChart: null,
   monthlyUsageChart: null,
 
-  init: function() {
+  init: function(deviceId) {
+    this.deviceId = deviceId;
+
+    $('.' + deviceId).addClass('active');
+
     this.initRealtimeGauge();
     this.initRealtimeTrendChart();
     this.initDailyUsageChart();
     this.initMonthlyUsageChart();
     
-    this.startPolling();
+    this.initWsConnection();
+  },
+
+  initWsConnection: function() {
+    var wsUri = 'ws://' + window.location.host + '/ws'
+    var ws = new WebSocket(wsUri);
+    ws.onopen = function () {
+      console.log('Websocket connection established');
+      $('#connection-error').hide(200);
+      ws.send(JSON.stringify(
+        {
+          requestType: 'getCachedData',
+          deviceId: dash.deviceId
+        }
+      ));
+    }
+    ws.onmessage = dash.wsMessageHandler;
+
+    ws.onclose = function() {
+      // Usually caused by mobile devices going to sleep or the user minimising the browser app.
+      // The setTimeout will begin once the device wakes from sleep or the browser regains focus.
+      $('#connection-error').show();
+      setTimeout(dash.initWsConnection, 2000);
+    }
+  },
+
+  wsMessageHandler: function(messageEvent) {
+    let message = JSON.parse(messageEvent.data);
+    if(message.deviceId === dash.deviceId) {
+      if(message.dataType === 'realtimeUsage') {
+        dash.refreshRealtimeDisplay(message.data);
+      }
+      else if(message.dataType === 'dailyUsage') {
+        dash.parseDailyUsageData(message.data);
+      }
+      else if(message.dataType === 'monthlyUsage') {
+        dash.parseMonthlyUsageData(message.data);
+      }
+      else if(message.dataType === 'powerState') {
+        dash.refreshPowerState(message.data);
+      }
+    }
+
   },
 
   initRealtimeGauge: function() {
@@ -81,6 +124,15 @@ var dash = {
         tooltips: {
           intersect: false
         },
+        plugins: {
+          streaming: {
+            duration: 60000,
+            refresh: 1000,
+            delay: 1000,
+            frameRate: 30,
+            onRefresh: dash.realtimeTrendChartOnRefresh
+          }
+        }
       }
     });
   },
@@ -156,22 +208,6 @@ var dash = {
     });
   },
 
-  // TODO - should probably use websockets 
-  pollUsage: function() {
-    if(this.pollingEnabled) {
-      $.ajax({
-        url: "/energy-usage/1/realtime",
-        type: "GET",
-        success: function(data) {
-          dash.refreshRealtimeDisplay(data);
-        },
-        dataType: "json",
-        complete: setTimeout(function() {dash.pollUsage()}, dash.realtimeUsagePollRateMs),
-        timeout: 2000
-      });
-    }
-  },
-
   refreshRealtimeDisplay: function(realtime) {
 
     var power = Math.round(realtime.power);
@@ -187,41 +223,6 @@ var dash = {
     this.realtimeTrendLastSample = power;
   },
 
-  startPolling: function() {
-    this.pollingEnabled = true;
-    this.realtimeTrendChart.options.plugins.streaming = {
-      duration: 60000,
-      refresh: 1000,
-      delay: 1000,
-      frameRate: 30,
-      onRefresh: dash.realtimeTrendChartOnRefresh
-    };
-    
-    this.pollUsage();
-    this.pollPowerStatus();
-    this.pollDayStats();
-    this.pollMonthStats();
-  },
-
-  stopPolling: function() {
-    this.pollingEnabled = false;
-    this.realtimeTrendChart.options.plugins.streaming = false;
-  },
-
-  pollDayStats: function() {
-    if(this.pollingEnabled) {
-      $.ajax({
-        url: "/energy-usage/1/day-stats",
-        type: "GET",
-        success: function(data) {
-          dash.parseDailyUsageData(data);
-        },
-        dataType: "json",
-        complete: setTimeout(function() {dash.pollDayStats()}, dash.historicalStatsPollRateMs),
-        timeout: 4000
-      });
-    }
-  },
 
   parseDailyUsageData: function(usageData) {
 
@@ -260,21 +261,6 @@ var dash = {
 
   },
 
-  pollMonthStats: function() {
-    if(this.pollingEnabled) {
-      $.ajax({
-        url: "/energy-usage/1/month-stats",
-        type: "GET",
-        success: function(data) {
-          dash.parseMonthlyUsageData(data);
-        },
-        dataType: "json",
-        complete: setTimeout(function() {dash.pollMonthStats()}, dash.historicalStatsPollRateMs),
-        timeout: 4000
-      });
-    }
-  },
-
   parseMonthlyUsageData: function(usageData) {
     
     // Clear previous data
@@ -311,21 +297,6 @@ var dash = {
     $("#avg-month").text(avg.toFixed(2));
   },
 
-  pollPowerStatus: function() {
-    if(this.pollingEnabled) {
-      $.ajax({
-        url: "/power-state/1",
-        type: "GET",
-        success: function(data) {
-          dash.refreshPowerState(data);
-        },
-        dataType: "json",
-        complete: setTimeout(function() {dash.pollPowerStatus()}, dash.powerStatePollRateMs),
-        timeout: 2000
-      });
-    }
-  },
-
   refreshPowerState: function(powerState) {
     if(powerState.isOn) {
       $("#power-state").text("ON").attr("class", "label label-success");
@@ -334,23 +305,13 @@ var dash = {
       $("#power-state").text("OFF").attr("class", "label label-danger");
     }
 
-    $("#uptime").text(moment.duration(powerState.uptime, "seconds").format("d[d] h[h] m[m]"));
-  },
-
-};
-
-
-$(document).ready(function () {
-
-  dash.init();
-
-  $("#toggle-polling").change(function() {
-    if(this.checked) {
-      dash.startPolling();
+    if(powerState.uptime === 0) {
+      $("#uptime").text("-");
     }
     else {
-      dash.stopPolling();
+      $("#uptime").text(moment.duration(powerState.uptime, "seconds").format("d[d] h[h] m[m]", {largest: 2}));
     }
-  });
+    
+  },
 
-});
+};