GPT打字机效果—— fetchEventSouce进行sse流式请求

EventStream基本用法
与 WebSocket 不同的是，服务器发送事件是单向的。数据消息只能从服务端到发送到客户端（如用户的浏览器）。这使其成为不需要从客户端往服务器发送消息的情况下的最佳选择。

const evtSource = new EventSource(“/api/v1/sse”)
// 每次连接开启时调用
evtSource.onopen = function () {
console.log(“连接开始启动”);
};
// 每次接受数据时调用
evtSource.onmessage = (e) => {
console.log(‘输入每次接受的数据’,e)
};
// 每次连接发生错误时调用
evtSource.onerror = function () {
console.log(“连接发生错误”);
};

需要注意的是，EventSource是以get方式发送请求，对于post请求原生的EventSource是无法实现的

如何用post的方式进行eventSource请求
常见的是通过@microsoft/fetch-event-source 这个库里的fetchEventSource来实现
import { fetchEventSource } from ‘@microsoft/fetch-event-source’;
这个库封装了一个方法，使得我们可以便捷的通过这个方法直接进行调用
以下是具体的代码

const [controller, setController] = useState(new AbortController());
const url = ‘http:xxx’;
fetchEventSource(url, {
method: ‘POST’,
headers: {
// SYSTEM_PORTAL_TYPE: ‘LINGXI_RUNNING’,
‘Content-Type’: ‘text/event-stream’,
‘X-CSRF-TOKEN’: ‘1232123’,
// Cookies: 'ZSMART_LOCALE=zh; ',
},
mode: ‘cors’,
openWhenHidden: true,
credentials: ‘include’,
signal: controller?.signal,
onmessage: async (event: any) => {
console.log(‘eventeventeventeventeventevent’);
console.log(event);
},
onerror(err: any) {
console.log(‘err’, err);
},
async onopen(response: any) {
if (response.ok) {
console.log(‘开始建立连接’);
}
},
onclose() {
console.log(‘关闭’);
controller?.abort();
setController(new AbortController());
throw new Error();
},
}).catch((err: any) => {
controller?.abort();
setController(new AbortController());
console.log({ err });
throw new Error(err);
});