Skip to content

Commit 9dc92ab

Browse files
PhlexPlexicoPhlexPlexico
committed
Add in beginning of server-side event sending for live-score updates..
1 parent 9e9542b commit 9dc92ab

File tree

6 files changed

+97
-105
lines changed

6 files changed

+97
-105
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"vue": "^2.6.14",
1515
"vue-i18n": "^8.22.1",
1616
"vue-router": "^3.2.0",
17+
"vue-sse": "^2.5.2",
1718
"vuetify": "^2.2.11",
1819
"vuex": "^3.4.0"
1920
},

‎src/components/PlayerStatTable.vue

Lines changed: 61 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,6 @@
5353
"
5454
align="left"
5555
>
56-
<div class="text-caption" v-if="!isFinished">
57-
{{ $t("PlayerStats.RefreshData", { sec: countDownTimer }) }}
58-
<v-btn
59-
x-small
60-
color="secondary"
61-
@click="refreshStats"
62-
:disabled="countDownTimer >= 55"
63-
>
64-
{{ $t("PlayerStats.RefreshForce") }}
65-
</v-btn>
66-
</div>
67-
<div v-else />
6856
</div>
6957
</v-container>
7058
<v-data-table
@@ -127,25 +115,18 @@ export default {
127115
playerstats: [],
128116
isLoading: true,
129117
arrMapString: [{}],
130-
playerInterval: -1,
131-
countDownTimer: 60,
132118
allowRefresh: false,
133119
timeoutId: -1,
134120
isFinished: false,
135121
apiUrl: process.env?.VUE_APP_G5V_API_URL || "/api"
136122
};
137123
},
124+
sse: { cleanup: true, withCredentials: true, Polyfill: true, forcePolyfill: true },
138125
created() {
139126
// Template will contain v-rows/etc like on main Team page.
140127
this.GetMapPlayerStats();
141128
this.getMapString();
142129
},
143-
beforeDestroy() {
144-
if (!this.isFinished) {
145-
if (this.timeoutId != -1) clearInterval(this.timeoutId);
146-
if (this.playerInterval != -1) clearInterval(this.playerInterval);
147-
}
148-
},
149130
computed: {
150131
headers() {
151132
return [
@@ -258,76 +239,70 @@ export default {
258239
}
259240
},
260241
methods: {
242+
async handleMessage(message, tmp) {
243+
console.log(`Message ${message}, tmp is ${tmp}`);
244+
},
261245
async GetMapPlayerStats() {
262246
try {
263-
let res = await this.GetPlayerStats(this.match_id);
264-
let getMatchTeamIds = await this.GetMatchData(this.match_id);
265-
if (typeof res == "string") return;
266-
let allMapIds = [];
267-
let totalMatchTeam = [];
268-
let allTeamIds = [];
269-
res.filter(item => {
270-
let i = allMapIds.findIndex(x => x == item.map_id);
271-
let j = allTeamIds.findIndex(x => x == item.team_id);
272-
if (i <= -1) allMapIds.push(item.map_id);
273-
if (j <= -1) allTeamIds.push(item.team_id);
274-
return null;
275-
});
276-
allMapIds.forEach(map_id => {
277-
totalMatchTeam.push(
278-
res.filter(stats => {
279-
return stats.map_id == map_id;
280-
})
281-
);
282-
});
283-
this.playerstats = totalMatchTeam;
284-
await this.playerstats.forEach((matchStats, idx) => {
285-
matchStats.forEach(async (player, pIdx) => {
286-
if (player.roundsplayed > 0) {
287-
let getRating = this.GetRating(
288-
player.kills,
289-
player.roundsplayed,
290-
player.deaths,
291-
player.k1,
292-
player.k2,
293-
player.k3,
294-
player.k4,
295-
player.k5
296-
);
297-
let adr = this.GetADR(player);
298-
let hsp = this.GetHSP(player);
299-
let kdr = this.GetKDR(player);
300-
let fpr = this.GetFPR(player);
301-
let teamNum = player.team_id == getMatchTeamIds.team1_id ? 1 : 2;
302-
let newName =
303-
player.team_id == getMatchTeamIds.team1_id
304-
? getMatchTeamIds.team1_string
305-
: getMatchTeamIds.team2_string;
306-
this.$set(
307-
this.playerstats[idx][pIdx],
308-
"Team",
309-
teamNum + " " + newName
310-
);
311-
this.$set(this.playerstats[idx][pIdx], "rating", getRating);
312-
this.$set(this.playerstats[idx][pIdx], "adr", adr);
313-
this.$set(this.playerstats[idx][pIdx], "hsp", hsp);
314-
this.$set(this.playerstats[idx][pIdx], "kdr", kdr);
315-
this.$set(this.playerstats[idx][pIdx], "fpr", fpr);
316-
}
247+
let sseClient = await this.GetEventPlayerStats(this.match_id);
248+
sseClient.on("playerstats", async message => {
249+
let getMatchTeamIds = await this.GetMatchData(this.match_id);
250+
if (typeof message == "string") return;
251+
let allMapIds = [];
252+
let totalMatchTeam = [];
253+
let allTeamIds = [];
254+
message.filter(item => {
255+
let i = allMapIds.findIndex(x => x == item.map_id);
256+
let j = allTeamIds.findIndex(x => x == item.team_id);
257+
if (i <= -1) allMapIds.push(item.map_id);
258+
if (j <= -1) allTeamIds.push(item.team_id);
259+
return null;
317260
});
261+
allMapIds.forEach(map_id => {
262+
totalMatchTeam.push(
263+
message.filter(stats => {
264+
return stats.map_id == map_id;
265+
})
266+
);
267+
});
268+
this.playerstats = totalMatchTeam;
269+
await this.playerstats.forEach((matchStats, idx) => {
270+
matchStats.forEach(async (player, pIdx) => {
271+
if (player.roundsplayed > 0) {
272+
let getRating = this.GetRating(
273+
player.kills,
274+
player.roundsplayed,
275+
player.deaths,
276+
player.k1,
277+
player.k2,
278+
player.k3,
279+
player.k4,
280+
player.k5
281+
);
282+
let adr = this.GetADR(player);
283+
let hsp = this.GetHSP(player);
284+
let kdr = this.GetKDR(player);
285+
let fpr = this.GetFPR(player);
286+
let teamNum = player.team_id == getMatchTeamIds.team1_id ? 1 : 2;
287+
let newName =
288+
player.team_id == getMatchTeamIds.team1_id
289+
? getMatchTeamIds.team1_string
290+
: getMatchTeamIds.team2_string;
291+
this.$set(
292+
this.playerstats[idx][pIdx],
293+
"Team",
294+
teamNum + " " + newName
295+
);
296+
this.$set(this.playerstats[idx][pIdx], "rating", getRating);
297+
this.$set(this.playerstats[idx][pIdx], "adr", adr);
298+
this.$set(this.playerstats[idx][pIdx], "hsp", hsp);
299+
this.$set(this.playerstats[idx][pIdx], "kdr", kdr);
300+
this.$set(this.playerstats[idx][pIdx], "fpr", fpr);
301+
}
302+
});
303+
});
304+
if (getMatchTeamIds.end_time != null) this.isFinished = true;
318305
});
319-
if (getMatchTeamIds.end_time != null) this.isFinished = true;
320-
if (!this.isFinished && this.playerInterval == -1) {
321-
this.playerInterval = setInterval(async () => {
322-
this.isLoading = true;
323-
this.GetMapPlayerStats();
324-
this.getMapString();
325-
this.countDownTimer = 60;
326-
}, 60000);
327-
this.timeoutId = setInterval(() => {
328-
this.countDownTimer--;
329-
}, 1000);
330-
}
331306
} catch (error) {
332307
console.log("Our error: " + error);
333308
} finally {
@@ -363,23 +338,6 @@ export default {
363338
} catch (error) {
364339
console.log("String error " + error);
365340
}
366-
},
367-
async refreshStats() {
368-
clearInterval(this.timeoutId);
369-
clearInterval(this.playerInterval);
370-
this.countDownTimer = 60;
371-
this.playerInterval = setInterval(async () => {
372-
this.isLoading = true;
373-
this.GetMapPlayerStats();
374-
this.getMapString();
375-
this.countDownTimer = 60;
376-
}, 60000);
377-
this.timeoutId = setInterval(() => {
378-
this.countDownTimer--;
379-
}, 1000);
380-
this.GetMapPlayerStats();
381-
this.getMapString();
382-
return;
383341
}
384342
}
385343
};

‎src/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Vue from "vue";
2+
import VueSSE from "vue-sse";
23
import VueI18n from "vue-i18n";
34
import App from "./App.vue";
45
import "./registerServiceWorker";
@@ -13,6 +14,9 @@ Vue.mixin(api);
1314
// i18n
1415
Vue.use(VueI18n);
1516

17+
// Server Side Events
18+
Vue.use(VueSSE);
19+
1620
// Special thanks to FlowingSPDG for translations.
1721
const translations = require("./translations/translations.json");
1822

‎src/utils/api.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -805,6 +805,21 @@ export default {
805805
}
806806
return message;
807807
},
808+
async GetEventPlayerStats(matchid) {
809+
return this.$sse
810+
.create({
811+
url: `${process.env?.VUE_APP_G5V_API_URL ||
812+
"/api"}/playerstats/match/${matchid}/stream`,
813+
format: "json",
814+
withCredentials: true,
815+
polyfill: true
816+
})
817+
.on("error", err =>
818+
console.error("Failed to parse or lost connection:", err)
819+
)
820+
.connect(msg => console.log("Connected! " + msg))
821+
.catch(err => console.error("Failed make initial connection:", err));
822+
},
808823
async GetPlayerStatRecentMatches(steamid) {
809824
let res;
810825
let message;

‎vue.config.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ module.exports = {
22
transpileDependencies: ["vuetify"],
33
devServer: {
44
proxy: {
5-
"^/api": {
5+
"/api": {
66
target: "http://localhost:3301",
77
changeOrigin: true,
8+
ws: true,
89
pathRewrite: {
910
"^/api": ""
1011
}
1112
}
12-
}
13+
},
14+
compress: false
1315
}
1416
};

‎yarn.lock

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3159,6 +3159,11 @@ [email protected]:
31593159
resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
31603160
integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
31613161

3162+
event-source-polyfill@^1.0.22:
3163+
version "1.0.31"
3164+
resolved "https://registry.yarnpkg.com/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz#45fb0a6fc1375b2ba597361ba4287ffec5bf2e0c"
3165+
integrity sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==
3166+
31623167
eventemitter3@^4.0.0:
31633168
version "4.0.7"
31643169
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -6332,6 +6337,13 @@ vue-router@^3.2.0:
63326337
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.4.tgz#c453c0b36bc75554de066fefc3f2a9c3212aca70"
63336338
integrity sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ==
63346339

6340+
vue-sse@^2.5.2:
6341+
version "2.5.2"
6342+
resolved "https://registry.yarnpkg.com/vue-sse/-/vue-sse-2.5.2.tgz#428f088826b5ba4a0f3e3e0c9e8206578bf2cb72"
6343+
integrity sha512-HJu2JGEld2ez1Ko9ZhuTCTe563eq4qXESg1cjlS99pwMQ8COE5fAAtoJ4Lw/dr+K+1tLLBiFvvb98364YWZ2UQ==
6344+
dependencies:
6345+
event-source-polyfill "^1.0.22"
6346+
63356347
vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
63366348
version "4.1.3"
63376349
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"

0 commit comments

Comments
 (0)