webui: Add preliminary WebSocket support to front-end UI

Add a label to the header banner to show the WebSocket support status
and connection status.

2 files changed, 56 insertions, 0 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index 4dcffb8..4672298 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -120,6 +120,7 @@ header.masthead {
 }
 .navigation .description {
     font-style: italic;
+    margin-right: 2.5rem;
 }
 .navigation .navigation-list {
     list-style: none;
@@ -247,6 +248,10 @@ label, legend {
     background-color: #d9534f;
 }
 
+.label .icon {
+    margin-right: 0.2rem;
+}
+
 
 /**
  * Button styles
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
new file mode 100644
index 0000000..08f128f
--- /dev/null
+++ b/fg21sim/webui/static/js/websocket.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2016 Weitian LI <liweitianux@live.com>
+ * MIT license
+ *
+ * WebSocket codes for the Web UI of "fg21sim"
+ */
+
+
+$(document).ready(function () {
+  /**
+   * Check `WebSocket` support
+   */
+  if (window.WebSocket) {
+    // WebSocket supported
+    var createWebSocket = function (uri) {
+      $("#ws-status .text").text("Supported");
+      var proto = {"http:": "ws:", "https:": "wss:"}[location.protocol];
+      var host = location.hostname;
+      var port = location.port;
+      var url = proto + "//" + host + ":" + port + uri;
+      var socket = new WebSocket(url);
+      return socket;
+    };
+
+    var ws = createWebSocket("/ws");
+    ws.onopen = function () {
+      $("#ws-status").removeClass("label-default label-danger")
+                     .addClass("label-success");
+      $("#ws-status .icon").removeClass("fa-question-circle fa-warning")
+                           .addClass("fa-check-circle");
+      $("#ws-status .text").text("Connected");
+    };
+    ws.onclose = function () {
+      $("#ws-status").removeClass("label-default label-success")
+                     .addClass("label-danger");
+      $("#ws-status .icon").removeClass("fa-question-circle fa-check-circle")
+                           .addClass("fa-warning");
+      $("#ws-status .text").text("Disconnected!");
+    };
+    ws.onmessage = function (e) {
+      console.log("WS received: " + e.data);
+    };
+
+  } else {
+    // WebSocket NOT supported
+    $("#ws-status").removeClass("label-default").addClass("label-danger");
+    $("#ws-status .icon").removeClass("fa-question-circle")
+                         .addClass("fa-times-circle");
+    $("#ws-status .text").text("Unsupported!!");
+  }
+});