From f63ae9226c4669035b6a369935b42dd6f1fb60ef Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Mon, 24 Feb 2025 10:41:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20sse=E6=B5=81=E5=BC=8F=E5=AF=B9=E8=AF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |  1 +
 pnpm-lock.yaml                            |  8 ++
 src/router/modules/demo.ts                |  8 +-
 src/views/demo/sseFetch.vue               | 97 +++++++++++++++++++++++
 src/views/demo/{sse.vue => sseNative.vue} |  6 +-
 5 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 src/views/demo/sseFetch.vue
 rename src/views/demo/{sse.vue => sseNative.vue} (90%)

diff --git a/package.json b/package.json
index 3f43701..2b9ca89 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "preinstall": "npx only-allow pnpm"
     },
     "dependencies": {
+        "@microsoft/fetch-event-source": "^2.0.1",
         "@pureadmin/descriptions": "^1.2.1",
         "@pureadmin/table": "^3.2.0",
         "@pureadmin/utils": "^2.4.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af8cd3f..cd60d90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@microsoft/fetch-event-source':
+        specifier: ^2.0.1
+        version: 2.0.1
       '@pureadmin/descriptions':
         specifier: ^1.2.1
         version: 1.2.1(echarts@5.5.1)(element-plus@2.8.0(vue@3.4.38(typescript@5.5.4)))(typescript@5.5.4)
@@ -806,6 +809,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@microsoft/fetch-event-source@2.0.1':
+    resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -4093,6 +4099,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@microsoft/fetch-event-source@2.0.1': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index dcc5ef5..cfd75c6 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -69,8 +69,12 @@ const titleArr = [
         title: 'item固定高度的虚拟列表实现',
     },
     {
-        key: 'sse',
-        title: 'ai对话流式显示文本',
+        key: 'sseNative',
+        title: 'ai对话流式显示文本(浏览器原生)',
+    },
+    {
+        key: 'sseFetch',
+        title: 'ai对话流式显示文本(使用fetch-event-source)',
     },
 ];
 
diff --git a/src/views/demo/sseFetch.vue b/src/views/demo/sseFetch.vue
new file mode 100644
index 0000000..a6e3e65
--- /dev/null
+++ b/src/views/demo/sseFetch.vue
@@ -0,0 +1,97 @@
+<template>
+    <base-container>
+        <h2 class="pt-5 pb-5">流式显示文本(需先启动node-local-server项目作为本地服务端)</h2>
+        <div>
+            <el-button
+                type="primary"
+                @click="handleSend"
+                >问个问题</el-button
+            >
+            <el-button
+                type="primary"
+                @click="handleClose"
+                >停止</el-button
+            >
+        </div>
+        <div
+            class="wordbox"
+            ref="containerRef"
+        >
+            <span
+                id="content"
+                v-html="content"
+            ></span>
+        </div>
+    </base-container>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+
+const content = ref('');
+const controller = ref(null);
+
+const updateContent = (event) => {
+    console.log(event);
+    console.log('sse收到消息');
+    content.value += event.data + '<br/>';
+    console.log(content.value, 'content内容');
+    if (event.data === 'End') {
+        /**
+         * 注释部分为前端手动关闭sse连接的实现
+         * 这里不受冻关闭原因是@microsoft/fetch-event-source这个框架可以正确检测后段服务端是否关闭了连接，所以不需要手动关闭
+         * 浏览器原生new EventSource()方法无法检测后端服务端是否关闭连接，所以需要手动关闭(每次后段关闭都会进onerror事件)
+         * 具体请看另外一个demo sseNative.vue
+         */
+        // handleClose();
+    }
+    nextTick(() => {
+        scrollToBottom();
+    });
+};
+
+const handleError = (event) => {
+    console.log(event);
+    console.log('sse连接出错');
+};
+
+const handleClose = () => {
+    console.log('sse关闭');
+    // controller.value.abort();
+};
+
+const containerRef = ref(null);
+const scrollToBottom = () => {
+    containerRef.value.scrollTop = containerRef.value.scrollHeight;
+};
+
+const handleSend = () => {
+    controller.value = new AbortController();
+    const signal = controller.value.signal;
+    /** @microsoft/fetch-event-source该框架支持POST方法，并且支持传参 */
+    fetchEventSource('http://localhost:3000/events', {
+        method: 'POST',
+        body: JSON.stringify({
+            question: '你好，我是小雅，请问有什么可以帮助您？',
+            token: 'xxxx',
+        }),
+        onmessage: updateContent,
+        onerror: handleError,
+        onclose: handleClose,
+        signal,
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.wordbox {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    margin: 20px 0;
+    border-radius: 5px;
+}
+</style>
diff --git a/src/views/demo/sse.vue b/src/views/demo/sseNative.vue
similarity index 90%
rename from src/views/demo/sse.vue
rename to src/views/demo/sseNative.vue
index 0813d35..57dd2be 100644
--- a/src/views/demo/sse.vue
+++ b/src/views/demo/sseNative.vue
@@ -37,10 +37,11 @@ const updateContent = (event) => {
     content.value += event.data + '<br/>';
     console.log(content.value, 'content内容');
     if (event.data === 'End') {
+        /** 浏览器原生EventSource，必须服务器主动告诉浏览器关闭连接，否则会进onerror事件，并一直重连 */
         handleClose();
     }
     nextTick(() => {
-        // scrollToBottom();
+        scrollToBottom();
     });
 };
 
@@ -50,6 +51,7 @@ const handleError = (event) => {
 };
 
 const handleClose = () => {
+    console.log('sse关闭');
     eventSource.value.close();
 };
 
@@ -63,8 +65,6 @@ const handleSend = () => {
     eventSource.value.addEventListener('message', updateContent);
     eventSource.value.addEventListener('error', handleError);
 };
-
-onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>