aboutsummaryrefslogtreecommitdiffstats
path: root/fg21sim/webui/static/js/websocket.js
diff options
context:
space:
mode:
authorAaron LI <aaronly.me@outlook.com>2016-11-02 14:27:28 +0800
committerAaron LI <aaronly.me@outlook.com>2016-11-02 14:27:28 +0800
commit4cb5f42fd11207482565ecf8dd8cebe033208ff7 (patch)
treef26b35d119406f245f22292aa21a5d1721f9cd66 /fg21sim/webui/static/js/websocket.js
parent68cbe49b04104ca6e1dcfb25165b2100f853449a (diff)
downloadfg21sim-4cb5f42fd11207482565ecf8dd8cebe033208ff7.tar.bz2
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.
Diffstat (limited to 'fg21sim/webui/static/js/websocket.js')
-rw-r--r--fg21sim/webui/static/js/websocket.js51
1 files changed, 51 insertions, 0 deletions
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!!");
+ }
+});