From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 24 Mar 2020 12:41:58 +0000 (+0100)
Subject: Attempt to get rid of 'zombie Websocket' error
X-Git-Url: https://git.auder.net/js/pieces/bundles/doc/html/R.css?a=commitdiff_plain;h=882ec6fe88ac4a536dd25eca5fd50ff3d27f7994;p=vchess.git

Attempt to get rid of 'zombie Websocket' error
---

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 13eab11f..31718554 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -176,6 +176,7 @@ export default {
       // If newmove got no pingback, send again:
       opponentGotMove: false,
       connexionString: "",
+      socketCloseListener: 0,
       // Incomplete info games: show move played
       moveNotation: "",
       // Intervals from setInterval():
@@ -226,12 +227,12 @@ export default {
   },
   methods: {
     cleanBeforeDestroy: function() {
+      clearInterval(this.socketCloseListener);
       document.removeEventListener('visibilitychange', this.visibilityChange);
       if (!!this.askLastate) clearInterval(this.askLastate);
       if (!!this.retrySendmove) clearInterval(this.retrySendmove);
       if (!!this.clockUpdate) clearInterval(this.clockUpdate);
       this.conn.removeEventListener("message", this.socketMessageListener);
-      this.conn.removeEventListener("close", this.socketCloseListener);
       this.send("disconnect");
       this.conn = null;
     },
@@ -308,7 +309,16 @@ export default {
         encodeURIComponent(this.$route.path.match(/\/game\/[a-zA-Z0-9]+/)[0]);
       this.conn = new WebSocket(this.connexionString);
       this.conn.addEventListener("message", this.socketMessageListener);
-      this.conn.addEventListener("close", this.socketCloseListener);
+      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
+      );
       // Socket init required before loading remote game:
       const socketInit = callback => {
         if (this.conn.readyState == 1)
@@ -751,11 +761,6 @@ export default {
           break;
       }
     },
-    socketCloseListener: function() {
-      this.conn = new WebSocket(this.connexionString);
-      this.conn.addEventListener("message", this.socketMessageListener);
-      this.conn.addEventListener("close", this.socketCloseListener);
-    },
     updateCorrGame: function(obj, callback) {
       ajax(
         "/games",
diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index e60d982f..132c31ba 100644
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -253,6 +253,7 @@ export default {
       presetChalls: JSON.parse(localStorage.getItem("presetChalls") || "[]"),
       conn: null,
       connexionString: "",
+      socketCloseListener: 0,
       // Related to (killing of) self multi-connects:
       newConnect: {},
       killed: {}
@@ -306,7 +307,16 @@ export default {
     this.conn = new WebSocket(this.connexionString);
     this.conn.onopen = connectAndPoll;
     this.conn.addEventListener("message", this.socketMessageListener);
-    this.conn.addEventListener("close", this.socketCloseListener);
+    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
+    );
   },
   mounted: function() {
     ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => {
@@ -396,10 +406,10 @@ export default {
   },
   methods: {
     cleanBeforeDestroy: function() {
+      clearInterval(this.socketCloseListener);
       document.removeEventListener('visibilitychange', this.visibilityChange);
       window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
       this.conn.removeEventListener("message", this.socketMessageListener);
-      this.conn.removeEventListener("close", this.socketCloseListener);
       this.send("disconnect");
       this.conn = null;
     },
@@ -595,7 +605,7 @@ export default {
               // Do not set name or id: identity unknown yet
               this.people[sid] = { tmpIds: data.sockIds[sid] };
             else
-              Object.assign(this.people[s.sid].tmpIds, data.sockIds[sid]);
+              Object.assign(this.people[sid].tmpIds, data.sockIds[sid]);
             if (Object.values(data.sockIds[sid]).some(v => v.page == "/"))
               // Peer is in Hall
               this.send("askchallenges", { target: sid });
@@ -838,12 +848,6 @@ export default {
           break;
       }
     },
-    socketCloseListener: function() {
-      if (!this.conn) return;
-      this.conn = new WebSocket(this.connexionString);
-      this.conn.addEventListener("message", this.socketMessageListener);
-      this.conn.addEventListener("close", this.socketCloseListener);
-    },
     loadMoreCorr: function() {
       ajax(
         "/observedgames",
diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue
index 94035287..d1079ee4 100644
--- a/client/src/views/MyGames.vue
+++ b/client/src/views/MyGames.vue
@@ -55,7 +55,8 @@ export default {
       // hasMore == TRUE: a priori there could be more games to load
       hasMore: { live: true, corr: store.state.user.id > 0 },
       conn: null,
-      connexionString: ""
+      connexionString: "",
+      socketCloseListener: 0
     };
   },
   watch: {
@@ -75,7 +76,17 @@ export default {
       encodeURIComponent(this.$route.path);
     this.conn = new WebSocket(this.connexionString);
     this.conn.onmessage = this.socketMessageListener;
-    this.conn.onclose = this.socketCloseListener;
+    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
+    );
   },
   mounted: function() {
     const adjustAndSetDisplay = () => {
@@ -134,9 +145,9 @@ export default {
   },
   methods: {
     cleanBeforeDestroy: function() {
+      clearInterval(this.socketCloseListener);
       window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
       this.conn.removeEventListener("message", this.socketMessageListener);
-      this.conn.removeEventListener("close", this.socketCloseListener);
       this.conn.send(JSON.stringify({code: "disconnect"}));
       this.conn = null;
     },
@@ -228,11 +239,6 @@ export default {
         }
       }
     },
-    socketCloseListener: function() {
-      this.conn = new WebSocket(this.connexionString);
-      this.conn.addEventListener("message", this.socketMessageListener);
-      this.conn.addEventListener("close", this.socketCloseListener);
-    },
     showGame: function(game) {
       if (game.type == "live" || !game.myTurn) {
         this.$router.push("/game/" + game.id);