需求:实现一个类似于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 更适合那些需要从服务器获取实时信息的应用,例如股票行情或新闻推送。