vue接收后端流式输出

### Vue 处理后端流式输出示例 在现代 Web 开发中，服务器发送事件（Server-Sent Events, SSE）是一种常见的技术，用于实现实时通信。通过 Vue.js 和后端配合，可以轻松实现流式数据的接收和展示。 #### 后端配置（基于 Semantic Kernel） 假设后端已经实现了流式输出功能，并使用 `InvokePromptStreamingAsync` 或 `InvokeStreamingAsync` 方法推送数据给前端[^1]。此时，后端会持续向客户端发送消息，直到完成整个流程或关闭连接。 以下是后端可能返回的数据格式： ```json data: {"message": "这是第一条消息"} data: {"message": "这是第二条消息"} ... ``` #### 前端 Vue 实现 以下是一个完整的 Vue 3 示例，展示了如何接收来自后端的流式输出： ##### 安装依赖 如果尚未安装 Axios 库，则可以通过 npm 进行安装： ```bash npm install axios ``` ##### 创建组件 创建一个名为 `StreamReceiver.vue` 的组件，具体代码如下： ```vue <template> <div class="stream-container"> <h2>实时流式输出</h2> <p>{{ streamedMessage }}</p> </div> </template> <script> import { ref, onMounted, onUnmounted } from 'vue'; import axios from 'axios'; export default { name: 'StreamReceiver', setup() { const streamedMessage = ref(''); let eventSource; const connectToStream = () => { eventSource = new EventSource('http://your-backend-url/stream-endpoint'); // 替换为实际 URL eventSource.onmessage = (event) => { const data = JSON.parse(event.data); streamedMessage.value += `${data.message}\n`; // 将接收到的消息追加到变量中 }; eventSource.onerror = (error) => { console.error('EventSource failed:', error); if (eventSource.readyState === EventSource.CLOSED) { disconnectFromStream(); } }; }; const disconnectFromStream = () => { if (eventSource && eventSource.readyState !== EventSource.CLOSED) { eventSource.close(); } }; onMounted(() => { connectToStream(); // 组件挂载时启动流监听 }); onUnmounted(() => { disconnectFromStream(); // 组件卸载时停止流监听 }); return { streamedMessage, }; }, }; </script> <style scoped> .stream-container { text-align: center; } </style> ``` 上述代码中，`EventSource` 是浏览器内置的对象，专门用来处理 SSE 数据流。当有新消息到达时，它会被解析并附加到页面上显示的内容中。 #### 关键点说明 1. **SSE 协议支持** 使用 `EventSource` 对象可以直接与后端建立持久化连接，无需手动管理 WebSocket 或轮询机制。 2. **错误处理** 如果发生网络中断或其他异常情况，应确保能够捕获错误并采取适当措施，比如重新连接或提示用户。 3. **性能优化** 随着时间推移，累积的消息可能会占用大量内存资源。因此建议定期清理旧记录或者仅保留最近若干条信息[^2]。 --- ###