vue像后端发送流式请求

### Vue 中实现向后端发送流式请求 在现代 Web 开发中，前端通过 WebSocket 或 Server-Sent Events (SSE) 技术可以实现实时数据交互。以下是基于 Vue 的具体实现方式。 #### 使用 SSE 实现流式请求 Server-Sent Events 是一种单向通信协议，允许服务器主动推送消息到客户端。以下是一个简单的 Vue 组件示例： ```javascript <template> <div> <h3>接收来自后端的流式数据</h3> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: "", eventSource: null, }; }, mounted() { this.eventSource = new EventSource("http://localhost:8080/stream"); // 后端接口地址 this.eventSource.onmessage = (event) => { this.message += `${event.data}\n`; // 将接收到的数据追加到显示区域 }; this.eventSource.onerror = () => { console.error("EventSource failed."); this.eventSource.close(); }; }, beforeDestroy() { if (this.eventSource) { this.eventSource.close(); // 关闭连接以防内存泄漏 } }, }; </script> ``` 上述代码展示了如何使用 `EventSource` 对象来监听后端返回的消息[^1]。每次有新消息到达时，都会触发 `onmessage` 方法并将数据更新至页面上。 #### 使用 WebSocket 实现双向流式请求 如果需要更复杂的场景支持（如双向通信），可以选择 WebSocket。下面是一段基于 Vue 和 WebSocket 的简单例子： ```javascript <template> <div> <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="输入并按回车键发送..." /> <ul> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> </div> </template> <script> export default { data() { return { inputMessage: "", messages: [], socket: null, }; }, created() { this.socket = new WebSocket("ws://localhost:8080/websocket"); // 替换为实际 URL this.socket.onopen = () => { console.log("WebSocket 连接已打开"); }; this.socket.onmessage = (event) => { const receivedMsg = JSON.parse(event.data); this.messages.push(`Received: ${receivedMsg.text}`); }; this.socket.onclose = () => { console.warn("WebSocket 已关闭..."); }; this.socket.onerror = (error) => { console.error("WebSocket 错误:", error); }; }, methods: { sendMessage() { if (!this.inputMessage.trim()) return; this.socket.send(JSON.stringify({ text: this.inputMessage })); this.messages.push(`Sent: ${this.inputMessage}`); this.inputMessage = ""; }, }, destroyed() { if (this.socket && this.socket.readyState === WebSocket.OPEN) { this.socket.close(); } }, }; </script> ``` 此代码片段创建了一个 WebSocket 链接，并实现了基本的信息收发功能。当用户按下 Enter 键时会调用 `sendMessage()` 函数将文本传递给服务端；而每当从服务端获取新的信息，则将其添加到列表底部供查看。 #### 总结说明 无论是采用 SSE 还是 WebSocket 方案，在 Vue 应用程序里都可以轻松完成与 Spring Boot 后端之间的流式通讯需求。这两种方法各有优劣——前者适合只读型应用场合下的轻量级解决方案，后者则适用于更加复杂互动环境中的强健架构设计。