perf(判题结果): 全班一起交、判题排队时不再每人每 2 秒问一次结果

原来交上去 5 秒没结果就每 2 秒（流程图 3 秒）拉一次，分不清 WebSocket 断了还是队列长： 50 人一起交、队列排一分钟时每秒二十几个请求，全在和判题抢那两个核。 - 收到这一条的任何推送（服务端订阅时就回一帧当前状态）就认定 WebSocket 是通的，轮询退到 20 秒一次，只防推送丢失；连接断了才回快档，2 秒起按 1.5 倍退到 10 秒 - 拉失败不再永久停掉（掉线那几秒拉失败是常事），连着失败 5 次才放弃 - 页面在后台时不拉；比赛题目页、榜单、班级页的定时刷新也一样，切回来立刻补一次 - 代码判题和流程图评分共用 shared/composables/fallbackPoll.ts Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-16 14:37:08 +08:00
1 parent 593a409fca
commit 64994b9499
@@ -11,6 +11,7 @@ import { useLeaveStudents } from "shared/composables/leaveStudents"
 import { ContestStatus, LANGUAGE_FORMAT_VALUE } from "utils/constants"
 import { parseTime, secondsToDuration } from "utils/functions"
 import type { Submission } from "utils/types"
+import { useVisibleInterval } from "shared/composables/visibleInterval"

 /**
 * 老师的「全班情况」，考完叫「成绩」（设计稿「比赛重设计」老师两块）。学生看不到这一页。
@@ -43,7 +44,7 @@ async function load() {
 const running = computed(() => contestStore.contestStatus === ContestStatus.underway)
 const ended = computed(() => contestStore.contestStatus === ContestStatus.finished)

-const { pause, resume } = useIntervalFn(load, 15_000, { immediate: false })
+const { pause, resume } = useVisibleInterval(load, 15_000)
 watch(
  () => [contestStore.canEnter, running.value] as const,
  ([enter, run]) => {
@@ -7,6 +7,7 @@ import { useUserStore } from "shared/store/user"
 import { ContestStatus } from "utils/constants"
 import { parseTime, secondsToDuration } from "utils/functions"
 import RankMini from "../components/RankMini.vue"
+import { useVisibleInterval } from "shared/composables/visibleInterval"

 /**
 * 比赛页「题目」（设计稿「比赛重设计」B，用户选的）：一页放下。
@@ -24,12 +25,9 @@ const tone = useTone()
 const running = computed(() => contestStore.contestStatus === ContestStatus.underway)
 const ended = computed(() => contestStore.contestStatus === ContestStatus.finished)

-const { pause, resume } = useIntervalFn(
+const { pause, resume } = useVisibleInterval(
  () => contestStore.loadScoreboard(props.contestID),
  10_000,
-  {
-    immediate: false,
-  },
 )
 watch(
  () => [contestStore.canEnter, contestStore.contestStatus] as const,
@@ -8,6 +8,7 @@ import { ContestStatus } from "utils/constants"
 import { secondsToDuration } from "utils/functions"
 import { classLabel } from "oj/submission/utils"
 import UserName from "shared/components/UserName.vue"
+import { useVisibleInterval } from "shared/composables/visibleInterval"

 /**
 * 比赛排名（设计稿「比赛重设计」排行榜两块）。竞争感是用户要的（「我需要竞争」）：
@@ -26,12 +27,9 @@ const running = computed(() => contestStore.contestStatus === ContestStatus.unde
 const ended = computed(() => contestStore.contestStatus === ContestStatus.finished)

 const autoRefresh = ref(true)
-const { pause, resume } = useIntervalFn(
+const { pause, resume } = useVisibleInterval(
  () => contestStore.loadScoreboard(props.contestID),
  10_000,
-  {
-    immediate: false,
-  },
 )
 watch(
  () => [contestStore.canEnter, running.value, autoRefresh.value] as const,
@@ -1,10 +1,10 @@
-import { ref, computed, getCurrentScope, onScopeDispose } from "vue"
-import { useIntervalFn, useTimeoutFn } from "@vueuse/core"
+import { ref, computed } from "vue"
 import { getSubmission } from "oj/api"
 import { SubmissionStatus } from "utils/constants"
 import type { PendingAchievement, Submission } from "utils/types"
 import { useAchievementStore } from "shared/store/achievement"
 import { useSubmissionWebSocket, type SubmissionUpdate } from "shared/composables/websocket"
+import { useFallbackPoll } from "shared/composables/fallbackPoll"

 /**
 * 判题监控 Composable
@@ -15,33 +15,6 @@ export function useSubmissionMonitor() {
  const submissionId = ref("")
  const submission = ref<Submission>()

-  // ==================== 轮询机制 ====================
-  const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
-    async () => {
-      const id = submissionId.value
-      if (!id) return
-
-      try {
-        const res = await getSubmission(id)
-        // 请求在路上时换了题（reset）或者又交了一次：回来的是上一条，扔掉。
-        // 不扔的话上一道题判对了，会把新题标成已解决、弹点评
-        if (id !== submissionId.value) return
-        submission.value = res
-
-        const result = res.result
-        // 判题完成，停止轮询
-        if (result !== SubmissionStatus.judging && result !== SubmissionStatus.pending) {
-          pausePolling()
-        }
-      } catch (error) {
-        console.error("[SubmissionMonitor] 轮询失败:", error)
-        pausePolling()
-      }
-    },
-    2000,
-    { immediate: false },
-  )
-
  // ==================== WebSocket 处理 ====================
  const handleSubmissionUpdate = (data: SubmissionUpdate) => {
    // push_to_user 复用了 submission_update 这个 channel handler，
@@ -64,6 +37,8 @@ export function useSubmissionMonitor() {
      console.log("[SubmissionMonitor] 提交ID不匹配，忽略")
      return
    }
+    // 订阅后服务端立刻回的那一帧（还在排队也回）就算：WebSocket 是通的，轮询退到慢档
+    fallback.confirm()

    if (!submission.value) {
      submission.value = {} as Submission
@@ -76,7 +51,7 @@ export function useSubmissionMonitor() {
      console.log(`[SubmissionMonitor] 判题${data.status === "finished" ? "完成" : "出错"}`)

      // 停止轮询（WebSocket已成功）
-      pausePolling()
+      fallback.stop()
      // 结果已经到手，别让重连再去重放这条早就判完的订阅
      unsubscribe()

@@ -91,25 +66,23 @@ export function useSubmissionMonitor() {
  }

  // 初始化 WebSocket
-  const { connect, subscribe, unsubscribe, scheduleDisconnect, cancelScheduledDisconnect } =
+  const { connect, subscribe, unsubscribe, scheduleDisconnect, cancelScheduledDisconnect, status } =
    useSubmissionWebSocket(handleSubmissionUpdate)

-  // ==================== 轮询保底启动 ====================
-  const { start: startPollingFallback } = useTimeoutFn(
-    () => {
-      if (
-        submission.value &&
-        (submission.value.result === SubmissionStatus.judging ||
-          submission.value.result === SubmissionStatus.pending ||
-          submission.value.result === SubmissionStatus.submitting)
-      ) {
-        console.log("[SubmissionMonitor] WebSocket未及时响应，启动轮询保底")
-        resumePolling()
-      }
+  // ==================== 轮询兜底 ====================
+  const fallback = useFallbackPoll({
+    status,
+    poll: async () => {
+      const id = submissionId.value
+      if (!id) return true
+      const res = await getSubmission(id)
+      // 请求在路上时换了题（reset）或者又交了一次：回来的是上一条，扔掉。
+      // 不扔的话上一道题判对了，会把新题标成已解决、弹点评
+      if (id !== submissionId.value) return false
+      submission.value = res
+      return res.result !== SubmissionStatus.judging && res.result !== SubmissionStatus.pending
    },
-    5000,
-    { immediate: false },
-  )
+  })

  // ==================== 启动监控 ====================
  const startMonitoring = (id: string) => {
@@ -131,8 +104,8 @@ export function useSubmissionMonitor() {
    // 把各自那个早就判完的旧 submissionId 重新订阅一遍。
    subscribe(id)

-    // 5秒后启动轮询保底（防止WebSocket失败）
-    startPollingFallback()
+    // 轮询兜底：WebSocket 通的话 20 秒才问一次，不通才快拉（见 fallbackPoll.ts）
+    fallback.start()
  }

  /**
@@ -141,7 +114,7 @@ export function useSubmissionMonitor() {
   * 判完触发的「通过」处理会把**新题**标成已解决。提交本身照常判完落库，只是这边不再跟。
   */
  const reset = () => {
-    pausePolling()
+    fallback.stop()
    unsubscribe()
    // 连接由 store 持有，离开题目页组件卸了它也还在。和判完之后一样，空闲 15 分钟断开；
    // 不在这里立刻断，是因为刚交的那条判完之后还可能推成就过来
@@ -161,11 +134,6 @@ export function useSubmissionMonitor() {
    return judging.value || pending.value || submitting.value
  })

