随着互联网的不断发展，实时通讯的需求也越来越大。而前端作为用户最直接接触的界面，需要支持实时通讯功能。目前比较流行的实时通讯技术有 WebSocket、Polling、Long Polling 和 Server-Sent Events（以下简称 SSE）。但 SSE 是相对于其他技术来说，轻量级且易于配置的。本文将介绍如何使用 SSE 来构建实时通讯程序。
SSE 的使用场景
SSE （服务器推送事件）是一种基于 HTTP 的轻量级实时通讯方式，它通过浏览器与服务器之间的长连接，能够将服务器端的事件推送给客户端。相比于 WebSocket，SSE 只需要一个 HTTP 连接即可建立通信，没有复杂的握手流程，且 SSe 适合浏览器到服务器仅传输小量的实时数据场景。
SSE 主要用于以下场景：
- 实时消息通知
- 实时数据更新
- 实时事件处理
SSE 的基本原理
SSE 的基本原理如下：
- 客户端向服务器端请求一个 SSE 的连接，请求头部必须包含
Accept: text/event-stream。 - 服务器响应该请求，并向客户端发送一个包含
Content-Type: text/event-stream的响应。 - 服务器会不断地向客户端推送消息，消息格式如下：
data: your_data event: your_event id: your_id
其中，data 表示实际的消息内容，event 表示自定义的事件名称，id 表示事件 ID。每一条消息都以一个空行 \n\n 结尾。
客户端接收到消息后，可以通过 JavaScript 进行处理。
SSE 的示例代码
下面让我们来看看 SSE 的示例代码：
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ ---
-------------- -- -
----- --- - --- -------
----- --- - ------ --------------------------
------------------ ---------
---------------
-- ------
--------------- -- -- -
------------------- --------- -- -------
---首先，我们创建了一个 Node.js 的 HTTP 服务器，并在其回调中设置响应头，确认该响应为 SSE。之后，通过 setInterval 定时向客户端发送消息。对于每条消息，我们使用 res.write() 方法将消息发送至客户端。
客户端代码
const es = new EventSource('http://localhost:8080/');
es.onmessage = (event) => {
console.log(`Received: ${event.data}`);
};客户端代码非常简单，只需要在 EventSource 对象上监听 onmessage 事件即可接收到服务器推送的消息。在这里，我们只是简单地将消息打印至控制台。
总结
本文介绍了使用 SSE 构建实时通讯程序的基本原理以及示例代码。通过 SSE，我们可以轻松地构建实时通讯功能，并且相比于其他技术来说，SSE 配置简单，性能相对较好，因此是一个值得推荐的实时通讯技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e97a648841e9894e498b3