From 24b4a39fce61dd9bd8ab7757f3bbda0636adc8c9 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sat, 7 Apr 2018 18:49:48 +0100 Subject: Switch from http polling to data push via websockets --- public/javascripts/dash.js | 134 +++++++++++++-------------------------------- 1 file changed, 38 insertions(+), 96 deletions(-) (limited to 'public/javascripts') diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js index 43524ad..72b0b5a 100644 --- a/public/javascripts/dash.js +++ b/public/javascripts/dash.js @@ -1,9 +1,4 @@ var dash = { - realtimeUsagePollRateMs: 1000, - powerStatePollRateMs: 60000, - historicalStatsPollRateMs: 300000, - pollingEnabled: true, - realtimeGauge: null, realtimeTrendChart: null, realtimeTrendLastSample: 0, @@ -17,7 +12,35 @@ var dash = { this.initDailyUsageChart(); this.initMonthlyUsageChart(); - this.startPolling(); + this.initWsConnection(); + }, + + initWsConnection: function() { + var ws = new WebSocket('ws://192.168.1.8:3000/ws'); + ws.onopen = function () { + console.log('Websocket connection established'); + ws.send('getCachedData'); + } + ws.onmessage = this.wsMessageHandler; + }, + + wsMessageHandler: function(messageEvent) { + let message = JSON.parse(messageEvent.data); + console.log(message); + + 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 +104,15 @@ var dash = { tooltips: { intersect: false }, + plugins: { + streaming: { + duration: 60000, + refresh: 1000, + delay: 1000, + frameRate: 30, + onRefresh: dash.realtimeTrendChartOnRefresh + } + } } }); }, @@ -156,22 +188,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 +203,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 +241,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 +277,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"); @@ -344,13 +295,4 @@ $(document).ready(function () { dash.init(); - $("#toggle-polling").change(function() { - if(this.checked) { - dash.startPolling(); - } - else { - dash.stopPolling(); - } - }); - }); -- cgit v1.2.3 From 1301d90e93af799a9054f133847ebf3cbda15f9d Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sat, 7 Apr 2018 21:43:17 +0100 Subject: Add support for switching between multiple plugs --- public/javascripts/dash.js | 51 +++++++++++++++++++++++++--------------------- 1 file changed, 28 insertions(+), 23 deletions(-) (limited to 'public/javascripts') diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js index 72b0b5a..7a8207c 100644 --- a/public/javascripts/dash.js +++ b/public/javascripts/dash.js @@ -1,4 +1,6 @@ var dash = { + deviceId: null, + realtimeGauge: null, realtimeTrendChart: null, realtimeTrendLastSample: 0, @@ -6,7 +8,11 @@ var dash = { dailyUsageChart: null, monthlyUsageChart: null, - init: function() { + init: function(deviceId) { + this.deviceId = deviceId; + + $('#' + deviceId).addClass('active'); + this.initRealtimeGauge(); this.initRealtimeTrendChart(); this.initDailyUsageChart(); @@ -16,29 +22,35 @@ var dash = { }, initWsConnection: function() { - var ws = new WebSocket('ws://192.168.1.8:3000/ws'); + var wsUri = 'ws://' + window.location.host + '/ws' + var ws = new WebSocket(wsUri); ws.onopen = function () { console.log('Websocket connection established'); - ws.send('getCachedData'); + ws.send(JSON.stringify( + { + requestType: 'getCachedData', + deviceId: dash.deviceId + } + )); } ws.onmessage = this.wsMessageHandler; }, wsMessageHandler: function(messageEvent) { let message = JSON.parse(messageEvent.data); - console.log(message); - - 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); + 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); + } } }, @@ -289,10 +301,3 @@ var dash = { }, }; - - -$(document).ready(function () { - - dash.init(); - -}); -- cgit v1.2.3 From 0bbe22dd69bbb149e9fed74c87e7fc75e181483e Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sat, 7 Apr 2018 23:22:58 +0100 Subject: Try to re-establish lost websocket connections --- public/javascripts/dash.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'public/javascripts') diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js index 7a8207c..e3f39a9 100644 --- a/public/javascripts/dash.js +++ b/public/javascripts/dash.js @@ -26,6 +26,7 @@ var dash = { var ws = new WebSocket(wsUri); ws.onopen = function () { console.log('Websocket connection established'); + $('#connection-error').hide(200); ws.send(JSON.stringify( { requestType: 'getCachedData', @@ -33,7 +34,14 @@ var dash = { } )); } - ws.onmessage = this.wsMessageHandler; + 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) { -- cgit v1.2.3 From c72ea6660d06ac347feafd6cbb8b3dc3c0f95c43 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sun, 8 Apr 2018 17:09:55 +0100 Subject: Improve layout on mobile devices and tablets --- public/javascripts/dash.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'public/javascripts') diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js index e3f39a9..821e9c1 100644 --- a/public/javascripts/dash.js +++ b/public/javascripts/dash.js @@ -11,7 +11,7 @@ var dash = { init: function(deviceId) { this.deviceId = deviceId; - $('#' + deviceId).addClass('active'); + $('.' + deviceId).addClass('active'); this.initRealtimeGauge(); this.initRealtimeTrendChart(); @@ -305,7 +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]")); + if(powerState.uptime === 0) { + $("#uptime").text("-"); + } + else { + $("#uptime").text(moment.duration(powerState.uptime, "seconds").format("d[d] h[h] m[m]", {largest: 2})); + } + }, }; -- cgit v1.2.3