-  // ==================== 清理 ====================
-  // 现在由 submission store 持有（见 oj/store/submission.ts），store 不销毁就一直在；
-  // 用 onScopeDispose 是为了在组件里调用时照样能收尾
-  if (getCurrentScope()) onScopeDispose(pausePolling)
-
  return {
    // 状态
    submissionId,
@@ -179,7 +147,6 @@ export function useSubmissionMonitor() {

    // 方法
    startMonitoring,
-    pausePolling,
    reset,
  }
 }
@@ -14,6 +14,7 @@ import { getFlowchartScores, getFlowchartSubmission, submitFlowchart } from "oj/
 import { useProblemStore } from "oj/store/problem"
 import { useSubmissionStore } from "oj/store/submission"
 import { useFlowchartWebSocket, type FlowchartEvaluationUpdate } from "shared/composables/websocket"
+import { useFallbackPoll } from "shared/composables/fallbackPoll"
 import { useMyFlowchartStore } from "shared/store/myFlowchart"
 import { useUserStore } from "shared/store/user"
 import { useAchievementStore } from "shared/store/achievement"
@@ -50,8 +51,6 @@ export { isFlowchartPass }
 */
 export type FlowchartPhase = "idle" | "evaluating" | "done" | "failed"

-/** AI 评分比判题慢得多，轮询放缓一点 */
-const POLL_INTERVAL = 3000
 /** 到点还没结果就收手，别无限轮询下去 */
 const POLL_TIMEOUT = 3 * 60 * 1000

