vue3对接流式接口

### Vue3 实现流式接口对接 在现代Web开发中，服务器发送事件（Server-Sent Events, SSE）是一种允许服务器向客户端推送实时更新的技术。通过SSE可以在不刷新页面的情况下获取来自服务器的数据流。 #### 使用 `fetchEventSource` 插件库实现流式接口对接 为了简化处理逻辑，在Vue3项目里可以借助于微软提供的 `@microsoft/fetch-event-source` 库来方便地管理与后端服务之间的连接以及数据传输过程[^2]。 安装依赖： ```bash npm install @microsoft/fetch-event-source ``` 配置入口文件(main.js): ```javascript import { createApp } from 'vue' import App from './App.vue' // 导入 fetchEventSource 函数用于发起请求 import { fetchEventSource } from '@microsoft/fetch-event-source' const app = createApp(App) app.config.globalProperties.$fetchEventSource = fetchEventSource app.mount('#app') ``` 创建组件 (StreamComponent.vue) 来展示聊天记录并模拟打字效果: ```html <template> <div class="chat-container"> <!-- 显示消息列表 --> <ul id="message-list"></ul> <!-- 用户输入框 --> <input type="text" v-model="newMessageText"/> <!-- 发送按钮触发新对话 --> <button @click="sendMessage">Send</button> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import axios from "axios"; let newMessageText = ref('') function sendMessage() { const url = '/api/chat'; // 假设这是API路径 $fetchEventSource(url, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ message: newMessageText.value }), onopen(response){ console.log(`Connection opened with status ${response.status}`); }, onmessage(event){ let data = event.data; if(data === "[DONE]") return; try{ data = JSON.parse(data); addMessageToUI(data); // 将收到的消息添加到界面中显示出来 } catch(e){ console.error("Failed to parse incoming data as JSON", e); } }, async onclose(){ console.warn('The connection was closed by the server.'); } }); } function addMessageToUI(messageObject){ var ul = document.getElementById("message-list"); setTimeout(() => { var li = document.createElement("li"); li.textContent += `${messageObject.content}`; ul.appendChild(li); // Simulate typing effect here... }, Math.random()*800 + 200); // 随机延迟时间以模仿真实场景下的响应速度差异 } </script> ``` 此示例展示了如何利用 `fetchEventSource` 方法建立持久化的HTTP连接，并监听从服务器传来的增量更新。每当有新的文本片段到达时就会被追加至当前视图底部形成连续滚动的效果。