抛弃轮询，使用websocket获取任务进度;部分优化;去除残留的条件判断;修复去除临时本子时加载不存在的预览图(同步更新)

2023-12-28 16:34:54 +08:00 · 2023-12-28 16:34:54 +08:00 · f4b94a66b4
commit f4b94a66b4
parent 75d5b7ec67
4 changed files with 90 additions and 121 deletions
--- a/src/components/DashBoard.vue
+++ b/src/components/DashBoard.vue
@ -35,7 +35,7 @@

  <el-dialog title="查询本子" v-model="chosenGallery" width="100%">
    <el-image v-show='chosenGallery.thumb_link !== undefined' style="float: right; width: 250px; height: 250px" fit="contain"
-              :src="'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + chosenGallery.thumb_link"/>
+              :src="chosenGallery.thumb_link !== undefined ? 'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + chosenGallery.thumb_link: ''"/>
    <table>
      <tr>本子名字:{{chosenGallery.name}}</tr>
      <tr>本子页数:{{chosenGallery.pages}}</tr>
--- a/src/components/OnlineReader.vue
+++ b/src/components/OnlineReader.vue
@ -93,7 +93,6 @@ function set_current_page(page){
                  :preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)" loading="lazy"/> <br>
        {{lengthPerPage * index + i + 1}}
      </div>
-
    </el-scrollbar>

    <!--五页以下-->
--- a/src/components/Side.vue
+++ b/src/components/Side.vue
@ -103,14 +103,11 @@
      </span>
    </div>
    <template #footer>
-      <el-button @click="downloadTask(currentGallery.download)" :disabled="currentGallery.status !== '下载完成' || currentGallery.mode === 2"
-                 size="large">下载</el-button>
-      <el-button @click="deleteGallery(currentGallery.gid)" :disabled="currentGallery.status !== '下载完成'"
-                 size="large">删除</el-button>
+      <el-button @click="downloadTask(currentGallery.download)" :disabled="currentGallery.status !== '下载完成'" size="large">下载</el-button>
+      <el-button @click="deleteGallery(currentGallery.gid)" :disabled="currentGallery.status !== '下载完成'" size="large">删除</el-button>
      <el-button @click="changeGalleryCollect(currentGallery.gid, currentGallery.isCollect)" :disabled="currentGallery.status !== '下载完成'"
                 size="large">{{currentGallery.isCollect ? '取消收藏' : '收藏'}}</el-button>
-      <el-button @click="readOnlineGallery(currentGallery)" :disabled="currentGallery.status !== '下载完成' || currentGallery.mode === 1"
-                 size="large">在线看</el-button>
+      <el-button @click="readOnlineGallery(currentGallery)" size="large">在线看</el-button>
    </template>
  </el-dialog>

@ -124,8 +121,6 @@ import axios from "axios";
 import {ElMessage} from "element-plus";
 import OnlineReader from "./OnlineReader.vue";

-let GalleryManagePrefix = "https://downloader.lionwebsite.xyz/GalleryManage/"
-
 //输入
 let inputNode = ref(null)
 //是否正在编辑页数
