From cd8ebfdcbe61ab461ef591ed98bba2c39614f12b Mon Sep 17 00:00:00 2001
From: luukas <lukasdoesdev@gmail.com>
Date: Thu, 16 Jun 2022 00:10:48 +0300
Subject: [PATCH] Make the WebSocket automatically reconnect.

The WebSocket reconnects 5 seconds after the connection's closure.
If the connection reconnection fails it will try to reconnect after
another 5 seconds.
---
 app/frontend/templates/base.html | 133 ++++++++++++++++++-------------
 1 file changed, 78 insertions(+), 55 deletions(-)

diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html
index 4b28120a..6d8c7332 100755
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@@ -164,7 +164,7 @@
 
   <script>
     $.extend($.fn.dataTable.defaults, {
-      language: {% raw translate('datatables', 'i18n', data['lang']) %}
+      // {{ '\nlanguage:' }} {% raw translate('datatables', 'i18n', data['lang']) %}
       })
 
     //used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
@@ -192,60 +192,90 @@
       });
     });
 
+    let usingWebSockets = false;
+    let webSocket = null;
     // {% if request.protocol == 'https' %}
-    let usingWebSockets = true;
+    usingWebSockets = true;
 
     let listenEvents = [];
+    let wsOpen = false;
+    /**
+      * @type {number | null} reconnectorId An interval ID for the reconnector.
+      */
+    let reconnectorId = null;
 
-    try {
-      pageQueryParams = 'page_query_params=' + encodeURIComponent(location.search)
-      page = 'page=' + encodeURIComponent(location.pathname)
-      var wsInternal = new WebSocket('wss://' + location.host + '/ws?' + page + '&' + pageQueryParams);
-      wsInternal.onopen = function () {
-        console.log('opened WebSocket connection:', wsInternal)
-      };
-      wsInternal.onmessage = function (rawMessage) {
-        var message = JSON.parse(rawMessage.data);
+    const wsPageQueryParams = 'page_query_params=' + encodeURIComponent(location.search)
+    const wsPage = 'page=' + encodeURIComponent(location.pathname)
 
-        console.log('got message: ', message)
+    const sendWssError = () => wsOpen || warn(
+      'WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?',
+      'https://wiki.craftycontrol.com/en/4/docs/Reverse%20Proxy%20Examples',
+      'wssError'
+    )
 
-        listenEvents
-          .filter(listenedEvent => listenedEvent.event == message.event)
-          .forEach(listenedEvent => listenedEvent.callback(message.data))
-      };
-      wsInternal.onerror = function (errorEvent) {
-        console.error('WebSocket Error', errorEvent);
-        warn('WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?', 'https://wiki.craftycontrol.com/en/4/docs/Reverse%20Proxy%20Examples')
-
-      };
-      wsInternal.onclose = function (closeEvent) {
-        console.log('Closed WebSocket', closeEvent);
-        setTimeout(sendWssError, 7000);
-      };
-
-
-      webSocket = {
-        on: function (event, callback) {
-          console.log('registered ' + event + ' event');
-          listenEvents.push({ event: event, callback: callback })
-        },
-        emit: function (event, data) {
-          var message = {
-            event: event,
-            data: data
+    function startWebSocket() {
+      console.log('%c[Crafty Controller] %cConnecting the WebSocket', 'font-weight: 900; color: #800080;', 'font-weight: 900; color: #eee;');
+      try {
+        var wsInternal = new WebSocket('wss://' + location.host + '/ws?' + wsPage + '&' + wsPageQueryParams);
+        wsInternal.onopen = function () {
+          console.log('opened WebSocket connection:', wsInternal)
+          wsOpen = true;
+          if (typeof reconnectorId === 'number') {
+            document.querySelectorAll('.wssError').forEach(el => el.remove())
+            clearInterval(reconnectorId);
+            reconnectorId = null;
           }
+        };
+        wsInternal.onmessage = function (rawMessage) {
+          var message = JSON.parse(rawMessage.data);
 
-          wsInternal.send(JSON.stringify(message));
+          console.log('got message: ', message)
+
+          listenEvents
+            .filter(listenedEvent => listenedEvent.event == message.event)
+            .forEach(listenedEvent => listenedEvent.callback(message.data))
+        };
+        wsInternal.onerror = function (errorEvent) {
+          console.error('WebSocket Error', errorEvent);
+        };
+        wsInternal.onclose = function (closeEvent) {
+          wsOpen = false;
+          console.log('Closed WebSocket', closeEvent);
+
+          if (typeof reconnectorId !== 'number') {
+            // Discard old websocket and create a new one in 5 seconds
+            wsInternal = null
+            reconnectorId = setInterval(startWebSocket, 5000)
+            setTimeout(sendWssError, 7000);
+          } else {
+            wsInternal.close();
+          }
+        };
+
+
+        webSocket = {
+          on: function (event, callback) {
+            console.log('registered ' + event + ' event');
+            listenEvents.push({ event: event, callback: callback })
+          },
+          emit: function (event, data) {
+            var message = {
+              event: event,
+              data: data
+            }
+
+            wsInternal.send(JSON.stringify(message));
+          }
         }
+      } catch (error) {
+        console.error('Error while making websocket helpers', error);
+        usingWebSockets = false;
       }
-    } catch (error) {
-      console.error('Error while making websocket helpers', error);
-      usingWebSockets = false;
     }
+
+    startWebSocket();
     // {% else %}
-    let usingWebSockets = false;
     warn('WebSockets are not supported in Crafty if not using the https protocol')
-    var webSocket;
     // {% end%}
 
     if (webSocket) {
@@ -265,8 +295,6 @@
           }
         })
       });
-    }
-    if (webSocket) {
       webSocket.on('support_status_update', function (logs) {
         if (logs.percent >= 100) {
           document.getElementById('logs_progress_bar').innerHTML = '100%';
@@ -276,8 +304,6 @@
           document.getElementById('logs_progress_bar').style.width = logs.percent + '%';
         }
       });
-    }
-    if (webSocket) {
       webSocket.on('send_logs_bootbox', function (server_id) {
         var x = document.querySelector('.bootbox');
         if (x) {
@@ -302,9 +328,6 @@
           }
         });
       });
-    }
-
-    if (webSocket) {
       webSocket.on('send_eula_bootbox', function (server_id) {
         var x = document.querySelector('.bootbox');
         if (x) {
@@ -339,10 +362,6 @@
       });
     }
 
-    function sendWssError(){
-        warn('WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?', 'https://wiki.craftycontrol.com/en/4/docs/Reverse%20Proxy%20Examples')
-    }
-
     function eulaAgree(server_id, command) {
       //< !--this getCookie function is in base.html-- >
       var token = getCookie("_xsrf");
@@ -360,7 +379,7 @@
     }
 
 
-    function warn(message, link = null) {
+    function warn(message, link = null, className = null) {
       var closeEl = document.createElement('span');
       var strongEL = document.createElement('strong');
       var msgEl = document.createElement('div');
@@ -397,6 +416,10 @@
         parentEl.appendChild(linkEl);
       }
 
+      if (className) {
+        parentEl.classList.add(className);
+      }
+
       document.querySelector('.warnings').appendChild(parentEl);
     }
 
@@ -473,4 +496,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>