feat: add machine live indicator

Kaixhin · Kaixhin · commit 39be32a31fdc · 2015-10-30T18:46:40.000Z
diff --git a/views/machine.jade b/views/machine.jade
@@ -5,6 +5,7 @@ block title
 
 block content
   h1 #[span.mega-octicon.octicon-device-desktop] Machine: #{machine.hostname} #[small.text-muted (#{machine._id})]
+  h2 Status #[span#machine-status.mega-octicon.octicon-device-desktop]
   h2 Specifications
   dl.dl-horizontal
     dt.col-sm-3 Hostname
@@ -29,3 +30,38 @@ block content
   ul.list-unstyled
     - each project in projects
       li #[a(href="/projects/" + project._id) #{project.name}]
+
+block scripts
+  script.
+    var host = "#{machine.address}".replace(/^http/, 'ws'); // WebSocket server address
+    var ws = null; // WebSocket
+    var $status = $("#machine-status"); // Machine 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);
