feat: add server status indicator

Kaixhin · Oct 30, 2015 · e46c09f · e46c09f
1 parent 9a02ce1
commit e46c09f
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 11 deletions.
diff --git a/lab.js b/lab.js
@@ -13,7 +13,7 @@ var favicon = require("serve-favicon");
 var morgan = require("morgan");
 var rp = require("request-promise");
 var Promise = require("bluebird");
-//var WebSocketServer = require("ws").Server;
+var WebSocketServer = require("ws").Server;
 var db = require("./db").db;
 
 /* App instantiation */
@@ -636,15 +636,14 @@ if (!process.env.FGLAB_PORT) {
 
 /* WebSocket server */
 // Add websocket server
-/*
 var wss = new WebSocketServer({server: server});
 
 // Call on connection from new client
 wss.on("connection", function(ws) {
-  console.log("Client opened connection");
+  //console.log("Client opened connection");
 
   // Send one message
-  ws.send("Connected to server");
+  //ws.send("Connected to server");
 
   // Print received messages
   ws.on("message", function(message) {
@@ -653,7 +652,6 @@ wss.on("connection", function(ws) {
 
   // Perform clean up if necessary
   ws.on("close", function() {
-    console.log("Client closed connection");
+    //console.log("Client closed connection");
   });
 });
-*/
diff --git a/views/experiment.jade b/views/experiment.jade
@@ -50,7 +50,6 @@ block content
         div(id= "chart" + ind)
 
 block scripts
-  script(src="/bower_components/jquery/dist/jquery.min.js")
   script(src="/bower_components/bootstrap/dist/js/bootstrap.min.js")
   script(src="/bower_components/d3/d3.min.js")
   script(src="/bower_components/c3/c3.min.js")

diff --git a/views/experiments.jade b/views/experiments.jade
@@ -11,7 +11,6 @@ block content
   table#experiments
 
 block scripts
-  script(src="/bower_components/jquery/dist/jquery.min.js")
   script(src="/bower_components/bootstrap/dist/js/bootstrap.min.js")
   script(src="/bower_components/bootstrap-table/dist/bootstrap-table.min.js")
   script(src="/bower_components/bootstrap-table/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.min.js")

diff --git a/views/index.jade b/views/index.jade
@@ -53,7 +53,6 @@ block content
             a(href="/machines/" + machine._id) #{machine.hostname}
 
 block scripts
-  script(src="/bower_components/jquery/dist/jquery.min.js")
   script.
     $(function() {
       // Make home button active

diff --git a/views/layout.jade b/views/layout.jade
@@ -21,6 +21,43 @@ html(lang="en")
           a.nav-link(href="javascript:history.back()") #[span.octicon.octicon-chevron-left]
         li.nav-item
           a.nav-link(href="javascript:history.forward()") #[span.octicon.octicon-chevron-right]
+      ul.nav.navbar-nav.pull-right
+        li.nav-item
+          a.nav-link #[span#server-status.octicon.octicon-server.text-success]
     .container
       block content
+    script(src="/bower_components/jquery/dist/jquery.min.js")
+    script.
+      var host = location.origin.replace(/^http/, 'ws'); // WebSocket server address
+      var ws = null; // WebSocket
+      var $status = $("#server-status"); // Server status icon
+
+      // Connects to WebSocket server
+      var wsConnect = function() {
+        ws = new WebSocket(host); // Attempt to connect
+
+        // Set server status as on
+        ws.onopen = function(event) {
+          $status.removeClass("text-danger");
+          $status.addClass("text-success");
+        };
+        // Set server status as off
+        ws.onclose = function(event) {
+          // Set status
+          $status.removeClass("text-success");
+          $status.addClass("text-danger");
+        };
+      };
+
+      // Reconnects to WebSocket server if needed
+      var wsReconnect = function() {
+        if (!ws || ws.readyState === WebSocket.CLOSED) {
+          wsConnect();
+        }
+      };
+
+      // Connect 
+      wsConnect();
+      // Attempt to reconnect every 5s if necessary
+      setInterval(wsReconnect, 5000);
     block scripts
diff --git a/views/optimisation.jade b/views/optimisation.jade
@@ -60,7 +60,6 @@ block content
         button#random-search.btn.btn-primary(type="submit") Random Search
 
 block scripts
-  script(src="/bower_components/jquery/dist/jquery.min.js")
   script(src="/bower_components/bootstrap/dist/js/bootstrap.min.js")
   script(src="/bower_components/lodash/lodash.min.js")
   script.

diff --git a/views/project.jade b/views/project.jade
@@ -43,7 +43,6 @@ block content
         button.btn.btn-primary(type="submit") Submit
 
 block scripts
-  script(src="/bower_components/jquery/dist/jquery.min.js")
   script(src="/bower_components/bootstrap/dist/js/bootstrap.min.js")
   script.
     // Parse from string instead prior to accessing internal objects via Jade