feat：使用SSE实现轻量消息推送

upload-file-frontend/src/components/ShareFile/ShareFile.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { getSharedFiles, enableShare, getShareStatus, shareAddress, unShareFile } from '@/utils/api';
+import { getSharedFiles, enableShare, getShareStatus, shareAddress, unShareFile, subscribeSharedFiles, subscribeSystemEvent } from '@/utils/api';
 
 export default {
   name: 'ShareFile',
@@ -79,12 +79,15 @@ export default {
       protocol: 'IPv4',
       fileList: [],
       enableShare: false,
+      isAdmin: false,
     };
   },
   mounted() {
     this.fetchFiles();
     this.getShareStatus();
     this.getShareAddress();
+    this.subscribeSharedFiles();
+    this.subscribeSystemEvent();
   },
   methods: {
     async getShareAddress() {
@@ -109,6 +112,20 @@ export default {
         this.fileList = res.data;
       }
     },
+    subscribeSharedFiles() {
+      subscribeSharedFiles(() => {
+        this.fetchFiles();
+      });
+    },
+    subscribeSystemEvent() {
+      subscribeSystemEvent((event) => {
+        if (event.type === 'enableShare') {
+          this.fileList = [];
+          this.enableShare = event.data.enable;
+          this.fetchFiles();
+        }
+      });
+    },
 
     async downloadFile(file) {
       try {

upload-file-frontend/src/utils/api.js

@@ -1,4 +1,4 @@
-import { http, httpExtra } from './http';
+import { http, baseUrl, httpExtra } from './http';
 
 /**
  * 获取上传进度
@@ -269,6 +269,59 @@ const setPassword = (password) => {
     formData.append('password', password);
     return http.post("/config/setPassword", formData);
 }
+
+/**
+ * 订阅共享文件更新
+ * @param {Function} callback 文件更新的回调函数
+ * @returns {EventSource} 返回 EventSource 实例
+ */
+const subscribeSharedFiles = (callback) => {
+    const eventSource = new EventSource(`${baseUrl}/sse/subscribeSharedFiles`);
+
+    eventSource.addEventListener('sharedFileUpdate', (event) => {
+        callback(event.data);
+    });
+    
+    eventSource.onerror = (error) => {
+        console.error("SSE连接异常:", error);
+        if (eventSource.readyState === EventSource.CLOSED) {
+            console.log("连接已关闭");
+        }
+    };
+
+    return eventSource;
+};
+
+/**
+ * 订阅系统事件更新
+ * @param {Function} callback 文件更新的回调函数
+ * @returns {EventSource} 返回 EventSource 实例
+ */
+const subscribeSystemEvent = (callback) => {
+    const eventSource = new EventSource(`${baseUrl}/sse/subscribeSystemEvent`);
+
+    eventSource.addEventListener('systemEvent', (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            callback(data);
+        } catch (e) {
+            console.error('JSON解析失败:', e, '原始数据:', event.data);
+        }
+    });
+
+    eventSource.onmessage = (event) => {
+        console.log('[SSE] Received default message:', event.data);
+    };
+    
+    eventSource.onerror = (error) => {
+        console.error("SSE连接异常:", error);
+        if (eventSource.readyState === EventSource.CLOSED) {
+            console.log("连接已关闭");
+        }
+    };
+}
+
+
 export {
     getUploadProgress,
     createMultipartUpload,
@@ -289,5 +342,7 @@ export {
     setPassword,
     addSharedFile,
     deleteFile,
+    subscribeSharedFiles,
+    subscribeSystemEvent,
     httpExtra
 };

upload-file-frontend/src/utils/http.js

@@ -24,7 +24,6 @@ http.interceptors.response.use(
     response => {
         try {
             if (response.data && response.data.code !== 200) {
-                console.log(response.data);
                 Message.error(response.data.msg || '请求失败');
             }
             return response.data;