在 Web 应用程序开发中，经常会涉及客户端和服务器之间的消息通信。Websocket 通信是一个可行的解决方案，但受到诸多因素限制。而 Server-sent Events（SSE）是一种更加简单、轻量级的通信协议，支持客户端推送消息。
本文我们将介绍 Server-sent Events 的基本原理和使用方法，并提供一个完整的示例代码。
基本原理
SSE 是 HTML5 中一种全新的通信技术。它基于 HTTP 协议，通过浏览器和服务器之间的单向持续连接，实现了服务器向客户端推送消息的功能。
SSE 使用的是文本格式的数据，以 event-stream 形式传输。每个 SSE 消息由以下三部分组成：
- 消息类型（event）：表示消息类型的字符串，可以为空。
- 数据（data）：消息体的内容，可以为空。
- ID（id）：一个可选的字符串，用于区分消息。
每个 SSE 消息使用两个回车符（\n\n）结束。当 SSE 连接建立后，服务器会周期性地向客户端推送消息，直到连接关闭。
使用方法
服务端
使用 SSE 需要在服务端创建 SSE 路由，用于处理从客户端发来的请求和服务器主动向客户端推送的数据。在 Node.js 中可以使用第三方库 express 来实现 SSE 路由。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------------
-------------- -- -
----- ---- - --- ----------------------------
----------------- ---------
---------------- ------------
------------------
-- ------
---
---------------- -- -- -
------------------- -------------
---上述代码中，我们在 /sse 路由中创建了一个 SSE 连接，每隔 1 秒向客户端发送一条消息，消息类型为 time，数据为当前时间的字符串形式。
客户端
在客户端，我们可以使用 JavaScript 的 EventSource 类来创建 SSE 连接，并监听服务器发送的消息事件。
const source = new EventSource('/sse');
source.addEventListener('time', (event) => {
console.log(event.data);
});上述代码中，我们使用 EventSource 类创建了一个 SSE 连接，并在事件 time 上监听服务器发送的消息。每次服务器发送消息时，客户端会自动调用回调函数并输出消息内容。
总结
SSE 是一个轻量级的客户端推送消息协议，相较于 Websocket 更加简单、易用。它通过浏览器和服务器之间的单向持续连接，实现了服务器向客户端推送消息的功能。在实际应用中，我们可以使用第三方库 express 和 JavaScript 的 EventSource 类来实现 SSE 通信。
完整示例代码：
-- -------------------- ---- -------
-- ---------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------------
-------------- -- -
----- ---- - --- ----------------------------
----------------- ---------
---------------- ------------
------------------
-- ------
---
---------------- -- -- -
------------------- -------------
----- -------------------- ---- -------
---- ----------- ---
--------- -----
------
------
----- ----------------
---------------------
-------
------
--------
----- ------ - --- --------------------
------------------------------- ------- -- -
------------------------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491301648841e9894f3258b