使用fetchEventSource
参考git源码:https://github.com/Azure/fetch-event-source/tree/main
本地联通 发现数据并没有流式输出:vue代理需要关闭compress
如下:
javascript
devServer:{
proxy:{},
compress:false
}
安装插件
javascript
npm install @microsoft/fetch-event-source
引入插件
javascript
import { fetchEventSource } from "@microsoft/fetch-event-source";
vue关键代码:
javascript
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