什么是 Server-sent Events（SSE）
Server-sent Events（服务器发送事件，简称 SSE）是一种通过 HTTP 与服务器通信的技术，用于实现服务器向客户端推送实时数据。相对于传统的捕获数据需要通过轮询或长轮询等方式实现，SSE 能够更加高效地推送数据，从而实现更快的实时数据传输。
SSE 程序将消息和数据推送给客户端，降低了服务器负载，而客户端可以在打开的 TCP 连接上实时接收到消息，从而快速更新数据。
SSE 的工作原理
SSE 基于 HTTP 协议来实现服务器向客户端的实时推送。SSE 使用的是一个长连接，称为“EventSource 对象”，该对象一经建立，就能够持续接收来自服务器的事件，直到关闭连接。
客户端在与服务器建立 EventSource 对象的连接后，服务器将持续发送自定义事件和数据，而客户端通过监听事件完成对数据的更新。当客户端与服务器的连接断开时，可以再次建立连接，以维持对服务器数据的实时接收。
使用 SSE 进行实时聊天
实现基于 SSE 的实时聊天，需要先创建一个 EventSource 对象，然后监听服务器推送的事件与数据即可。在这里，我们使用 Node.js 和 Express 框架来作为服务器。代码如下：
-- -------------------- ---- -------
-------
----- ------- - -------------------
----- ---- - ----------------
----- ---- - ----------------
----- -- - --------------
-------
----- --- - ----------
----- ------ - -----------------------
----- ---- - ---------------- -- -----
----------
------------------------------------------- ------------
---- --- --
------------------ ----- ---- -- -
---------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------
-------------- -- -
----- ---- - --- -------
----------------- -------------- -----------------------------
-- ------
---
-------
------------------- -- -- -
------------------- -- ------- -- ---- ----------
---代码中，我们通过设置响应头信息，告知浏览器返回的是一个 SSE 数据流。然后，通过定时器不断向客户端推送数据，使用 data 标识数据内容，通过 event 标识事件类型。
为了在客户端能够接收 SSE 数据流，我们需要使用 JavaScript 中的 EventSource 对象来监听服务器发送的事件。代码如下：
//创建 EventSource 对象
const source = new EventSource('/events');
//监听 message 事件
source.addEventListener('message', e => {
const data = e.data;
console.log(data);
});代码中，我们通过创建 EventSource 对象，与服务器建立长连接，然后通过 addEventListener 监听服务器发送的 message 事件，获取服务器发送的数据。
总结
通过本文的学习，我们了解了什么是 SSE，以及如何使用 SSE 进行实时聊天的实现。SSE 的出现解决了传统轮询方式数据推送速度慢的问题，对于实时数据传输应用场景有着较好的实现效果。同时，在 Node.js 和 Express 中使用 SSE 实现实时聊天也是一种很好的应用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461f245968c7c53b034748f