From 0bbe22dd69bbb149e9fed74c87e7fc75e181483e Mon Sep 17 00:00:00 2001
From: James Barnett <noreply@jamesbarnett.xyz>
Date: Sat, 7 Apr 2018 23:22:58 +0100
Subject: Try to re-establish lost websocket connections

---
 public/javascripts/dash.js   | 10 +++++++++-
 public/stylesheets/style.css |  6 ++++++
 views/index.hbs              | 11 ++++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

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) {
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 3f4c1ca..6d37c8f 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -25,4 +25,10 @@ footer ul {
   color: #fff;
   background-color: #5cb85c;
   border-color: #4cae4c;
+}
+
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
 }
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index d0210a7..6178c96 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -33,9 +33,14 @@
         
         <div class="page-header">
           <div class="row">
-            <h1>
-              <i class="fa fa-plug"></i> {{device.alias}}
-            </h1>
+            <div class="col-sm-8">
+              <h1>
+                <i class="fa fa-plug"></i> {{device.alias}}
+              </h1>
+            </div>
+            <div class="col-sm-4">
+              <div id="connection-error" class="alert alert-danger" style="display:none">Connection lost. Attempting to re-establish...</div>
+            </div>
           </div>
         </div>
 
-- 
cgit v1.2.3