From 86ef51c16518963ddbd72be73df78bb291049dc2 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 20 Feb 2025 17:39:15 +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

---
 src/router/modules/demo.ts |  4 ++
 src/views/demo/sse.vue     | 80 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/views/demo/sse.vue

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index 96bd5ec..dcc5ef5 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -68,6 +68,10 @@ const titleArr = [
         key: 'virtualList',
         title: 'item固定高度的虚拟列表实现',
     },
+    {
+        key: 'sse',
+        title: 'ai对话流式显示文本',
+    },
 ];
 
 // @/views/demo/**/*.vue
diff --git a/src/views/demo/sse.vue b/src/views/demo/sse.vue
new file mode 100644
index 0000000..0813d35
--- /dev/null
+++ b/src/views/demo/sse.vue
@@ -0,0 +1,80 @@
+<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 { onMounted, ref, nextTick } from 'vue';
+
+const eventSource = ref(null);
+const content = ref('');
+
+const updateContent = (event) => {
+    console.log(event);
+    console.log('sse收到消息');
+    content.value += event.data + '<br/>';
+    console.log(content.value, 'content内容');
+    if (event.data === 'End') {
+        handleClose();
+    }
+    nextTick(() => {
+        // scrollToBottom();
+    });
+};
+
+const handleError = (event) => {
+    console.log(event);
+    console.log('sse连接出错');
+};
+
+const handleClose = () => {
+    eventSource.value.close();
+};
+
+const containerRef = ref(null);
+const scrollToBottom = () => {
+    containerRef.value.scrollTop = containerRef.value.scrollHeight;
+};
+
+const handleSend = () => {
+    eventSource.value = new EventSource('http://localhost:3000/events');
+    eventSource.value.addEventListener('message', updateContent);
+    eventSource.value.addEventListener('error', handleError);
+};
+
+onMounted(() => {});
+</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>