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

参考

你可能感兴趣的:(gpt,前端,soureevent,javascript)