使用post请求建立长连接实现sse，接收后端主动发来的消息，实现chat-gpt的弹字效果，EventSource的应用

每日鸡汤：每个你想要学习的瞬间都是未来的你向自己求救

最近在做一个chat相关的功能，然后由于接口返回特别特别慢，所以需要搞一个慢慢等待的效果，就是接口一个单词一个单词的返回，然后前端收到一个展示一个，提升用户体验。

说实话我是第一次做这类需求，他们给完接口文档我一脸懵？啥？post请求一次，也能实现接收后端主动来发来的消息？就跟websocket一样。

一问才知道原来真可以，真的是每天都能学习到新鲜的知识，使用EventSource即可，就是传说中的sse【server-send-events】

没错，本菜鸟都干了好几年了，还没做过这种需求，我做的比较多的就是前端轮训一个接口用setTimeout 或者setInterval

EventSource - Web API 接口参考 | MDNEventSource 接口是 web 内容与服务器发送事件通信的接口。https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource注意，前端要想能收到后端发来的消息，毫无疑问我们肯定要监听消息！！牢记【监听】在前端开发中的重要性，监听接口返回，监听事件触发等等，认真听才可以让我们收到别人给我们的消息。

可以看一下mdn的官方文档用法很简单，但是问题是原生的EventSource 不能使用post方法，只能使用get方法，而且还不能自定义请求header，所以我们可以使用npm包，常用的有

1. event-source-polyfill  这个可以自定义请求头

2. @microsoft/fetch-event-source 这个可以使用post请求，也可以自定义请求头功能强大，建议用这个

在开发中遇到了一问题，我按照@microsoft/fetch-event-source的例子写好了代码，怎么都接收不到请求，还以为这个插件有问题，或者我写错了，结果研究半天才发现是后端代码写错了，他根本没有一个一个给我返回，而是等了好长时间所有数据准备完毕才返回，这样导致请求都超时了，自然就收不到数据。

所以如果你也遇到了问题，不妨考虑一下是否是这个原因，这个插件的demo亲测是没有问题的，我用的版本是"@microsoft/fetch-event-source": "^2.0.1",

参考

【20230816更新】

还有一个问题就是错误处理，接口报错了怎么办，第一个想到的肯定是在onerror里面捕获，但是在打印出来onerror里面抛出的错误是

Expected content-type to be text/event-stream, Actual: application/problem+json

这个不是我们想要的，其实需要在onopen里面处理，可以看一下官方文档，同志们一定要好好看官方文档啊！！

还有一个问题

@microsoft/fetch-event-source 默认在浏览器当前标签页面不处于活动状态的时候就取消当前请求，切回来的时候再重新请求，这样很多时候不符合我们的需求，可以在请求参数加上openWhenHidden: true,

fetchEventSource(url, {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json',
	},
	body: JSON.stringify(params),
	// 加上这句话
	openWhenHidden: true,
	//...
}