ai回复功能请求开发

需求:实现一个类似于ai回复功能,一个字一个字往外蹦的效果
实现方案:

1.可以通过正常方式请求全部内容,通过js,定时器控制输出,速度,模拟ai回复效果
2.通过eventSource请求,直接实现ai回复效果

这里主要讲第二个方案

// 下载依赖
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',
     "Content-Type": 'application/json',
  },
  // signal: that.ctrlAbout.signal,
  body: JSON.stringify({
   	// your body参数
  }),
  onmessage(event) {
    // 成功之后操作
    this.message += event.data

    // 成功之后满足某些条件可以使用AbortController关闭连接
 	// this.ctrlAbout.abort()
  },
  onerror() {
	// 服务异常
  },
  onclose() {
  	// 服务关闭
  },
})
1.优势:

普通get、post请求完毕后端返回数据前后端通信就自动挂断,但是这个 eventSource请求这个东西 前端请求一次不会挂断,后端可以持续输出数据。

2.eventSource和websocket的区别:

1)协议不同:WebSocket 使用的是一种双向通信协议,而 eventSource 使用的是一种单向通信协议。WebSocket 协议可以在客户端和服务器之间建立一个长连接,双方可以同时发送和接收消息,而 eventSource 只能由服务器向客户端发送消息。

2)数据格式不同:WebSocket 可以发送任何格式的数据,例如文本、二进制数据或 JSON,而 eventSource 只能发送文本格式的数据。

3)支持程度不同:WebSocket 是一种相对较新的技术,在一些旧的浏览器或网络环境下可能不被支持,而 eventSource 已经被广泛支持,可以在大多数现代浏览器中使用。

4)应用场景不同:WebSocket 更适合那些需要实时双向通信的应用,例如在线游戏或视频会议,而 eventSource 更适合那些需要从服务器获取实时信息的应用,例如股票行情或新闻推送。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值