SSE请求多种实现方式总结
- 什么是SSE
- 一、怎么实现SSE请求(基础版本)
- 1、前端实现:
- 前端示例代码
- 2、 nodejs 后端示例代码
- 3、特点
- 二、Fetch API实现SSE(升级版本)
- 1、 node后端代码
- 2、 前端Fecth请求实现
- 3、特点
- 三、Fecth结合EventSource实现SSE(终极版本)
- 1、node后端代码示例
- 2、前端代码示例
- 3、特点
- 四、总结
文前推荐一下👉
前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口: http://luckycola.com.cn/
什么是SSE
SSE(Server-Sent Events)是一种用于实现服务器主动向客户端推送数据的技术,也被称为“事件流”(Event Stream)。它基于 HTTP 协议,利用了其长连接特性,在客户端与服务器之间建立一条持久化连接,并通过这条连接实现服务器向客户端的实时数据推送。
SSE 和 Socket 区别
SSE(Server-Sent Events)和 WebSocket 都是实现服务器向客户端实时推送数据的技术,但它们在某些方面还是有一定的区别。
适用于场景
chatGPT 返回的数据 就是使用的SSE 技术
实时数据大屏 如果只是需要展示 实时的数据可以使用SSE技术 而不是非要使用webSocket
一、怎么实现SSE请求(基础版本)
1、前端实现:
EventSource 对象是 HTML5 新增的一个客户端 API,用于通过服务器推送实时更新的数据和通知。在使用 EventSource 对象时,如果服务器没有正确地设置响应头信息(如:Content-Type: text/event-stream),可能会导致 EventSource 对象无法接收到服务器发送的数据。
前端示例代码
2、 nodejs 后端示例代码
上面./index.txt的内容就是一些随机的测试文本,如下
3、特点
这是一个最基础的实现版本,但是存在一个问题:这种sse的实现方式只能是GET请求,所以对参数传递的长度会有严重的限制
比如在AI聊天场景这种方式就不太适合,其实我们也可以通过浏览器Fetch API实现SSE
二、Fetch API实现SSE(升级版本)
fetch 本身不直接支持流式输出,但你可以使用 ReadableStream 和 TextDecoder 等 Web Streams API 来实现类似的效果。
1、 node后端代码
代码如下(示例):
2、 前端Fecth请求实现
代码如下(示例):
3、特点
这种方式的优点很直接可以支持POST请求方式来实现SSE效果,而且请求参数长度可以得到很大的拓展,符合长文本输入的需求.另外Fetch是浏览器原生API支持度好,简单易用.
三、Fecth结合EventSource实现SSE(终极版本)
这种方式结合了两种实现方式,是不是很特别,他的实现类似Websoket,后端需要通过保存前端的EventSource 队列来管理,我们直接上代码
1、node后端代码示例
2、前端代码示例
3、特点
这种方式虽然也是通过fecth进行信息请求通信,但是不同的是他的消息监听仍然是通过EventSource实现的,所以不需要通过getReader解析信息.
四、总结
SSE是一种单工的通信方式,实现方式十分多样,每一种实现都有各自的优点缺点,应该根据需求进行合理的选择.