SSE（Server-Sent Events）是一种新兴的 Web 技术，它使得服务器能够向客户端推送即时数据，而无需客户端发起请求。它与 WebSockets 类似，但是更加轻量和易于实现。在本文中，我们将介绍 SSE 的基本概念和工作原理，以及如何在服务端实现 SSE 和在前端使用 SSE。
SSE 的基本概念和工作原理
SSE 技术与 AJAX 和 WebSockets 技术类似，都是用来实现实时数据传输的。不同之处在于：
- AJAX 是通过轮询来获取数据的，消息是在客户端发起请求时返回的，不适宜实现实时数据传输。
- WebSockets 是在客户端和服务器之间建立持久连接，可以实现双向通信，但是它需要客户端和服务端都实现 WebSockets 协议，一般用于大规模的实时数据传输。
- SSE 是在客户端和服务器之间建立类似于“长轮询”的 HTTP 连接，但是客户端只发送一次请求，服务器会一直保持连接并向客户端发送事件消息，直到客户端关闭连接。
SSE 的数据传输格式是文本格式，格式如下：
-- -------------------- ---- ------- ------ --------- ----- ------- --- --------- ------ ---------- ----- -------- --- ---------- ---
其中，event 表示事件类型，是一个可选字段；data 表示消息内容，必选字段；id 表示消息的唯一标识，是一个可选字段。服务器可以发送多个消息，每个消息之间用一个空行隔开。
下面是一个 SSE 的例子：
-- -------------------- ---- ------- -------- --- -- ------------- ----------------- -------------- -------- ------ ---- --- - ----- ---- -- - ---- -------- ------ ------- --- - ----- ---- -- - ------ -------- ------ ------- --- - ----- ------- --------
客户端可以通过 JS 的 EventSource 对象来接收 SSE 消息，代码如下：
-- -------------------- ---- ------- ----- ------ - --- ----------------------------------------- ------------------------------- --------------- - ------------------------ --- ---------------------------------- --------------- - ------------------------ ---
客户端可以监听多个事件类型，通过 EventSource 对象接收到消息后，可以对消息进行处理，比如显示在页面上、发送到另一个服务端等。
在服务端实现 SSE
在服务端实现 SSE 首先需要保持 HTTP 连接，这一般可以通过长轮询、HTTP 流或异步响应等方式实现。比如，在 Node.js 环境下，可以使用 http 或 express 模块提供的 API 实现 SSE。
下面是一个 SSE 服务端的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
---
---------------------- -
----------------- --------- -------- ---- -- - ---- ---------------
-- ------
--------------- -- -- -
----------------------- ---------
---
--------------- -- -- -
------------------- --------- -- ---- -------
---这个服务端会在客户端连接上之后每隔 1 秒钟向客户端发送一条 ping 消息，直到客户端关闭连接。
在前端使用 SSE
在前端使用 SSE 需要通过 EventSource 对象来订阅服务器的事件。代码如下：
const source = new EventSource('http://localhost:8080');
source.addEventListener('ping', function(event) {
console.log(event.data);
});当服务器向客户端发送 SSE 消息时，EventSource 对象就会触发相应的事件，并传递消息给回调函数。
应用场景
SSE 主要用于实现实时消息传输，比如聊天室、股票行情、天气预报等。由于 SSE 的实现比 WebSocket 更加简单，且能够利用 HTTP 协议的长连接和缓存机制，因此在某些场合下，SSE 也可以代替 WebSocket。
总结
SSE 技术是一种轻量级的实时数据传输技术，与 AJAX 和 WebSocket 技术相比，它更加简单易用。在服务端实现 SSE 主要是保持 HTTP 连接，客户端可以通过 EventSource 对象订阅服务器的事件。SSE 主要用于实现实时消息传输，比如聊天室、股票行情、天气预报等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b6eac6add4f0e0fff88501