Recover websocket connection after server restart

2 files changed, 58 insertions, 46 deletions

diff --git a/gitautodeploy/httpserver.py b/gitautodeploy/httpserver.py
index b5cd801..2b4e32e 100644
--- a/gitautodeploy/httpserver.py
+++ b/gitautodeploy/httpserver.py
@@ -293,7 +293,10 @@ def WebhookRequestHandlerFactory(config, event_store):
                 return
 
             if self.path == "/api/status":
-                data = self.event_store.dict_repr()
+                data = {
+                    'events': self.event_store.dict_repr(),
+                    'ws-port': self._config['web-ui']['ws-port']
+                }
                 self.send_response(200, 'OK')
                 self.send_header('Content-type', 'application/json')
                 self.end_headers()
diff --git a/webui/src/Timeline.js b/webui/src/Timeline.js
index 6e97842..cc2cbc5 100644
--- a/webui/src/Timeline.js
+++ b/webui/src/Timeline.js
@@ -19,6 +19,8 @@ class Timeline extends Component {
 
     this.wsSocket = null;
     this.wsIsOpen = false;
+    this.wsIsRecovering = false;
+    this.wsPort = 9000;
   }
 
   componentDidMount() {
@@ -78,7 +80,6 @@ class Timeline extends Component {
     n.onerror = function () {
       console.log("onerror");
     };
-
   }
 
   fetchEventList() {
@@ -91,15 +92,8 @@ class Timeline extends Component {
 
     axios.get(url)
       .then(res => {
-
-        //const posts = res.data.data.children.map(obj => obj.data);
-        const events = res.data.map(obj =>
-          {
-            //obj.key = obj.id;
-            //console.log(obj);
-            return new Event(obj);
-          }
-        );
+        const events = res.data.events.map(obj =>  new Event(obj));
+        this.wsPort = res.data['ws-port'];
         this.setState({ events: events, loaded: true });
       })
       .catch(err => {
@@ -158,7 +152,6 @@ class Timeline extends Component {
   }
 
   handleJSONMessage(data) {
-
     var event;
 
     if(data.type === "new-event") {
@@ -176,59 +169,75 @@ class Timeline extends Component {
       event = this.getEventWithId(data.id);
 
       if(event && event.type === "WebhookAction") {
-
         this.showUserNotification(event);
-
       }
 
     } else {
-
       console.log("Unknown event: " + data.type);
+    }
+  }
 
+  getWebsocketURI() {
+    if (process.env.NODE_ENV === "development") {
+      return "ws://10.0.0.1:" + this.wsPort;
     }
+    var scheme = window.location.protocol === "https" ? "wss" : "ws";
+    return scheme + "://" + window.location.hostname + ":" + this.wsPort;
   }
 
   initWebsocketConnection() {
     var self = this;
+    var uri = self.getWebsocketURI();
 
-    var scheme = window.location.protocol === "https" ? "wss" : "ws";
-    var uri = scheme + "://" + window.location.hostname + ":9000";
+    self.wsSocket = new WebSocket(uri);
+    self.wsSocket.binaryType = "arraybuffer";
+    self.wsSocket.onopen = function() {
 
-    if (process.env.NODE_ENV === "development") {
-      uri = "ws://10.0.0.1:9000";
-    }
-
-    this.wsSocket = new WebSocket(uri);
-    this.wsSocket.binaryType = "arraybuffer";
+      self.wsIsOpen = true;
 
-    this.wsSocket.onopen = function() {
-      //console.log("Connected!");
-      this.wsIsOpen = true;
-    }
+      if(self.wsIsRecovering) {
+        self.wsIsRecovering = false;
+        self.fetchEventList();
+      }
+    };
 
-    this.wsSocket.onmessage = function(e) {
+    self.wsSocket.onmessage = (e) => {
       if (typeof e.data === "string") {
-          try {
-            var data = JSON.parse(e.data);
-            self.handleJSONMessage(data);
-          } catch(e) {
-            console.error(e);
-          }
+        try {
+          var data = JSON.parse(e.data);
+          self.handleJSONMessage(data);
+        } catch(e) {
+          console.error(e);
+        }
       } else {
-          var arr = new Uint8Array(e.data);
-          var hex = '';
-          for (var i = 0; i < arr.length; i++) {
-            hex += ('00' + arr[i].toString(16)).substr(-2);
-          }
-          console.log("Binary message received: " + hex);
+        var arr = new Uint8Array(e.data);
+        var hex = '';
+        for (var i = 0; i < arr.length; i++) {
+          hex += ('00' + arr[i].toString(16)).substr(-2);
+        }
+        console.log("Binary message received: " + hex);
       }
-    }
+    };
+
+    self.wsSocket.onclose = function() {
+
+      self.wsSocket.close();
+      self.wsSocket = null;
+      self.wsIsOpen = false;
+      self.wsIsRecovering = true;
+
+      if(self.wsReconnectTimeout !== undefined) {
+        clearTimeout(self.wsReconnectTimeout);
+      }
+
+      // Try to reconnect again after 2 seconds
+      self.wsReconnectTimeout = setTimeout(function() {
+
+        self.initWebsocketConnection();
+        self.wsReconnectTimeout = undefined;
+      }, 2000);
+    };
 
-    this.wsSocket.onclose = function(e) {
-      console.log("Connection closed.");
-      this.wsSocket = null;
-      this.wsIsOpen = false;
-    }
   }
 
   /*