Small fix + attempt to improve socket messages reliability...

[vchess.git] / client / src / views / MyGames.vue

diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue
index 3d86636..ad330ae 100644 (file)
--- a/client/src/views/MyGames.vue
+++ b/client/src/views/MyGames.vue
@@ -78,7 +78,8 @@ export default {
       },
       conn: null,
       connexionString: "",
-      socketCloseListener: 0
+      reopenTimeout: 0,
+      reconnectTimeout: 0
     };
   },
   watch: {
@@ -88,7 +89,7 @@ export default {
     // st.variants changes only once, at loading from [] to [...]
     "st.variants": function() {
       // Set potential games variant names + display:
-      this.livesGames.concat(this.corrGames).concat(this.importGames)
+      this.liveGames.concat(this.corrGames).concat(this.importGames)
       .forEach(o => {
         if (!o.vname) this.setVname(o);
       });
@@ -96,7 +97,6 @@ export default {
   },
   created: function() {
     window.addEventListener("beforeunload", this.cleanBeforeDestroy);
-    // Initialize connection
     this.connexionString =
       params.socketUrl +
       "/?sid=" + this.st.user.sid +
@@ -104,19 +104,7 @@ export default {
       "&tmpId=" + getRandString() +
       "&page=" +
       encodeURIComponent(this.$route.path);
-    this.conn = new WebSocket(this.connexionString);
-    this.conn.onmessage = this.socketMessageListener;
-    this.socketCloseListener = setInterval(
-      () => {
-        if (this.conn.readyState == 3) {
-          // Connexion is closed: re-open
-          this.conn.removeEventListener("message", this.socketMessageListener);
-          this.conn = new WebSocket(this.connexionString);
-          this.conn.addEventListener("message", this.socketMessageListener);
-        }
-      },
-      1000
-    );
+    this.openConnection();
   },
   mounted: function() {
     const adjustAndSetDisplay = () => {
@@ -157,6 +145,7 @@ export default {
               this.corrGames.forEach(g => {
                 g.type = "corr";
                 g.score = "*";
+                g.options = JSON.parse(g.options);
               });
               this.decorate(this.corrGames);
               // Now ask completed games (partial list)
@@ -181,10 +170,26 @@ export default {
     this.cleanBeforeDestroy();
   },
   methods: {
+    openConnection: function() {
+      // Initialize connection
+      this.conn = new WebSocket(this.connexionString);
+      this.conn.onopen = () => { this.reconnectTimeout = 250; };
+      this.conn.onmessage = this.socketMessageListener;
+      const closeConnection = () => {
+        this.reopenTimeout = setTimeout(
+          () => {
+            this.openConnection();
+            this.reconnectTimeout = Math.min(2*this.reconnectTimeout, 30000);
+          },
+          this.reconnectTimeout
+        );
+      };
+      this.conn.onerror = closeConnection;
+      this.conn.onclose = closeConnection;
+    },
     cleanBeforeDestroy: function() {
-      clearInterval(this.socketCloseListener);
       window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
-      this.conn.removeEventListener("message", this.socketMessageListener);
+      clearTimeout(this.reopenTimeout);
       this.conn.send(JSON.stringify({code: "disconnect"}));
       this.conn = null;
     },
@@ -279,6 +284,8 @@ export default {
         case "notifynewgame": {
           let gameInfo = data.data;
           this.setVname(gameInfo);
+          // TODO: remove patch on next line (options || "{}")
+          gameInfo.options = JSON.parse(gameInfo.options || "{}");
           const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
           let game = Object.assign(
             {
@@ -368,7 +375,10 @@ export default {
               if (L > 0) {
                 this.cursor["corr"] = res.games[L - 1].created;
                 let moreGames = res.games;
-                moreGames.forEach(g => g.type = "corr");
+                moreGames.forEach(g => {
+                  g.type = "corr";
+                  g.options = JSON.parse(g.options);
+                });
                 this.decorate(moreGames);
                 this.corrGames = this.corrGames.concat(moreGames);
               }
@@ -384,7 +394,11 @@ export default {
           if (L > 0) {
             // Add "-1" because IDBKeyRange.upperBound includes boundary
             this.cursor["live"] = localGames[L - 1].created - 1;
-            localGames.forEach(g => g.type = "live");
+            localGames.forEach(g => {
+              g.type = "live";
+              // TODO: remove patch on next line (options || "{}")
+              g.options = JSON.parse(g.options || "{}");
+            });
             this.decorate(localGames);
             this.liveGames = this.liveGames.concat(localGames);
           }
@@ -400,6 +414,8 @@ export default {
             this.cursor["import"] = importGames[L - 1].created - 1;
             importGames.forEach(g => {
               g.type = "import";
+              // TODO: remove following patch (options || "{}")
+              g.options = JSON.parse(g.options || "{}");
               this.setVname(g);
             });
             this.importGames = this.importGames.concat(importGames);