使用fetchEventSource
参考git源码:https://github.com/Azure/fetch-event-source/tree/main
本地联通 发现数据并没有流式输出:vue代理需要关闭compress
如下:
devServer:{proxy:{},compress:false }
安装插件
npm install @microsoft/fetch-event-source
引入插件
import { fetchEventSource } from "@microsoft/fetch-event-source";
vue关键代码:
connectSse(){const ctrl = new AbortController();fetchEventSource('/api/v1/sse',{method: 'POST',mode: 'no-cors',headers: {'Content-Type': 'application/json',},body: JSON.stringify({data:[this.searchData]}),signal: ctrl.signal,onopen(response){// 成功连接时回调console.log('连接成功',response)},onmessage(msg) {// 服务器返回消息回调 返回{ data,event,id,retry } ,data即服务器返回数据if (msg.event == '') {// 进行连接正常的操作流程let result = JSON.parse(msg.data)// 将需要展示的数据更新到vue的data中,当然如下this.showData肯定赋值不上,需要将this 指向一个变量,用变量接受数据即可,以下只是展示this.showData += result.content}if (msg.event === 'close') {ctrl.abort()}},onerror(err) {throw new err()}})},
研发阶段 需要配置nginx