在传统的实时通讯中，我们通常使用轮询或 WebSocket 技术。但是轮询的延迟高、网络负载大，而 WebSocket 只有双向通讯、常常需要额外协议的支持等问题。而 Server-sent Events（简称 SSE）则是一种更简单、更轻量级、更易理解的实时通讯技术。
本文将介绍如何使用 SSE 实现实时新闻推送。
SSE 简介
Server-sent Events 是一种 HTML5 技术，它允许 Web 服务器实时向客户端发送数据。SSE 的主要特点如下：
- SSE 是单向通讯；
- SSE 基于 HTTP 协议；
- SSE 使用纯文本（例如 JSON 或 XML）传输数据；
- SSE 可以自定义事件类型，从而支持多种事件模型；
- SSE 支持自动重连，以保障实时通讯的可靠性。
SSE 使用简单、可扩展，且不需要额外的浏览器插件或库。目前各大浏览器均支持 SSE。
实现步骤
- 在服务端创建一个 SSE 端点
Node.js 下可用如下代码创建一个 SSE 端点：
-- -------------------- ---- -------
----- ---- - ----------------
--------------------------- --------- -- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
--------------------- --------------------
-- ------
----------------以上代码创建了一个简单的 SSE 端点，每秒向客户端发送一个时间戳。
- 在客户端使用 SSE API 连接 SSE 端点
我们可以使用如下代码连接到 SSE 端点：
const EventSource = window.EventSource;
const source = new EventSource('/sse');
source.onmessage = event => console.log(event.data);一旦连接上了 SSE 端点，客户端就会收到数据。
详细说明
SSE 事件
SSE 事件格式如下：
event: <event-name>\n data: <event-data>\n\n
其中 event-name 表示事件类型，event-data 表示事件数据。
例如：
event: myEvent\n
data: {"type": "news", "title": "Breaking news!", "content": "Something happened."}\n\nSSE API
SSE API 包含如下属性和方法：
readyState：连接状态。取值为0,1,2，分别表示连接尚未建立、连接已建立、连接已关闭；onopen：连接成功时的回调函数；onmessage：接收到数据时的回调函数；onerror：连接发生错误时的回调函数；close()：关闭 SSE 连接。
示例代码
服务端代码（Node.js）：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -- -- --
----- -------
------ --------- -------
-------- ---------- -------- -- ----- -----------------------------
---
--------------------------- --------- -- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------------- ------------------- ----------------------------------------
-- ------
----------------客户端代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ---------------
-------
------
-------- ---- ---------
--- --------------------
--------
----- ------ - --- --------------------
----- -------- - -------------------------------------
---------------- - ----- -- -
----- ---- - -----------------------
-- ---------- --- ------- -
----- -------- - -----------------------------
------------------ - -------------- -----------------
-------------------------------
-
--
---------
-------
-------在本示例中，服务端不断生成随机的新闻对象，并使用 SSE 协议向客户端发送。而客户端则通过 SSE API 接收到服务端发送的新闻对象，并展示在 HTML 页面上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cf50d0e46428fe9ea6ba30
