aboutsummaryrefslogtreecommitdiffstats
path: root/fg21sim/webui/static/js/websocket.js
diff options
context:
space:
mode:
authorAaron LI <aaronly.me@outlook.com>2016-11-02 18:52:46 +0800
committerAaron LI <aaronly.me@outlook.com>2016-11-02 19:25:24 +0800
commit44be74b4e57d70f6ddfb599b97688f9dc2359e29 (patch)
treeb7afdc749bd45227433a846e03837c6372d79ba4 /fg21sim/webui/static/js/websocket.js
parent4cb5f42fd11207482565ecf8dd8cebe033208ff7 (diff)
downloadfg21sim-44be74b4e57d70f6ddfb599b97688f9dc2359e29.tar.bz2
webui: Rewrite and reconnect to WebSocket when closed
Diffstat (limited to 'fg21sim/webui/static/js/websocket.js')
-rw-r--r--fg21sim/webui/static/js/websocket.js129
1 files changed, 97 insertions, 32 deletions
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
index 08f128f..22a2fd8 100644
--- a/fg21sim/webui/static/js/websocket.js
+++ b/fg21sim/webui/static/js/websocket.js
@@ -6,46 +6,111 @@
*/
+/**
+ * Global variable
+ * FIXME: try to avoid this ...
+ */
+var ws = null; /* WebSocket */
+
+
+/**
+ * Get the full WebSocket URL from the given URI
+ */
+var getWebSocketURL = function (uri) {
+ var proto = {"http:": "ws:", "https:": "wss:"}[location.protocol];
+ var host = location.hostname;
+ var port = location.port;
+ var url = proto + "//" + host + ":" + port + uri;
+ return url;
+};
+
+
+/**
+ * Update the contents of element "#ws-status" according to the current
+ * WebSocket status.
+ */
+var updateWSStatus = function (action) {
+ if (action === "open") {
+ // WebSocket opened and connected
+ $("#ws-status").removeClass("label-default label-warning label-danger")
+ .addClass("label-success");
+ $("#ws-status .icon").removeClass("fa-question-circle fa-warning")
+ .removeClass("fa-times-circle")
+ .addClass("fa-check-circle");
+ $("#ws-status .text").text("Connected");
+ }
+ else if (action === "close") {
+ // WebSocket closed
+ $("#ws-status").removeClass("label-default label-success label-danger")
+ .addClass("label-warning");
+ $("#ws-status .icon").removeClass("fa-question-circle fa-check-circle")
+ .removeClass("fa-times-circle")
+ .addClass("fa-warning");
+ $("#ws-status .text").text("Disconnected!");
+ }
+ else if (action === "error") {
+ // WebSocket encountered error
+ $("#ws-status").removeClass("label-default label-success label-warning")
+ .addClass("label-danger");
+ $("#ws-status .icon").removeClass("fa-question-circle fa-check-circle")
+ .removeClass("fa-warning")
+ .addClass("fa-times-circle");
+ $("#ws-status .text").text("Error!!");
+ }
+ else if (action === "unsupported") {
+ // 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!!");
+ }
+ else {
+ console.error("updateWSStatus: Unknown action: ", action);
+ }
+};
+
+
+/**
+ * Connect to WebSocket and bind functions to events
+ */
+var connectWebSocket = function (url) {
+ ws = new WebSocket(url);
+ ws.onopen = function () {
+ console.log("Opened WebSocket: " + ws.url);
+ updateWSStatus("open");
+ };
+ ws.onclose = function (e) {
+ console.log("WebSocket closed because: ", e.reason);
+ updateWSStatus("close");
+ // Reconnect
+ console.log("Reconnect the WebSocket in 1 second");
+ setTimeout(function () { connectWebSocket(url); }, 1000);
+ };
+ ws.onerror = function (e) {
+ console.error("WebSocket encountered error: ", e.message);
+ updateWSStatus("error");
+ };
+ ws.onmessage = function (e) {
+ console.log("WebSocket received message:");
+ console.log(e.data);
+ };
+};
+
+
$(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);
- };
+ console.log("Great, WebSocket is supported!");
+
+ var ws_url = getWebSocketURL("/ws");
+ connectWebSocket(ws_url);
} 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!!");
+ console.error("Oops, WebSocket is NOT supported!");
+ updateWSStatus("unsupported");
}
});