Server-sent Events（简称 SSE）是一种实现服务器向客户端推送事件的技术，它与 WebSocket 相似，但并不支持双向通信。SSE 仅支持服务器向客户端发送数据，但它有其优势：SSE 协议基于 HTTP，因此使用起来非常简单，且仅需要一个 HTTP 连接即可实现数据推送。
在前端开发中，SSE 是实现实时性事件通知非常优秀的选择，例如在线聊天、通知提醒、实时监控等场景。
客户端 API
SSE 的客户端 API 非常简单，只需要通过 EventSource 构造函数创建一个新的事件源对象即可。EventSource 构造函数接收一个 URL 参数，表示事件源的地址，代码示例：
const eventSource = new EventSource('https://example.com/sse');事件源对象可以绑定三种事件：
onopen：当打开与事件源的连接时触发。一般在此事件中可以发送数据到服务器，比如用户的 Token 信息等。onmessage：当接收到新的事件或数据时触发。在事件对象的data属性中包含服务器发送的数据。onerror：当连接出错时触发。可以考虑在此事件中尝试重新连接。
代码示例：
-- -------------------- ---- -------
----- ----------- - --- ---------------------------------------
------------------ - -- -- -
-- --------
---------------------------------
--
--------------------- - ------- -- -
------------------------ -- ------
--
------------------- - -- -- -
-- ---------
--------------------
------------- -- -
----- -------------- - --- ---------------------------------------
--------------------- - -------------------
------------------------ - ----------------------
---------------------- - --------------------
-- ------
--可以通过 close() 方法关闭事件源连接。
服务器端实现
在服务器端实现 SSE 协议也比较简单。其基本的原理是：客户端向服务器发送一个 HTTP 请求，服务器会保持此连接处于打开状态，并向此连接不断发送数据，代码示例（使用 Node.js 和 Express 框架）：
-- -------------------- ---- -------
-- --- ----
----- -------- - ---
-- -- --- ----
-------- -------------------- -
-------------------- -----------------
-
-- --- --
--------------- ----- ---- -- -
-- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ------
----------------- -------------- ------- -- --- -------------
-- ------
-------------- -- -
-- ---------------- - -- -
-----------------------------
--------------- - --
-
-- ------
---服务器端首先设置响应头，其中 content-type 表示响应数据的格式为 text/event-stream，cache-control 和 connection 分别表示不缓存响应数据和保持长连接。接着发送初始数据，不同类型的数据可以通过 event 字段定义，然后以 data 字段发送数据，最后加上两个换行符（\n\n）表示一条数据发送完毕。服务器端还设置了一个 SSE 消息队列，每当有新的消息入队时，服务器端会将消息发送给客户端。
总结
Server-sent Events 可以通过 HTTP 实现服务器向客户端的实时数据推送，它使用简单，不需要额外的握手过程，而且与浏览器之间的通信建立在 HTTP 连接上，与传统的 Web 技术兼容。在实现实时通信的场景中，SSE 是一种可供选择的通信方式，但也需要考虑到它的局限性，不能用于双向通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ef75dff6b2d6eab3972251