@@ -141,41 +140,6 @@ export const useFlowchartStore = defineStore("flowchart", () => {
  /** 正在跟的那一次是哪道题的，结算时再对一遍 */
  let monitoringProblemId: number | null = null

-  const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
-    async () => {
-      if (!monitoringId) {
-        pausePolling()
-        return
-      }
-      try {
-        const data = await getFlowchartSubmission(monitoringId)
-        if (data.status === 2) {
-          settle(data.id, {
-            ok: true,
-            score: data.aiScore ?? 0,
-            grade: data.aiGrade ?? "",
-          })
-        } else if (data.status === 3) {
-          settle(data.id, { ok: false })
-        }
-      } catch (error) {
-        console.error("[Flowchart] 轮询失败:", error)
-        pausePolling()
-      }
-    },
-    POLL_INTERVAL,
-    { immediate: false },
-  )
-
-  // WebSocket 正常时压根用不上轮询，先给它 5 秒，到点还没结果才开始拉
-  const { start: startPollingFallback, stop: stopPollingFallback } = useTimeoutFn(
-    () => {
-      if (monitoringId) resumePolling()
-    },
-    5000,
-    { immediate: false },
-  )
-
  const { start: startPollingDeadline, stop: stopPollingDeadline } = useTimeoutFn(
    () => {
      if (!monitoringId) return
@@ -191,8 +155,7 @@ export const useFlowchartStore = defineStore("flowchart", () => {
    monitoringId = ""
    monitoringProblemId = null
    unsubscribe()
-    pausePolling()
-    stopPollingFallback()
+    fallback.stop()
    stopPollingDeadline()
    loading.value = false
    // 连接挂在 store 上，离开题目页也不会跟着组件断。不立刻断：接着还可能再交一次，
@@ -252,6 +215,8 @@ export const useFlowchartStore = defineStore("flowchart", () => {
      useAchievementStore().enqueue(frame.achievements ?? [])
      return
    }
+    // 订阅后服务端立刻回一帧当前状态（还在评也回 evaluation_update）：WebSocket 是通的
+    if (monitoringId && data.submissionId === monitoringId) fallback.confirm()
    if (data.type === "flowchart_evaluation_completed") {
      settle(data.submissionId, {
        ok: true,
@@ -263,9 +228,27 @@ export const useFlowchartStore = defineStore("flowchart", () => {
    }
  }

-  const { connect, subscribe, unsubscribe, scheduleDisconnect, cancelScheduledDisconnect } =
+  const { connect, subscribe, unsubscribe, scheduleDisconnect, cancelScheduledDisconnect, status } =
    useFlowchartWebSocket(handleWebSocketMessage)

+  // WebSocket 通的话 20 秒才问一次，不通才快拉（见 fallbackPoll.ts）
+  const fallback = useFallbackPoll({
+    status,
+    poll: async () => {
+      if (!monitoringId) return true
+      const data = await getFlowchartSubmission(monitoringId)
+      if (data.status === 2) {
+        settle(data.id, { ok: true, score: data.aiScore ?? 0, grade: data.aiGrade ?? "" })
+        return true
+      }
+      if (data.status === 3) {
+        settle(data.id, { ok: false })
+        return true
+      }
+      return false
+    },
+  })
+
  // ==================== 提交 ====================
  /** 交一张图：Mermaid 给 AI 看、给缩略图画，结构树压缩后存着（载回画布、亮路径用） */
  async function submit(doc: FlowDoc) {
@@ -309,7 +292,7 @@ export const useFlowchartStore = defineStore("flowchart", () => {
        monitoringId = response.submissionId
        monitoringProblemId = problem.id
        subscribe(response.submissionId)
-        startPollingFallback()
+        fallback.start()
        startPollingDeadline()
      }
    } catch (error) {