X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FMyGames.vue;h=3c3b9b5aa9dbe632fdb33c1db176394e49ddb309;hb=2c5d7b20742b802d9c47916915c1114bcfc9a9c3;hp=60783941ff005005a2ec1dff3decb7cee385a173;hpb=7617c334b43d2f5fff40cbec72127ed30e5867c0;p=vchess.git diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue index 60783941..3c3b9b5a 100644 --- a/client/src/views/MyGames.vue +++ b/client/src/views/MyGames.vue @@ -53,26 +53,40 @@ export default { corr: Number.MAX_SAFE_INTEGER }, // hasMore == TRUE: a priori there could be more games to load - hasMore: { live: true, corr: true }, + hasMore: { live: true, corr: store.state.user.id > 0 }, conn: null, - connexionString: "" + connexionString: "", + socketCloseListener: 0 }; }, + watch: { + $route: function(to, from) { + if (to.path != "/mygames") this.cleanBeforeDestroy(); + } + }, created: function() { + window.addEventListener("beforeunload", this.cleanBeforeDestroy); // Initialize connection this.connexionString = params.socketUrl + - "/?sid=" + - this.st.user.sid + - "&id=" + - this.st.user.id + - "&tmpId=" + - getRandString() + + "/?sid=" + this.st.user.sid + + "&id=" + this.st.user.id + + "&tmpId=" + getRandString() + "&page=" + 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 = () => { @@ -123,18 +137,20 @@ export default { } } ); - } else { - this.loadMore( - "live", - () => this.loadMore("corr", adjustAndSetDisplay) - ); - } + } else this.loadMore("live", adjustAndSetDisplay); }); }, beforeDestroy: function() { - this.conn.send(JSON.stringify({code: "disconnect"})); + this.cleanBeforeDestroy(); }, methods: { + cleanBeforeDestroy: function() { + clearInterval(this.socketCloseListener); + window.removeEventListener("beforeunload", this.cleanBeforeDestroy); + this.conn.removeEventListener("message", this.socketMessageListener); + this.conn.send(JSON.stringify({code: "disconnect"})); + this.conn = null; + }, setDisplay: function(type, e) { this.display = type; localStorage.setItem("type-myGames", type); @@ -172,6 +188,7 @@ export default { }); }, socketMessageListener: function(msg) { + if (!this.conn) return; const data = JSON.parse(msg.data); let gamesArrays = { "corr": this.corrGames, @@ -222,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); @@ -252,16 +264,18 @@ export default { game.players[0].sid == this.st.user.sid ? game.players[1].sid : game.players[0].sid; - this.conn.send( - JSON.stringify( - { - code: "mabort", - gid: game.id, - // NOTE: target might not be online - target: oppsid - } - ) - ); + if (!!this.conn) { + this.conn.send( + JSON.stringify( + { + code: "mabort", + gid: game.id, + // NOTE: target might not be online + target: oppsid + } + ) + ); + } } else if (!game.deletedByWhite || !game.deletedByBlack) { // Set score if game isn't deleted on server: @@ -281,7 +295,7 @@ export default { } }, loadMore: function(type, cb) { - if (type == "corr") { + if (type == "corr" && this.st.user.id > 0) { ajax( "/completedgames", "GET", @@ -305,7 +319,7 @@ export default { GameStorage.getNext(this.cursor["live"], localGames => { const L = localGames.length; if (L > 0) { - // Add "-1" because IDBKeyRange.upperBound seems to include boundary + // Add "-1" because IDBKeyRange.upperBound includes boundary this.cursor["live"] = localGames[L - 1].created - 1; localGames.forEach(g => g.type = "live"); this.decorate(localGames);