重构异步任务更新方式，使用 Http 替代 websocket

2026-04-23 11:34:27 +08:00 · 2025-03-03 19:00:10 +08:00
parent 8369e18bf0
commit ed063a1d9d
22 changed files with 308 additions and 541 deletions
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/web/src/views/mobile/pages/ImageDall.vue
@@ -133,7 +133,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 import { Delete } from "@element-plus/icons-vue";
 import { httpGet, httpPost } from "@/utils/http";
 import Clipboard from "clipboard";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { getSessionId } from "@/store/session";
 import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast } from "vant";
@@ -174,7 +174,6 @@ const styles = [
  { text: "自然", value: "natural" },
 ];
 const params = ref({
-  client_id: getClientId(),
  quality: qualities[0].value,
  size: sizes[0].value,
  style: styles[0].value,
@@ -191,6 +190,7 @@ const showModelPicker = ref(false);

 const runningJobs = ref([]);
 const finishedJobs = ref([]);
+const allowPulling = ref(true); // 是否允许轮询
 const router = useRouter();
 const power = ref(0);
 const dallPower = ref(0); // 画一张 DALL 图片消耗算力
@@ -220,17 +220,6 @@ onMounted(() => {
      showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
    });

-  store.addMessageHandler("dall", (data) => {
-    if (data.channel !== "dall" || data.clientId !== getClientId()) {
-      return;
-    }
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1;
-      fetchFinishJobs(1);
-    }
-    fetchRunningJobs();
-  });
-
  // 获取模型列表
  httpGet("/api/dall/models")
    .then((res) => {
@@ -257,6 +246,12 @@ const initData = () => {
      isLogin.value = true;
      fetchRunningJobs();
      fetchFinishJobs(1);
+
+      setInterval(() => {
+        if (allowPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
    })
    .catch(() => {
      loading.value = false;
@@ -267,6 +262,12 @@ const fetchRunningJobs = () => {
  // 获取运行中的任务
  httpGet(`/api/dall/jobs?finish=0`)
    .then((res) => {
+      if (runningJobs.value.length !== res.data.items.length) {
+        fetchFinishJobs(1);
+      }
+      if (res.data.items.length === 0) {
+        allowPulling.value = false;
+      }
      runningJobs.value = res.data.items;
    })
    .catch((e) => {
@@ -333,7 +334,10 @@ const generate = () => {
    .then(() => {
      showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
      power.value -= dallPower.value;
-      fetchRunningJobs();
+      allowPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -255,7 +255,7 @@ import { showConfirmDialog, showFailToast, showImagePreview, showNotify, showSuc
 import { httpGet, httpPost } from "@/utils/http";
 import Compressor from "compressorjs";
 import { getSessionId } from "@/store/session";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { Delete } from "@element-plus/icons-vue";
 import { showLoginDialog } from "@/utils/libs";
@@ -282,7 +282,6 @@ const models = [
 ];
 const imgList = ref([]);
 const params = ref({
-  client_id: getClientId(),
  task_type: "image",
  rate: rates[0].value,
  model: models[0].value,
@@ -310,6 +309,8 @@ const isLogin = ref(false);
 const prompt = ref("");
 const store = useSharedStore();
 const clipboard = ref(null);
+const taskPulling = ref(true);
+const downloadPulling = ref(false);

 onMounted(() => {
  clipboard.value = new Clipboard(".copy-prompt");
@@ -327,21 +328,23 @@ onMounted(() => {
      isLogin.value = true;
      fetchRunningJobs();
      fetchFinishJobs(1);
+
+      setInterval(() => {
+        if (taskPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
+
+      setInterval(() => {
+        if (downloadPulling.value) {
+          page.value = 1;
+          fetchFinishJobs(1);
+        }
+      }, 5000);
    })
    .catch(() => {
      // router.push('/login')
    });
-
-  store.addMessageHandler("mj", (data) => {
-    if (data.channel !== "mj" || data.clientId !== getClientId()) {
-      return;
-    }
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1;
-      fetchFinishJobs(1);
-    }
-    fetchRunningJobs();
-  });
 });

 onUnmounted(() => {
@@ -362,6 +365,10 @@ getSystemInfo()

 // 获取运行中的任务
 const fetchRunningJobs = (userId) => {
+  if (!isLogin.value) {
+    return;
+  }
+
  httpGet(`/api/mj/jobs?finish=0&user_id=${userId}`)
    .then((res) => {
      const jobs = res.data.items;
@@ -381,6 +388,14 @@ const fetchRunningJobs = (userId) => {
        }
        _jobs.push(jobs[i]);
      }
+      if (runningJobs.value.length !== _jobs.length) {
+        page.value = 1;
+        downloadPulling.value = true;
+        fetchFinishJobs(1);
+      }
+      if (_jobs.length === 0) {
+        taskPulling.value = false;
+      }
      runningJobs.value = _jobs;
    })
    .catch((e) => {
@@ -394,11 +409,16 @@ const error = ref(false);
 const page = ref(0);
 const pageSize = ref(10);
 const fetchFinishJobs = (page) => {
+  if (!isLogin.value) {
+    return;
+  }
+
  loading.value = true;
  // 获取已完成的任务
  httpGet(`/api/mj/jobs?finish=1&page=${page}&page_size=${pageSize.value}`)
    .then((res) => {
      const jobs = res.data.items;
+      let hasDownload = false;
      for (let i = 0; i < jobs.length; i++) {
        if (jobs[i].type === "upscale" || jobs[i].type === "swapFace") {
          jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/600/q/75";
@@ -406,13 +426,23 @@ const fetchFinishJobs = (page) => {
          jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/480/q/75";
        }

+        if (jobs[i]["img_url"] === "" && jobs[i].progress === 100) {
+          hasDownload = true;
+        }
+
        if (jobs[i].type !== "upscale" && jobs[i].progress === 100) {
          jobs[i]["can_opt"] = true;
        }
      }
+
+      if (page === 1) {
+        downloadPulling.value = hasDownload;
+      }
+
      if (jobs.length < pageSize.value) {
        finished.value = true;
      }
+
      if (page === 1) {
        finishedJobs.value = jobs;
      } else {
@@ -480,7 +510,6 @@ const uploadImg = (file) => {

 const send = (url, index, item) => {
  httpPost(url, {
-    client_id: getClientId(),
    index: index,
    channel_id: item.channel_id,
    message_id: item.message_id,
@@ -491,7 +520,9 @@ const send = (url, index, item) => {
    .then(() => {
      showSuccessToast("任务推送成功，请耐心等待任务执行...");
      power.value -= mjActionPower.value;
-      fetchRunningJobs();
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);
@@ -525,7 +556,10 @@ const generate = () => {
    .then(() => {
      showToast("绘画任务推送成功，请耐心等待任务执行");
      power.value -= mjPower.value;
-      fetchRunningJobs();
+      taskPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -175,7 +175,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 import { Delete } from "@element-plus/icons-vue";
 import { httpGet, httpPost } from "@/utils/http";
 import Clipboard from "clipboard";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { getSessionId } from "@/store/session";
 import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast } from "vant";
@@ -211,7 +211,6 @@ const upscaleAlgArr = ref([
 const showUpscalePicker = ref(false);

 const params = ref({
-  client_id: getClientId(),
  width: 1024,
  height: 1024,
  sampler: samplers.value[0].value,
@@ -229,6 +228,7 @@ const params = ref({

 const runningJobs = ref([]);
 const finishedJobs = ref([]);
+const allowPulling = ref(true); // 是否允许轮询
 const router = useRouter();
 // 检查是否有画同款的参数
 const _params = router.currentRoute.value.params["copyParams"];
@@ -260,17 +260,6 @@ onMounted(() => {
    .catch((e) => {
      showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
    });
-
-  store.addMessageHandler("sd", (data) => {
-    if (data.channel !== "sd" || data.clientId !== getClientId()) {
-      return;
-    }
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1;
-      fetchFinishJobs(1);
-    }
-    fetchRunningJobs();
-  });
 });

 onUnmounted(() => {
@@ -286,6 +275,12 @@ const initData = () => {
      isLogin.value = true;
      fetchRunningJobs();
      fetchFinishJobs(1);
+
+      setInterval(() => {
+        if (allowPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
    })
    .catch(() => {
      loading.value = false;
@@ -309,6 +304,14 @@ const fetchRunningJobs = () => {
        }
        _jobs.push(jobs[i]);
      }
+
+      if (runningJobs.value.length !== _jobs.length) {
+        fetchFinishJobs(1);
+      }
+
+      if (runningJobs.value.length === 0) {
+        allowPulling.value = false;
+      }
      runningJobs.value = _jobs;
    })
    .catch((e) => {
@@ -375,7 +378,10 @@ const generate = () => {
    .then(() => {
      showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
      power.value -= sdPower.value;
-      fetchRunningJobs();
+      allowPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);