--- a/src/store/index.js
+++ b/src/store/index.js
@ -6,32 +6,15 @@ const BaseUrl = "https://downloader.lionwebsite.xyz/"
 const GalleryManageUrl = BaseUrl + "GalleryManage"

 const actions = {
-    updateGalleryTasks(context, type){
+    updateGalleryTasks(context){
        axios.get(GalleryManageUrl, {
            params:{
-                type,
-                AuthCode: state.AuthCode
+                AuthCode: state.AuthCode,
+                type: 'all'
            }
        }).then((res) => {
-            if(res.data.result === "success") {
-                let tasks = JSON.parse(res.data.data)
-                if (type === "all" && state.galleryRefreshTimer === 0) {         //判断是否有未下载完成的本子以及定时更新是否开启
-                    for (let i = tasks.length - 1; i > tasks.length - 11; i--)  //从后往前遍历十个本子,查看是否有未下载完成的本子
-                        if (tasks[i].status !== "下载完成") {
-                            state.galleryRefreshTimer = setInterval(() => {
-                                context.dispatch("updateGalleryTasks", "undone").then()
-                            }, 20000)
-                            break
-                        }
-                }
-                context.commit("_updateGalleryTasks", {tasks, type})
-            }
-
-            else if(type === 'undone') {
-                context.dispatch("updateGalleryTasks", "all").then()
-                clearInterval(state.galleryRefreshTimer)
-                state.galleryRefreshTimer = 0
-            }
+            if(res.data.result === "success")
+                context.commit("_updateGalleryTasks", JSON.parse(res.data.data))
        })
    },
    postGalleryTask(context, data){
@ -43,17 +26,12 @@ const actions = {
                ElMessage("提交成功")
                context.commit("_setChosenGallery", {gallery: false,
                                                     resolution: data.targetResolution})
-                if(state.galleryRefreshTimer === 0)
-                    state.galleryRefreshTimer = setInterval(() => {
-                        context.dispatch("updateGalleryTasks", "undone").then()
-                    }, 20000)
            }
-            else{
+            else
                if(res.data.data)
                    ElMessage(res.data.data)
                else
                    ElMessage("提交失败")
-            }
        })
    },
    queryGalleryTask(context, link){
@ -79,14 +57,31 @@ const actions = {
                context.commit("_authed", {AuthCode, ...data})
                //初始化
                context.dispatch("loadWeekUsedAmount").then()
-                context.dispatch("updateGalleryTasks", "all").then(() => confirmCurrentTask(context.state))
-
-                //手机不需要设置宽度
+                context.dispatch("updateGalleryTasks").then(() => confirmCurrentTask(context.state))
+                context.dispatch("initWebsocket").then()
            }
            else
                context.commit("_unAuthed")
        })
    },
