webui: Add a manual reconnection button to the header banner

Also add a global variable "ws_reconnect" to control the timeout between
reconnection and the maximum reconnection times (default: 100).

3 files changed, 60 insertions, 6 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index 4672298..de2eb18 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -319,6 +319,12 @@ button,
     border-color: #ac2925;
 }
 
+.btn {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    cursor: pointer;
+}
+
 
 /**
  * Panel styles
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
index 22a2fd8..95e85f2 100644
--- a/fg21sim/webui/static/js/websocket.js
+++ b/fg21sim/webui/static/js/websocket.js
@@ -5,12 +5,19 @@
  * WebSocket codes for the Web UI of "fg21sim"
  */
 
+"use strict";
 
 /**
  * Global variable
  * FIXME: try to avoid this ...
  */
 var ws = null;  /* WebSocket */
+/* WebSocket reconnection settings */
+var ws_reconnect = {
+  maxTry: 100,
+  tried: 0,
+  timeout: 1000,  /* ms */
+};
 
 
 /**
@@ -65,7 +72,29 @@ var updateWSStatus = function (action) {
     $("#ws-status .text").text("Unsupported!!");
   }
   else {
-    console.error("updateWSStatus: Unknown action: ", action);
+    console.error("updateWSStatus: Unknown action:", action);
+  }
+};
+
+
+/**
+ * Toggle the visibility of element "#ws-status".
+ */
+var toggleWSReconnect = function (action) {
+  /**
+   * Function default parameters: https://stackoverflow.com/a/894877/4856091
+   */
+  action = typeof action !== "undefined" ? action : "toggle";
+
+  var target = $("#ws-reconnect");
+  if (action === "toggle") {
+    target.toggle();
+  } else if (action === "show") {
+    target.show();
+  } else if (action === "hide") {
+    target.hide();
+  } else {
+    console.error("toggleWSReconnect: Unknown action:", action);
   }
 };
 
@@ -76,19 +105,29 @@ var updateWSStatus = function (action) {
 var connectWebSocket = function (url) {
   ws = new WebSocket(url);
   ws.onopen = function () {
-    console.log("Opened WebSocket: " + ws.url);
+    console.log("Opened WebSocket:", ws.url);
     updateWSStatus("open");
+    toggleWSReconnect("hide");
   };
   ws.onclose = function (e) {
-    console.log("WebSocket closed because: ", e.reason);
+    console.log("WebSocket closed: code:", e.code, ", reason:", e.reason);
     updateWSStatus("close");
     // Reconnect
-    console.log("Reconnect the WebSocket in 1 second");
-    setTimeout(function () { connectWebSocket(url); }, 1000);
+    if (ws_reconnect.tried < ws_reconnect.maxTry) {
+      ws_reconnect.tried++;
+      console.log("Try reconnect the WebSocket: No." + ws_reconnect.tried);
+      setTimeout(function () { connectWebSocket(url); },
+                 ws_reconnect.timeout);
+    } else {
+      console.error("WebSocket already tried allowed maximum times:",
+                    ws_reconnect.maxTry);
+      toggleWSReconnect("show");
+    }
   };
   ws.onerror = function (e) {
-    console.error("WebSocket encountered error: ", e.message);
+    console.error("WebSocket encountered error:", e.message);
     updateWSStatus("error");
+    toggleWSReconnect("show");
   };
   ws.onmessage = function (e) {
     console.log("WebSocket received message:");
@@ -108,6 +147,14 @@ $(document).ready(function () {
     var ws_url = getWebSocketURL("/ws");
     connectWebSocket(ws_url);
 
+    // Bind event to the "#ws-reconnect" button
+    $("#ws-reconnect").on("click", function () {
+      console.log("WebSocket: reset the tried reconnection counter");
+      ws_reconnect.tried = 0;
+      console.log("Manually reconnect the WebSocket:", ws_url);
+      connectWebSocket(ws_url);
+    });
+
   } else {
     // WebSocket NOT supported
     console.error("Oops, WebSocket is NOT supported!");
diff --git a/fg21sim/webui/templates/header.html b/fg21sim/webui/templates/header.html
index b086515..d96dc48 100644
--- a/fg21sim/webui/templates/header.html
+++ b/fg21sim/webui/templates/header.html
@@ -16,6 +16,7 @@
         <span class="icon fa fa-question-circle" aria-hidden="true"></span>
         <span class="text">N/A</span>
     </span>
+    <span id="ws-reconnect" class="btn fa fa-refresh" aria-hidden="true"></span>
 
     <ul class="navigation-list float-right">
       <li class="navigation-item"><a class="navigation-link button button-outline" href="#configs" title="Configurations"><span class="fa fa-wrench" aria-hidden="true"></span> Configurations</a></li>