vue单项数据传输流式回复功能,post传值可关闭请求(@microsoft/fetch-event-source)

需求:实现一个类似于文心一言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返回的唯一标识。如有其他方案,请告知一起学习

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值