在 Web 开发中，实时性是非常重要的一部分。而传统的 HTTP 请求-响应模式无法满足实时性的需求。为了解决这个问题，我们可以使用 Server-sent Events（SSE）。
什么是 Server-sent Events
Server-sent Events 是一种基于 HTTP 的实时通信技术，它通过一个持久的 HTTP 连接，服务器可以发送任意数量的数据到客户端，而客户端则可以在接收到数据后立即进行处理。
与 WebSocket 不同的是，SSE 只是一种单向的通信方式，也就是说，只有服务器可以向客户端发送数据，而客户端无法向服务器发送数据。
SSE 使用了一个特殊的 MIME 类型 text/event-stream，并且数据格式也有一定的规范。具体来说，每一条数据都由以下几个部分组成：
event：事件的名称，可选。data：事件的数据，必选。id：事件的 ID，可选。retry：重新连接的时间间隔，可选。
下面是一个简单的 SSE 数据格式示例：
------ ----------- ----- -------- ----- ---------- ------ ------ ----------- ----- -------- ----- ---------- ------
如何使用 Server-sent Events
使用 SSE 需要在服务器端提供一个能够发送 SSE 数据的接口，并在客户端通过 JavaScript 代码来建立 SSE 连接。
服务器端
在服务器端，我们需要使用一些特定的 API 来创建 SSE 连接，并发送 SSE 数据。在 Node.js 中，可以使用 sse 模块来实现 SSE 的功能。
下面是一个使用 sse 模块的示例代码：
----- --- - ---------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
----- --- - --- ---------
-------------------- -------- -- -
-------------- -- -
------------------ - - --- ------ - --------
-- ------
---
-
---
--------------------在上面的代码中，我们创建了一个 HTTP 服务器，并在 /sse 路径下创建了一个 SSE 接口。在 SSE 接口中，我们通过 sse 模块创建了一个 SSE 实例，并在 connection 事件中，通过 client.send() 方法向客户端发送数据。
客户端
在客户端，我们需要通过 JavaScript 代码来建立 SSE 连接，并处理从服务器发送过来的数据。
下面是一个使用 SSE 的客户端示例代码：
----- ------ - --- -------------------- ---------------------------------- ------- -- - ------------------------ ---
在上面的代码中，我们使用 EventSource 对象来建立 SSE 连接，并通过 addEventListener() 方法监听 message 事件。在 message 事件中，我们可以通过 event.data 属性获取从服务器发送过来的数据。
总结
Server-sent Events 是一种基于 HTTP 的实时通信技术，它可以帮助我们实现 Web 端的实时更新。使用 SSE 需要在服务器端提供一个 SSE 接口，并在客户端通过 JavaScript 代码来建立 SSE 连接。通过 SSE，我们可以实现 Web 端的实时更新，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660a7183d10417a222a0ab70