ai对话流式vue2

### 构建 Vue 2 流式 AI 对话交互的最佳实践 为了实现在 Vue 2 中构建流式 AI 对话交互，可以借鉴 Spring Boot WebFlux 和 Server-Sent Events (SSE) 的组合方式[^1]。尽管原生 Vue 3 提供了更好的支持，但在 Vue 2 中也可以通过一些技巧来模拟类似的流式效果。 #### 技术选型 由于 Vue 2 不像 Vue 3 那样内置对现代特性（如 Composition API 或更高效的事件处理机制）的支持，因此需要依赖第三方库或自定义逻辑来实现 SSE 客户端功能[^2]。以下是具体的技术路径： 1. **后端部分** 使用 Spring Boot WebFlux 结合 SSE 来推送数据到前端。这一步已经在引用中提到过，不再赘述。 2. **前端部分** 在 Vue 2 中可以通过 `EventSource` 接口监听来自服务器的实时消息，并将其逐步渲染至页面上。 --- #### 示例代码 ##### 后端配置（Spring Boot） 以下是一个简单的 Spring Boot 控制器示例，用于发送 SSE 数据： ```java import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import reactor.core.publisher.Flux; @RestController public class AiController { @GetMapping(value = "/stream", produces = "text/event-stream") public Flux<String> streamResponse() { return Flux.just("Hello", " ", "World").delayElements(Duration.ofSeconds(1)); } } ``` 此控制器会每隔一秒向客户端发送一条消息。 --- ##### 前端实现（Vue 2） 在 Vue 2 中创建一个组件，利用 `EventSource` 处理流式数据并动态更新 DOM： ```javascript <template> <div> <h1>Ai Chat</h1> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: "", eventSource: null, }; }, mounted() { this.initSse(); }, beforeDestroy() { if (this.eventSource && this.eventSource.readyState === 1) { this.eventSource.close(); // 关闭连接以防内存泄漏 } }, methods: { initSse() { const url = "http://localhost:8080/stream"; // 替换为实际 URL this.eventSource = new EventSource(url); this.eventSource.onmessage = (event) => { const chunk = JSON.parse(event.data); // 解析服务端返回的数据 this.message += `${chunk}\n`; // 动态拼接内容 }; this.eventSource.onerror = () => { console.error("Error occurred while connecting to the server."); this.eventSource.close(); // 出错时关闭连接 }; }, }, }; </script> ``` 上述代码展示了如何通过 `EventSource` 实现实时接收数据并将每一段数据追加到视图中的过程。 --- #### 注意事项 - 如果目标环境不完全兼容 `EventSource`，可考虑引入 polyfill 库或者切换 WebSocket 协议作为替代方案。 - 确保前后端时间间隔一致，避免因网络延迟造成用户体验下降。 ---