+    initWebsocket(context){
+        state.websocket = new WebSocket("wss://downloader.lionwebsite.xyz/ws/")
+        state.websocket.onopen = () => {
+            state.websocket.send("DownloaderWebsocket")
+        }
+
+        state.websocket.onmessage = (event) => {
+            let message = JSON.parse(event.data)
+
+            switch (message.type){
+                case "updateTasks":
+                    context.commit("_updateGalleryTaskProceeding", message.data)
+                    break
+                case "fullUpdate":
+                    context.dispatch("updateGalleryTasks").then()
+            }
+        }
+    },
    loadWeekUsedAmount(context){
        axios.get(GalleryManageUrl + "/weekUsedAmount", {
            params: {
@ -183,95 +178,71 @@ const mutations = {
        state.collectGallery[index].isCollect = false
        state.collectGallery.splice(index, 1)
    },
-    _updateGalleryTasks(state, data){
-        let {tasks, type} = data
-        if(type === 'all') {
-            state.totalGalleryTask.splice(0)
-            state.collectGallery.slice(0)
-            state.downloadGallery.splice(0)
+    _updateGalleryTasks(state, tasks){
+        state.totalGalleryTask.splice(0)
+        state.collectGallery.slice(0)
+        state.downloadGallery.splice(0)

-            tasks.forEach((task) => {
-                //处理名字
-                task.shortName = getShortname(task.name)
-                task.thumb_link = GalleryManageUrl + "/ehThumbnail?path=" + task.thumb_link
+        tasks.forEach((task) => {
+            //处理名字
+            task.shortName = getShortname(task.name)
+            task.thumb_link = GalleryManageUrl + "/ehThumbnail?path=" + task.thumb_link

-                //处理进度相关
-                switch (task.status) {
-                    case "已提交":
-                        task.progress = "已提交"
-                        break;
-                    case "下载中":
-                        task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
-                        break;
-                    case "下载完成":
-                        task.progress = "下载完成"
-                        task.download = GalleryManageUrl + "/file/" + encodeURI(task.name) + ".zip?AuthCode=" + state.AuthCode + "&gid=" + task.gid
-                        break;
-                    case "压缩中":
-                        task.progress = "压缩中"
-                        break
-                }
+            //处理进度相关
+            switch (task.status) {
+                case "已提交":
+                case "压缩中":
+                    task.progress = task.status
+                    break;
+                case "下载中":
+                    task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
+                    break;
+                case "下载完成":
+                    task.progress = task.status
+                    task.download = GalleryManageUrl + "/file/" + encodeURI(task.name) + ".zip?AuthCode=" + state.AuthCode + "&gid=" + task.gid
+                    break;
+            }

-                //处理时间戳
-                task.createTimeDisplay = new Date(task.createTime * 1000).toLocaleString("zh")
+            //处理时间戳
+            task.createTimeDisplay = new Date(task.createTime * 1000).toLocaleString("zh")

-                //处理是否收藏
-                if('isCollect' in task)
-                    state.collectGallery.push(task)
-                else
-                    task.isCollect = false
+            //处理是否收藏
+            if('isCollect' in task)
+                state.collectGallery.push(task)
+            else
+                task.isCollect = false

-                //处理是否下载
-                if(task.downloader === state.userId)
-                    state.downloadGallery.push(task)
+            //处理是否下载
+            if(task.downloader === state.userId)
+                state.downloadGallery.push(task)

-                state.totalGalleryTask.push(task)
-            })
-        } else {
-            let tempArray = Array.from(state.totalGalleryTask)
-            state.totalGalleryTask.splice(0)
-            let preDeleteIndex
-            tempArray.forEach((task) => {
-                preDeleteIndex = -1
-                if(task.status !== "下载完成")
-                    for(let i=0; i < tasks.length; i++)
-                        if(tasks[i] !== undefined && tasks[i].name === task.name) {
-                            preDeleteIndex = i
-                            task.status = tasks[i].status
-                            task.proceeding = tasks[i].proceeding
-                            if (task.proceeding === 0)
-                                task.progress = task.status
-                            else
-                                task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
-                        }
+            state.totalGalleryTask.push(task)
+        })

-                if(preDeleteIndex !== -1)
-                    delete tasks[preDeleteIndex]
-                state.totalGalleryTask.push(task)
-            })
-        }
-
-        switch (state.sortType) {
-            case "name":
-                state.totalGalleryTask = state.totalGalleryTask.sort((before, after) => {
-                    return before.name > after.name ? 1: -1
-                })
-                break
-            case "shortName":
-                state.totalGalleryTask = state.totalGalleryTask.sort((before, after) => {
-                    return before.shortName > after.shortName ? 1: -1
-                })
-                break
-            case "createTime":
-                state.totalGalleryTask = state.totalGalleryTask.sort((before, after) => {
-                    return before.createTime - after.createTime
-                })
-        }
+        sortTasks(state)
        if(state.isAuth && !state.loadComplete){
            state.loadComplete = true
            ElMessage("加载完成")
        }
    },
+    _updateGalleryTaskProceeding(state, tasks){
+        let galleries = Array.from(state.totalGalleryTask)
+        state.totalGalleryTask.splice(0)
+        galleries.forEach((gallery) => {
+            if(gallery.status !== '下载完成')
+                tasks.forEach((task) => {
+                    if(task.gid === gallery.gid){
+                        gallery.status = status[task.status]
+                        gallery.proceeding = task.proceeding
+                        if(gallery.status === '下载中')
+                            gallery.progress = (Math.round((gallery.proceeding / gallery.pages) * 100)).toString() + "%"
+                        else
+                            gallery.progress = gallery.status
+                    }
+                })
+            state.totalGalleryTask.push(gallery)
+        })
+    },
    _changePage(state, targetPage){
        state.page = targetPage
    },
@ -352,7 +323,7 @@ const mutations = {
            state.chosenGallery.createTimeDisplay = "等待下载完成后再查看"
            state.chosenGallery.progress = "已提交"
            state.chosenGallery.downloader = state.userId
-            state.chosenGallery.downloader = state.userId
+            state.chosenGallery.thumb_link = GalleryManageUrl + "/ehThumbnail?path=" + state.chosenGallery.thumb_link
            state.totalGalleryTask.push(state.chosenGallery)
            state.downloadGallery.push(state.chosenGallery)
        }
@ -397,6 +368,8 @@ const mutations = {
 }

 const state = {
+    websocket: {},                                 //websocket
+
    totalGalleryTask: [],                    //存放本子数据的数组
    chosenGallery: false,                    //准备下载的本子
    thumbnailGallery: {},                    //缩略图本子
@ -528,7 +501,7 @@ function sortTasks(state){
            })
            break
        case "createTime":
-            state.currentTasks =  state.currentTasks.sort((before, after) => {
+            state.currentTasks = state.currentTasks.sort((before, after) => {
                return before.createTime - after.createTime
            })
    }
@ -541,4 +514,6 @@ function deleteTask(tasks, key, value){
                tasks[j].splice(i, 1)
                break
            }
-}
+}
+
+let status = ['已提交', '下载中', '等待压缩', '压缩中', '下载完成']