什么是 SSE
SSE（Server-Sent Events）是一种服务器推送技术，它允许服务器向客户端发送数据流，而客户端无需长时间保持与服务器的连接，也不需要定时发送请求到服务器上获取数据。
SSE 基于 HTTP 协议，建立在传输层的长连接上，服务器在有新数据时，可以将其作为一个自定义事件推送给客户端，客户端通过监听特定的自定义事件，可以接收到服务器发送的数据，实现异步数据推送的效果。
使用 SSE 的优势
1. 实时性
SSE 可以实现数据的实时推送，无需客户端轮询或者定时发送请求到服务器上获取数据。这对于实时交互和即时通讯场景下的应用特别有用。
2. 可靠性
SSE 基于 HTTP 协议，可以通过 HTTP 的超时机制来保证连接的可靠性和稳定性，当连接断开时，客户端会自动重新连接到服务器。
3. 简单性
SSE 不需要像 WebSocket 那样需要建立全双工通信通道，客户端无需复杂的协议处理和数据帧组装，SSE 只需要简单的通过 HTTP 协议建立长连接，并监听服务器推送过来的数据即可。
SSE 的实现方式
1. 服务器端的实现
服务器端需要支持 SSE，大多数主流的 Web 框架都提供了 SSE 的实现。
在 Node.js 环境中，可以使用 sse 模块来实现。
----- --- - --------------- ----- --- - --- ------------ ---------- -- ----- ---------------- -------------- ----- ------------
2. 客户端的实现
客户端可以通过浏览器提供的 EventSource 接口来接收 SSE 数据流，监听服务器推送的数据。
----- ------ - --- -------------------- ---------------- - ------- -- - ------------------------ --
示例代码
服务器端代码
----- ---- - ----------------
----- --- - ---------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
----- --- - --- -------- -----
-------------- -- -
--------------------------------
-- ------
- ---- -
------------------ -
--------------- ----------- ---------------
---
---------
------
------
------- -------
--------
----- ------ - --- --------------------
---------------- - --------------- -
----------------------- -- ----- - ---------- - -------
--
---------
-------
-------
---
-
---
--------------------
------------------- ------- -- -------------------------客户端代码
--------- -----
------
------
----- --------------- --
---------- ----------
-------
------
------- -------
--------
----- ------ - --- --------------------
---------------- - --------------- -
----------------------- -- ----- - ---------- - -------
--
---------
-------
-------运行示例代码，打开浏览器访问 http://localhost:3000/，可以看到页面每秒钟会添加一个新的日期时间戳，这是服务器端模拟的实时数据。
总结
SSE 作为服务器推送技术之一，可以实现数据的实时推送，无需客户端轮询或者定时发送请求到服务器上获取数据，同时支持 HTTP 协议的超时机制来保证连接的可靠性和稳定性。使用 SSE 可以提高服务器和客户端之间的通信效率，是一种高效的数据推送方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646c9492968c7c53b0b8a010