X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Findex.js;h=12bcf64450e3001717d9af98d482bcbd3f4daeed;hb=3ed62725fe47e395793cf952403d61fc9f347eee;hp=a05ad475a95dbd3b435063f8af122a262f80d15f;hpb=1d184b4c016a645228251ce984d4c980e60420b0;p=vchess.git diff --git a/public/javascripts/index.js b/public/javascripts/index.js index a05ad475..12bcf644 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -1,24 +1,9 @@ -const url = socketUrl; -// random enough (TODO: function) -const sid = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase(); -const conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); - -conn.onmessage = msg => { - const data = JSON.parse(msg.data); - if (data.code == "counts") - //V.counts = data.counts; - Vue.set(V, "counts", data.counts); - else if (data.code == "increase") - V.counts[data.vname]++; - else if (data.code == "decrease") - V.counts[data.vname]--; -} - -let V = new Vue({ +new Vue({ el: "#indexPage", data: { counts: {}, curPrefix: "", + conn: null, }, computed: { sortedCounts: function () { @@ -37,6 +22,28 @@ let V = new Vue({ }); }, }, + created: function() { + const url = socketUrl; + // random enough (TODO: function) + const sid = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase(); + this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); + const socketMessageListener = msg => { + const data = JSON.parse(msg.data); + if (data.code == "counts") + this.counts = data.counts; + else if (data.code == "increase") + this.counts[data.vname]++; + else if (data.code == "decrease") + this.counts[data.vname]--; + }; + const socketCloseListener = () => { + this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); + this.conn.addEventListener('message', socketMessageListener); + this.conn.addEventListener('close', socketCloseListener); + }; + this.conn.onmessage = socketMessageListener; + this.conn.onclose = socketCloseListener; + }, mounted: function() { // Handle key stroke document.onkeydown = event => {