在 web 应用开发中，经常需要处理大量实时消息。例如，需要在 web 界面中显示实时股票价格数据，即时聊天等等。传统的做法是使用轮询或者长轮询方式，但这些方法存在效率低下、资源浪费等问题。随着 HTML5 技术的发展，SSE（Server-Sent Events）成为了一种高效且易用的实时消息传输方式。
SSE 简介
SSE 是一种服务器向客户端发送单向、持久化的消息的技术。它基于 HTTP 协议，使用纯文本格式（text/event-stream）传输数据，类似于长轮询。相比于轮询和长轮询，SSE 的优势在于：
- 实时性更高：浏览器与服务器的连接始终保持开放状态，当服务器有新消息时，立即将其推送到浏览器端，无需等待下一次轮询或重新建立连接。
- 省资源：相比于轮询和长轮询，SSE 的通信量更小，可以节省带宽和服务器资源。
- 简单易用：SSE 协议采用纯文本格式，易于编写和调试。
如何使用 SSE
在客户端中，我们可以通过 JavaScript 来使用 SSE。以下是一个基本的 SSE 示例代码：
const source = new EventSource('/events')
source.onmessage = function (event) {
console.log(event.data)
}在上面的代码中，我们通过创建 EventSource 对象来建立一个 SSE 连接，参数 /events 表示服务器端的 SSE 接口地址。然后，我们通过 onmessage 方法来监听服务器端推送的消息。当服务器端有新消息时，会触发 onmessage 方法，我们可以在这里处理消息。
在服务器端，我们需要同时建立一个类似于以下代码的 SSE 接口：
-- -------------------- ---- -------
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
----- ---- - ------ ----------
---------------
-- -----
--在上面的代码中，我们通过设置 Content-Type 为 text/event-stream，告诉浏览器这是一个 SSE 接口。然后，我们通过 setInterval 方法定时向客户端推送消息，并通过 res.write 方法将消息传递给客户端。
高级应用
在实际应用中，我们还可以使用 SSE 来实现多个连接、断线恢复等高级功能。以下是一个 SSE 断线恢复的示例代码：
-- -------------------- ---- -------
--- ------ - --- ----------------------
---------------- - -------- ------- -
-----------------------
-
-------------- - -------- ------- -
-------------------- ------
-- ----------------- --- ------------------- -
------------------------
------ - --- ----------------------
-
-在上面的代码中，我们通过监听 onerror 事件来检测 SSE 的连接状态。当连接断开时，我们可以通过重新创建 EventSource 对象来重新建立 SSE 连接。这样就可以实现 SSE 的断线自动恢复。
总结
SSE 是一种高效、易用的实时消息传输方式，在处理大量实时消息时具有较高的优势。本文介绍了 SSE 的基本用法，并给出了一些高级应用示例。在实际应用中，我们还可以使用 SSE 来实现更多的功能，例如多个连接、断线恢复等等。希望本文可以对你在 web 应用开发中使用 SSE 提供一些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6533378b7d4982a6eb6b3be9