在现代 Web 应用中，实时通讯已经成为了一个非常重要的需求。而 Server-Sent Events（SSE）正是一种非常优秀的前后端实时通讯解决方案。SSE 可以让服务器向客户端推送数据，而且还支持断线自动重连、自定义事件等多种特性，非常适合用于实现实时通知、实时消息、实时进度等场景。
SSE 基础
SSE 的基本原理是通过 HTTP 协议建立一条长连接，使服务器可以向客户端推送数据。SSE 是基于纯文本的，数据格式为一系列的事件流（Event Stream），每个事件流由多行文本组成，以空行（\n\n）作为事件流的结束符。其中第一行是事件类型（event），其余行为事件数据（data）。
客户端可以通过 JavaScript 中的 EventSource 对象来与 SSE 服务端进行通信。下面是一个简单的 SSE 服务端示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ------------
---------------- ----- ------------
---
------------------- -- -- -
---------------- ------ -- ------- -- ------------------------
---上面的代码创建了一个 HTTP 服务器，当客户端请求该服务器时，返回一个 SSE 数据流。其中 Content-Type 设置为 text/event-stream，告诉浏览器这是一个 SSE 数据流；Cache-Control 设置为 no-cache，告诉浏览器不要缓存 SSE 数据；Connection 设置为 keep-alive，告诉浏览器保持长连接。
这里定义了一个事件类型为 message，事件数据为 hello world。浏览器收到 SSE 数据后，会自动触发 message 事件，并将 hello world 作为事件数据传递给监听该事件的 JavaScript 代码。
下面是一个简单的 SSE 客户端示例：
const es = new EventSource('http://localhost:3000');
es.addEventListener('message', (event) => {
console.log(event.data);
});上面的代码创建了一个 EventSource 对象，指定 SSE 服务端的 URL。当服务端向客户端推送数据时，会触发 message 事件。在该事件处理函数中，可以通过 event.data 获取到服务端推送的数据。
SSE 进阶
除了基本的 SSE 特性外，SSE 还支持一些进阶的特性，包括：
自定义事件类型
除了默认的 message 事件类型外，SSE 还支持自定义事件类型。客户端可以通过 eventSource.addEventListener(eventType, listener) 方法来监听自定义事件类型。
服务端可以通过 event 字段来指定事件类型，如下所示：
res.write('event: customEvent\n');
res.write('data: hello world\n\n');上面的代码指定了一个自定义事件类型为 customEvent，事件数据为 hello world。客户端在监听该事件时，可以通过 eventSource.addEventListener('customEvent', listener) 来进行监听。
断线自动重连
SSE 还支持断线自动重连特性。当 SSE 连接断开时，客户端会自动发起重连请求。服务端可以通过 retry 字段来指定重连的时间间隔（单位为毫秒），如下所示：
res.write('retry: 5000\n');上面的代码指定了断线自动重连的时间间隔为 5 秒。
多路复用
SSE 还支持多路复用特性。通过在 URL 后面添加查询参数来区分不同的 SSE 通道。客户端可以通过 new EventSource(url) 中的 URL 来指定 SSE 通道。
服务端可以通过 req.url 来获取 URL 中的查询参数，从而区分不同的 SSE 通道，如下所示：
-- -------------------- ---- -------
----- ------ - ----------------------- ---- -- -
----- ------- - ----------------------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ------------
---------------- ----- -----------------
---上面的代码通过查询参数来区分 SSE 通道，将 hello ${channel} 作为事件数据返回给客户端。
SSE 应用
SSE 可以应用于很多场景，包括实时通知、实时消息、实时进度等。下面是一个简单的实时消息应用示例：
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
----- ------- - ----------------------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----------------- ------------
---------------- ----- ---------- --------------------
-- ------
---
------------------- -- -- -
---------------- ------ -- ------- -- ------------------------
---客户端代码：
-- -------------------- ---- ------- ----- --- - --- ----------------------------------------------- ----- --- - --- ----------------------------------------------- ------------------------------- ------- -- - -------------------- -- ---------------- --- ------------------------------- ------- -- - -------------------- -- ---------------- ---
上面的代码创建了两个 SSE 通道，分别监听 channel=1 和 channel=2 的消息。服务端会每秒钟向客户端推送一条消息，消息内容包括通道编号和当前时间戳。客户端在接收到消息后，会将消息内容输出到控制台。
总结
SSE 是一种非常优秀的前后端实时通讯解决方案，具有简单、实用、灵活等特点。在实际应用中，可以根据具体的需求来选择不同的 SSE 特性，如自定义事件类型、断线自动重连、多路复用等。希望本文对你了解 SSE 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a9ae195b1f8cacd4f48ba