add websocket update

static/js/reconnecting-websocket.min.js

@@ -0,0 +1 @@
+!function(a,b){"function"==typeof define&&define.amd?define([],b):"undefined"!=typeof module&&module.exports?module.exports=b():a.ReconnectingWebSocket=b()}(this,function(){function a(b,c,d){function l(a,b){var c=document.createEvent("CustomEvent");return c.initCustomEvent(a,!1,!1,b),c}var e={debug:!1,automaticOpen:!0,reconnectInterval:1e3,maxReconnectInterval:3e4,reconnectDecay:1.5,timeoutInterval:2e3};d||(d={});for(var f in e)this[f]="undefined"!=typeof d[f]?d[f]:e[f];this.url=b,this.reconnectAttempts=0,this.readyState=WebSocket.CONNECTING,this.protocol=null;var h,g=this,i=!1,j=!1,k=document.createElement("div");k.addEventListener("open",function(a){g.onopen(a)}),k.addEventListener("close",function(a){g.onclose(a)}),k.addEventListener("connecting",function(a){g.onconnecting(a)}),k.addEventListener("message",function(a){g.onmessage(a)}),k.addEventListener("error",function(a){g.onerror(a)}),this.addEventListener=k.addEventListener.bind(k),this.removeEventListener=k.removeEventListener.bind(k),this.dispatchEvent=k.dispatchEvent.bind(k),this.open=function(b){h=new WebSocket(g.url,c||[]),b||k.dispatchEvent(l("connecting")),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","attempt-connect",g.url);var d=h,e=setTimeout(function(){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","connection-timeout",g.url),j=!0,d.close(),j=!1},g.timeoutInterval);h.onopen=function(){clearTimeout(e),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onopen",g.url),g.protocol=h.protocol,g.readyState=WebSocket.OPEN,g.reconnectAttempts=0;var d=l("open");d.isReconnect=b,b=!1,k.dispatchEvent(d)},h.onclose=function(c){if(clearTimeout(e),h=null,i)g.readyState=WebSocket.CLOSED,k.dispatchEvent(l("close"));else{g.readyState=WebSocket.CONNECTING;var d=l("connecting");d.code=c.code,d.reason=c.reason,d.wasClean=c.wasClean,k.dispatchEvent(d),b||j||((g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onclose",g.url),k.dispatchEvent(l("close")));var e=g.reconnectInterval*Math.pow(g.reconnectDecay,g.reconnectAttempts);setTimeout(function(){g.reconnectAttempts++,g.open(!0)},e>g.maxReconnectInterval?g.maxReconnectInterval:e)}},h.onmessage=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onmessage",g.url,b.data);var c=l("message");c.data=b.data,k.dispatchEvent(c)},h.onerror=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onerror",g.url,b),k.dispatchEvent(l("error"))}},1==this.automaticOpen&&this.open(!1),this.send=function(b){if(h)return(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","send",g.url,b),h.send(b);throw"INVALID_STATE_ERR : Pausing to reconnect websocket"},this.close=function(a,b){"undefined"==typeof a&&(a=1e3),i=!0,h&&h.close(a,b)},this.refresh=function(){h&&h.close()}}return a.prototype.onopen=function(){},a.prototype.onclose=function(){},a.prototype.onconnecting=function(){},a.prototype.onmessage=function(){},a.prototype.onerror=function(){},a.debugAll=!1,a.CONNECTING=WebSocket.CONNECTING,a.OPEN=WebSocket.OPEN,a.CLOSING=WebSocket.CLOSING,a.CLOSED=WebSocket.CLOSED,a});

static/js/script.js

@@ -1,6 +1,57 @@
 var newDateObj = new Date();
 newDateObj = new Date(newDateObj.getTime() + 1000 * 20)
 
+backReqInt = 0;
+websocketFailed = false
+recoveryAttempts = 0;
+
+let socket = new ReconnectingWebSocket("ws://localhost:" + location.port);
+
+
+socket.onopen = function (e) {
+  // alert("[open] Connection established");
+  //alert("Sending to server");
+  socket.send("new client");
+};
+
+socket.onmessage = function (event) {
+  // alert(`[message] Data received from server: ${event.data}`);
+  dataFame = JSON.parse(event.data);
+  timeDiff = new Date().getTime() - dataFame.srvTime
+};
+
+socket.onclose = function (event) {
+  if (event.wasClean) {
+    console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
+  } else {
+    // e.g. server process killed or network down
+    // event.code is usually 1006 in this case
+    console.error('[close] Connection died');
+
+    /*websocketFailed = true
+    if (recoveryAttempts < 5) {
+      setTimeout(function handleWebsocketRecovery() {
+        // requestBackend()
+        websocketFailed = false
+        recoveryAttempts++;
+        console.warn("Trying to recover websocket connection")
+        socket.onopen = function (e) {
+          // alert("[open] Connection established");
+          //alert("Sending to server");
+          socket.send("new client");
+        };
+      }, 1000)
+    } else {
+      backReqInt = setInterval(requestBackend, 500);
+    }
+    */
+  }
+};
+
+socket.onerror = function (error) {
+  alert(`[error] ${error.message}`);
+};
+
 allowFullscreen = true
 let dataFame = {}
 let timeDiff = 0
@@ -87,11 +138,10 @@ let isSlowed = false
 
 function handleRecovery() {
   var img = document.body.appendChild(document.createElement("img"));
-    img.onload = function()
-    {
-      location.reload(); 
-    };
-    img.src = "SMPTE_Color_Bars.svg";
+  img.onload = function () {
+    location.reload();
+  };
+  img.src = "SMPTE_Color_Bars.svg";
 }
 
 let recoInter = -1
@@ -101,7 +151,7 @@ function handleUpdate() {
   document.getElementById("incomeData").innerHTML = JSON.stringify(data)
   document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
   if (new Date().getTime() - data.srvTime > 1000 * 5) {
-    
+
     if (!isSlowed) {
       console.error("Server timeout")
       clearInterval(updateInter)
@@ -111,7 +161,7 @@ function handleUpdate() {
       recoInter = setInterval(handleRecovery, 10000)
     }
   } else {
-    if(isSlowed){
+    if (isSlowed) {
       clearInterval(updateInter)
       clearInterval(recoInter)
       updateInter = setInterval(handleUpdate, 2)
@@ -222,7 +272,7 @@ function getTime() {
 }
 
 
-setInterval(requestBackend, 500);
+// setInterval(requestBackend, 500);
 updateInter = setInterval(handleUpdate, 2);
 
 let temp = new URLSearchParams(window.location.search).get("smaller");