现在非常流行AI问答,AI回答的时候一般都是流式输出,一个字几个字几个字地慢慢加载完,要实现这个效果,我们一般可以用WebSocket和Server-Sent来实现。
我会选择使用SSE,为什么不用WebSocket呢?
1. WebSocket是双向通信,这个功能只需要服务器一直向我们输出。
2.SSE是一个http协议的请求,能更好地兼容浏览器。
但是呢,又遇到了一个问题,我们知道get请求是由长度限制,如果是一个POST请求,按照SSE 的标准事不允许 POST请求的。如何解决这个问题呢?
一、npm install @microsoft/fetch-event-source
二、 简单封装下
import {fetchEventSource} from '@microsoft/fetch-event-source';
const controller = new AbortController()
const signal = controller.signal
export default function sseRequset(url, obj, su***essCallback, errCallback){
console.log(url, obj)
fetchEventSource(url, {
method: 'POST',
signal: signal,
headers: {
'Content-Type': 'application/json',
'A***ept': '*/*'
},
body: JSON.stringify( obj)) ,
onmessage(msg) {
su***essCallback(msg)
},
onerror(err){
// 必须抛出错误才会停止
errCallback(err)
throw err
}
})
}