vue单项数据传输流式回复功能,post传值可关闭请求(@microsoft/fetch-event-source)
vue实现单项传输流式答复功能
·
需求:实现一个类似于文心一言ai回复功能,一个字一个字往外蹦,不使用websocket还有什么其他方案呢?经过查询有一个 @microsoft/fetch-event-source单向传输协议(服务端传输客户端)。废话不多说,上代码
// 下载依赖
npm i @microsoft/fetch-event-source
// 页面引入
import { fetchEventSource } from "@microsoft/fetch-event-source";
// 使用
let that = this;
that.ctrlAbout = new AbortController();
let eventSourcepost = fetchEventSource('your-api', {
method: 'POST',
headers: {
"Accept": 'text/event-stream'
},
signal: that.ctrlAbout.signal,
body: JSON.stringify({
// your body参数
}),
onmessage(event) {
// 成功之后操作
this.,message += event.data
// 。。。。。
// 成功之后满足某些条件可以使用AbortController关闭连接
this.ctrlAbout.abort()
},
onerror() {
// 服务异常
},
onclose() {
// 服务关闭
},
})
注:代码仅供参考,如有问题请不吝赐教。如有其他方案,望告知,我学习。。。。。。。。
注:目前此插件不支持小程序,小程序可用websocket的。
注:该请求方法每次都会请求一次接口,多人会造成服务器压力,有一个代替方案:发送参数时可用post接口传参,返回一个参数唯一标识,再用eventSource进行get请求,携带post返回的唯一标识。如有其他方案,请告知一起学习
更多推荐
已为社区贡献1条内容
所有评论(0)