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

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

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index b7199a7..4f27f79 100644 (file)
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -282,7 +282,8 @@ export default {
       presetChalls: JSON.parse(localStorage.getItem("presetChalls") || "[]"),
       conn: null,
       connexionString: "",
-      socketCloseListener: 0,
+      reopenTimeout: 0,
+      reconnectTimeout: 0,
       // Related to (killing of) self multi-connects:
       newConnect: {}
     };
@@ -317,39 +318,35 @@ export default {
         id: my.id,
         name: my.name,
         tmpIds: {
-          tmpId: { page: "/", focus: true }
+          [tmpId]: { page: "/", focus: true }
         }
       }
     );
-    const connectAndPoll = () => {
-      this.send("connect");
-      this.send("pollclientsandgamers");
-      if (!!this.$route.query["challenge"]) {
-        // Automatic challenge sending, for tournaments
-        this.loadNewchallVariant(
-          () => {
-            Object.assign(
-              this.newchallenge,
-              {
-                fen: "",
-                vid:
-                  this.st.variants
-                  .find(v => v.name == this.$route.query["variant"])
-                  .id,
-                to: this.$route.query["challenge"],
-                color: this.$route.query["color"] || '',
-                cadence: this.$route.query["cadence"],
-                options: {},
-                memorize: false
-              }
-            );
-            window.doClick("modalNewgame");
-          },
-          this.$route.query["variant"]
-        );
-      }
-    };
-    // Initialize connection
+    if (!!this.$route.query["challenge"]) {
+      // Automatic challenge sending, for tournaments
+      this.loadNewchallVariant(
+        () => {
+          Object.assign(
+            this.newchallenge,
+            {
+              fen: "",
+              vid:
+                this.st.variants
+                .find(v => v.name == this.$route.query["variant"])
+                .id,
+              to: this.$route.query["challenge"],
+              color: this.$route.query["color"] || '',
+              cadence: this.$route.query["cadence"],
+              options: {},
+              memorize: false
+            }
+          );
+          window.doClick("modalNewgame");
+        },
+        this.$route.query["variant"]
+      );
+    }
+    // Connexion string won't change if disconnect/reconnect
     this.connexionString =
       params.socketUrl +
       "/?sid=" + this.st.user.sid +
@@ -358,19 +355,7 @@ export default {
       "&page=" +
       // Hall: path is "/" (TODO: could be hard-coded as well)
       encodeURIComponent(this.$route.path);
-    this.conn = new WebSocket(this.connexionString);
-    this.conn.onopen = connectAndPoll;
-    this.conn.addEventListener("message", this.socketMessageListener);
-    this.socketCloseListener = setInterval(
-      () => {
-        if (this.conn.readyState == 3) {
-          this.conn.removeEventListener("message", this.socketMessageListener);
-          this.conn = new WebSocket(this.connexionString);
-          this.conn.addEventListener("message", this.socketMessageListener);
-        }
-      },
-      1000
-    );
+    this.openConnection();
   },
   mounted: function() {
     document.getElementById("peopleWrap")
@@ -466,13 +451,36 @@ export default {
     this.cleanBeforeDestroy();
   },
   methods: {
+    openConnection: function() {
+      const connectAndPoll = () => {
+        this.send("connect");
+        this.send("pollclientsandgamers");
+      };
+      // Initialize connection
+      this.conn = new WebSocket(this.connexionString);
+      this.conn.onopen = () => {
+        this.reconnectTimeout = 250;
+        connectAndPoll();
+      };
+      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);
       document.removeEventListener('visibilitychange', this.visibilityChange);
       window.removeEventListener('focus', this.onFocus);
       window.removeEventListener('blur', this.onBlur);
       window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
-      this.conn.removeEventListener("message", this.socketMessageListener);
+      clearTimeout(this.reopenTimeout);
       this.send("disconnect");
       this.conn = null;
     },