fetch 流式读取

src/util/http_util.js

@@ -706,8 +706,7 @@ let post_machineWriting = (url, data, headers = {}) => {
         fetch(url, {
             method: "POST",
             body: typeof data == "object" ? JSON.stringify(data) : data,
-            headers:
-            {
+            headers: {
                 'apiKey': '7838fab88cde479d84d710d3d2453276',
                 'Content-Type': 'application/json'
             }
@@ -731,23 +730,8 @@ let post_machineWriting = (url, data, headers = {}) => {
             .catch(err => reject(err));
     })
 }
-let httpSSERequest = (url, success, error) => {
-    if (typeof (EventSource) !== "undefined") {
-        var eventSource = new EventSource(url);
-        eventSource.onmessage = function (event) {
-            success(event.data);
-        }
-        eventSource.addEventListener('error', function (event) {
-            error("错误：" + event);
-        });
-        eventSource.addEventListener('open', function (event) {
-            error("建立连接：" + event);
-        });
-    }
-    else {
-        error("抱歉，您的浏览器不支持 server-sent 事件 ...");
-    }
-}
+
+//#region oss
 /**
  * oss文件上传
  * @param {*} url 
@@ -785,6 +769,14 @@ let uploadOSS = (filename, bucket, file) => {
         })
     })
 }
+/**
+ * 带有进度条的oss文件上传
+ * @param {*} filename 
+ * @param {*} bucket 
+ * @param {*} file 
+ * @param {*} progressFunction 
+ * @returns 
+ */
 let uploadOSSProgress = (filename, bucket, file, progressFunction) => {
     return new Promise((resolve, reject) => {
         fetch(`api/rest/file/presign?filename=${filename}&bucket=${bucket}`, {
@@ -824,8 +816,83 @@ let uploadOSSProgress = (filename, bucket, file, progressFunction) => {
             reject({ err: err });
         });
     });
-
 };
+//#endregion
+
+//#region sse支持
+/**
+ * 原生sse的api
+ * @param {*} url 
+ * @param {*} success 
+ * @param {*} error 
+ */
+let httpSSERequest = (url, success, error) => {
+    if (typeof (EventSource) !== "undefined") {
+        var eventSource = new EventSource(url);
+        eventSource.onmessage = function (event) {
+            success(event.data);
+        }
+        eventSource.addEventListener('error', function (event) {
+            error("错误：" + event);
+        });
+        eventSource.addEventListener('open', function (event) {
+            error("建立连接：" + event);
+        });
+    }
+    else {
+        error("抱歉，您的浏览器不支持 server-sent 事件 ...");
+    }
+}
+
+/**
+ * 通过fetch去流式读取
+ * @param {*} url 
+ * @param {*} data 
+ * @param {*} options 
+ */
+let fetchEventSource = (url, data, options = {}) => {
+    // 发送 POST 请求
+    fetch(url, {
+        method: "get",
+        // body: typeof data == "object" ? JSON.stringify(data) : data,
+        timeout: 0,
+        dataType: "text/event-stream",
+        headers: new Headers(addHeaders(headers))
+    }).then(response => {
+        // 检查响应是否成功
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        // 返回一个可读流
+        options.onopen && options.onopen();
+        return response.body;
+    }).then(body => {
+        // disableLoading();
+        const reader = body.getReader();
+        // 读取数据流
+        const push = () => {
+            return reader.read().then(({ done, value }) => {
+                // 检查是否读取完毕
+                if (done) {
+                    console.log('已传输完毕');
+                    options.onclose && options.onclose();
+                    return;
+                }
+                // 处理每个数据块
+                // console.log('收到的数据:', value);
+                options.onmessage && options.onmessage(new TextDecoder().decode(value));
+                // 继续读取下一个数据块
+                return push();
+            });
+        }
+        // 开始读取数据流
+        return push();
+    }).catch(error => {
+        console.error('Fetch error:', error);
+        options.error && options.error(error);
+    });
+}
+//#endregion
 
 export {
     get,
@@ -868,5 +935,6 @@ export {
     post_machineWriting,
     httpSSERequest,
     uploadOSS,
-    uploadOSSProgress
+    uploadOSSProgress,
+    fetchEventSource
 }
\ No newline at end of file

src/view/home.vue

@@ -77,7 +77,7 @@
 import "../assets/css/home.css";
 // import jh_bg from "../assets/img/main/logo-bg.png";
 // import jh from "/static/img/main/logo.png";
-import { endLoading, get, post, httpSSERequest } from "../util/http_util";
+import { endLoading, get, post, httpSSERequest, fetchEventSource } from "../util/http_util";
 import { queryDictItem } from '../api/dictitem';
 import Push from 'push.js'
 import dayjs from 'dayjs';
@@ -272,17 +272,24 @@ export default {
         const weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
         this.myDate.week = weekList[dayjs().get('day')]
 
-        // httpSSERequest("http://localhost:8081/api_ws/stream-sse", (data) => {
+        fetchEventSource("api_ws/stream-sse", {}, {
+            onopen: () => {
+                console.log("打开");
+            },
+            onclose: () => {
+                console.log("关闭");
+            },
+            onmessage: (value) => {
+                let msg = value.split('\n');
+                console.log(value);
+            }
+        });
+
+        // httpSSERequest("api_ws/stream-sse", (data) => {
         //     console.log(data)
         // }, (err) => {
         //     console.log(err)
         // });
-
-        httpSSERequest("api_ws/stream-sse", (data) => {
-            console.log(data)
-        }, (err) => {
-            console.log(err)
-        });
     },
     computed: {
         userInfo() {