resolves #24: notify and reconnect interrupted connections

A notification is shown on the webui when the websocket connection is lost, and periodic retry is attempted
6 years ago · e1a0c7bd0b
parent 9eb90de5b1
commit e1a0c7bd0b
2 changed files with 32 additions and 3 deletions
--- a/src/resources/index.html
+++ b/src/resources/index.html
@ -36,6 +36,14 @@
   margin-bottom: 0;
  }
  table#joblist tr:first-child td { border-top: 0; }
+  #popup-connecting {
+    position: fixed;
+    background: white;
+    border: 1px solid #ddd;
+    bottom: 10px;
+    right: 10px;
+    padding: 20px;
+  }
 </style>
 </head>
 <body>
@ -218,6 +226,7 @@
   </div>
  </nav>
  <router-view></router-view>
+  <div v-show="!connected" id="popup-connecting"><img src="/spin.gif">&nbsp;Connecting...</div>
 </div>
 </body>
 </html>
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@ -24,6 +24,7 @@ const WebsocketHandler = function() {
          comp.ws = this;
          // Update html and nav titles
          document.title = comp.$root.title = msg.title;
+          comp.$root.connected = true;
          // Component-specific callback handler
          comp[msg.type](msg.data);
        });
@ -35,6 +36,21 @@ const WebsocketHandler = function() {
          this.comp[msg.type](msg.data);
      }
    };
+    ws.onclose = function(ev) {
+      // if this.comp isn't set, this connection has never been used
+      // and a re-connection isn't meaningful
+      if(!ev.wasClean && 'comp' in this) {
+        this.comp.$root.connected = false;
+        this.reconnectTimeout = setTimeout(()=>{
+          var newWs = setupWebsocket(path, (fn) => { fn(this.comp); });
+          // pass on the current component for the cases where the
+          // connection fails (onclose is called again) before the
+          // status message can reassign the current component
+          newWs.comp = this.comp;
+        }, 2000);
+      }
+    }
+    return ws;
  };
  return {
    beforeRouteEnter(to, from, next) {
@ -42,12 +58,14 @@ const WebsocketHandler = function() {
    },
    beforeRouteUpdate(to, from, next) {
      this.ws.close();
+      clearTimeout(this.ws.reconnectTimeout);
      setupWebsocket(to.path, (fn) => { fn(this); next(); });
    },
    beforeRouteLeave(to, from, next) {
      this.ws.close();
+      clearTimeout(this.ws.reconnectTimeout);
      next();
-    },
+    }
  };
 }();

@ -448,7 +466,6 @@ const Run = function() {
    methods: {
      status: function(data) {
        state.jobsRunning = [];
-        state.log = '';
        state.job = data;
        state.latestNum = data.latestNum;
        state.jobsRunning = [data];
@ -468,6 +485,7 @@ const Run = function() {
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
+        state.log = '';
        vm.logws = wsp(to.path + '/log');
        vm.logws.onmessage = function(msg) {
          logHandler(vm, msg.data);
@ -477,6 +495,7 @@ const Run = function() {
    beforeRouteUpdate(to, from, next) {
      var vm = this;
      vm.logws.close();
+      state.log = '';
      vm.logws = wsp(to.path + '/log');
      vm.logws.onmessage = function(msg) {
        logHandler(vm, msg.data);
@ -493,7 +512,8 @@ const Run = function() {
 new Vue({
  el: '#app',
  data: {
-    title: '' // populated by status ws message
+    title: '', // populated by status ws message
+    connected: false
  },
  router: new VueRouter({
    mode: 'history',