使用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",

参考