diff --git a/src/components/SimpleUploader/globalUploader.vue b/src/components/SimpleUploader/globalUploader.vue index 96d80d3..cdefb1c 100755 --- a/src/components/SimpleUploader/globalUploader.vue +++ b/src/components/SimpleUploader/globalUploader.vue @@ -132,7 +132,7 @@ export default { // speedSmoothingFactor: 0.1, // progressCallbacksInterval: 500, maxChunkRetries: 3, // 最大重试次数 - simultaneousUploads: 5, // 并发上传数 + simultaneousUploads: 2, // 并发上传数 testChunks: true, // 是否开启服务器分片校验 // 服务器分片校验函数,秒传及断点续传基础 checkChunkUploadedByResponse: function (chunk, message) { @@ -204,7 +204,7 @@ export default { message(msg) { switch (msg.event) { case 'uploaderChunkSize': - this.onStorageTypeChange(msg.data) + this.onStorageTypeChange(msg.data.body) break case 'fileListScrollTop': this.fileListScrollTop = msg.data diff --git a/src/components/TaskProgress/index.vue b/src/components/TaskProgress/index.vue index 3332202..e94bcde 100644 --- a/src/components/TaskProgress/index.vue +++ b/src/components/TaskProgress/index.vue @@ -43,7 +43,6 @@ export default { }, watch: { data(val) { - console.log('data', val) this.dataList = val }, message(msg) { diff --git a/src/layout/index.vue b/src/layout/index.vue index bda9cbf..8139763 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -21,7 +21,7 @@ import ResizeMixin from './mixin/ResizeHandler' import { getToken } from '@/utils/auth' import AudioPreview from "@/components/preview/AudioPreview"; import globalUploader from '@/components/SimpleUploader/globalUploader.vue' -import { connectToSSE } from '@/sse/SSEClient' +import { initiateSSE } from '@/sse/SSEClient' export default { name: 'Layout', @@ -62,7 +62,7 @@ export default { if(getToken()){ this.isShow = window.pc; // 与服务器建立sse连接 - connectToSSE(this.$store.state.user.name) + initiateSSE(this.$store.state.user.name) if(this.$route.path.startsWith('/setting')){ this.isShow = true } diff --git a/src/sse/SSEClient.js b/src/sse/SSEClient.js index 9af1157..4e21cb1 100644 --- a/src/sse/SSEClient.js +++ b/src/sse/SSEClient.js @@ -1,92 +1,108 @@ import Bus from "@/assets/js/bus"; import _ from "lodash"; import store from "@/store"; -import {generateUUID} from "ant-design-vue/lib/vc-select/util"; +import { generateUUID } from "ant-design-vue/lib/vc-select/util"; let eventSource = null; let timer = null; let lastHeartbeat = new Date().getTime(); - const uuid = generateUUID(); -const throttledConnectSSE = _.throttle(username => { - if (typeof (EventSource) !== 'undefined') { - const url = `/api/events?username=${username}&uuid=${uuid}`; - eventSource = new EventSource(url); - eventSource.addEventListener('message', function (event) { - if (event.data === 'h') { - // 心跳包, 超过5s没有收到心跳包, 则关闭连接 - lastHeartbeat = new Date().getTime() - } else { - const msg = JSON.parse( event.data); - onMessage(msg) - } - }); - eventSource.addEventListener('error', function (event) { - eventSource.close() - connectToSSE(username); - }); - // 清除定时器 - if (timer) { - clearInterval(timer); - } - // 3s检测一次连接状态 - timer = setInterval(() => { - if (eventSource.readyState === 1) { - // 心跳包, 超过5s没有收到心跳包, 则关闭连接 - if (new Date().getTime() - lastHeartbeat > 5000) { - eventSource.close() - } - } - if (eventSource.readyState === 2) { - connectToSSE(username); - } - }, 3000); +const throttledConnectSSE = _.throttle((username) => { + if (typeof EventSource !== 'undefined') { + connectToSSE(username); } else { console.error('EventSource is not supported by the browser'); } }, 3000); -export function connectToSSE(username) { +function connectToSSE(username) { + const url = `/api/events?username=${username}&uuid=${uuid}`; + eventSource = new EventSource(url); + + eventSource.addEventListener('message', handleMessage); + eventSource.addEventListener('error', handleError.bind(null, username)); + startHeartbeatCheck(username); +} + +function handleMessage(event) { + if (event.data === 'h') { + lastHeartbeat = new Date().getTime(); + } else { + const msg = JSON.parse(event.data); + onMessage(msg); + } +} + +function handleError(username) { + eventSource.close(); throttledConnectSSE(username); } +function clearExistingTimer() { + if (timer) { + clearInterval(timer); + } +} + +function startHeartbeatCheck(username) { + clearExistingTimer(); + timer = setInterval(() => { + if (eventSource.readyState === 1 && new Date().getTime() - lastHeartbeat > 5000) { + eventSource.close(); + } + if (eventSource.readyState === 2) { + throttledConnectSSE(username); + } + }, 3000); +} + function onMessage(msg) { - const url = msg.url - if (url === 'synced') { - store.dispatch('updateMessage', {event: 'msg/synced', data: msg}) - } else if (url === 'taskProgress') { - store.dispatch('updateMessage', {event: 'msg/taskProgress', data: msg}) - } else if (url === 'uploaderChunkSize') { - store.dispatch('updateMessage', {event: 'uploaderChunkSize', data: msg.body}) + const { url, body } = msg; + const eventMapping = { + synced: 'msg/synced', + taskProgress: 'msg/taskProgress', + uploaderChunkSize: 'uploaderChunkSize', + }; + + if (eventMapping[url]) { + store.dispatch('updateMessage', { event: eventMapping[url], data: msg }); } else { - store.dispatch('updateMessage', {event: 'msg/file/change', data: msg}) - if ('operationFile' === url) { - let doc = msg.body - if (doc.code === 0) { - Bus.notify({ - title: `${doc.operation}成功`, - dangerouslyUseHTMLString: true, - message: ` -
form:
-${doc.from}
- to:
-${doc.to}
- from:
+${from}
+ to:
+${to}
+