1.优化游戏实时对局/admin/game/live页面卡顿的问题

This commit is contained in:
2026-05-26 13:42:34 +08:00
parent ae7af24565
commit 3a2af4d7c2
3 changed files with 95 additions and 51 deletions

View File

@@ -200,7 +200,7 @@
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import createAxios from '/@/utils/axios'
@@ -268,6 +268,8 @@ const serverSkewSeconds = ref(0)
/** 每秒递增,驱动派彩剩余秒本地刷新 */
const clockTick = ref(0)
let clockTimer: number | null = null
let payoutStuckRefreshTimer: number | null = null
let fallbackPollTimer: number | null = null
const wsLoading = ref(false)
const wsReady = ref(false)
@@ -327,6 +329,10 @@ function handleWsPayload(raw: unknown): void {
mergeLiveSnapshot(parsed.data as anyObj)
return
}
if (event === 'admin.live.opened') {
void loadSnapshot()
return
}
if (event === 'jackpot.hit' && parsed.data && typeof parsed.data === 'object') {
const jackpotData = parsed.data as anyObj
const hits = Array.isArray(jackpotData.hits) ? jackpotData.hits : []
@@ -340,6 +346,14 @@ function handleWsPayload(raw: unknown): void {
if (typeof periodData.server_time === 'number') {
syncServerClock(periodData.server_time)
}
const status = typeof periodData.status === 'string' ? periodData.status : ''
const periodNo = typeof periodData.period_no === 'string' ? periodData.period_no : ''
const currentNo = typeof snapshot.record?.period_no === 'string' ? snapshot.record.period_no : ''
if (status === 'betting' && periodNo !== '' && periodNo !== currentNo) {
void loadSnapshot()
} else if (status === 'finished' && snapshot.is_payout_phase) {
void loadSnapshot()
}
}
}
@@ -783,12 +797,40 @@ const countdownParts = computed(() => {
return { bet, draw, payout }
})
/** 派彩倒计时从 >0 变为 0 时主动拉 HTTP 快照 */
watch(payoutRemainingLive, (remain, prev) => {
if (!snapshot.is_payout_phase || remain !== 0) {
return
}
if (prev !== null && prev !== undefined && prev > 0) {
schedulePayoutEndRefresh(400)
}
})
function schedulePayoutEndRefresh(delayMs: number): void {
if (payoutStuckRefreshTimer !== null) {
window.clearTimeout(payoutStuckRefreshTimer)
}
payoutStuckRefreshTimer = window.setTimeout(() => {
payoutStuckRefreshTimer = null
if (!snapshot.is_payout_phase) {
return
}
void loadSnapshot()
}, delayMs)
}
onMounted(async () => {
updateIsMobile()
window.addEventListener('resize', updateIsMobile)
clockTimer = window.setInterval(() => {
clockTick.value++
}, 1000)
fallbackPollTimer = window.setInterval(() => {
if (snapshot.is_payout_phase || snapshot.maintenance_ui) {
void loadSnapshot()
}
}, 5000)
await loadSnapshot()
await reloadWsConfig()
connectWs()
@@ -801,6 +843,14 @@ onUnmounted(() => {
window.clearInterval(clockTimer)
clockTimer = null
}
if (fallbackPollTimer !== null) {
window.clearInterval(fallbackPollTimer)
fallbackPollTimer = null
}
if (payoutStuckRefreshTimer !== null) {
window.clearTimeout(payoutStuckRefreshTimer)
payoutStuckRefreshTimer = null
}
})
</script>