在前端开发中，我们通常需要通过实时通知向用户传递消息。而 Server-Sent Events（SSE）是一种常用的轻量级实时通信技术，可以在客户端和服务器之间建立长连接，实现即时通知。
本文将介绍如何使用 SSE 来提供实时通知，并提供相应的示例代码。
什么是 Server-Sent Events？
SSE 是一种 HTML5 中的技术，它使用一种基于 HTTP 的协议，在客户端和服务器之间保持一个持久的连接，以实现服务器向客户端的实时通知。
它提供了一种简单有效的方法来推送新消息到客户端，无需使用 WebSocket 或其他实时通信协议，并且 SSE 可以与现有的 Web 应用程序架构很好地集成。
基本用法
使用 SSE 的基本工作流程如下：
- 在客户端上使用 JavaScript 向服务器发送请求以建立一个 SSE 连接。
- 服务器接收连接请求并保持与客户端的长连接，以便在需要时推送消息。
- 服务器向客户端发送消息。
- 客户端通过监听事件来处理收到的消息。
在在客户端上，你可以通过 EventSource 对象来建立 SSE 连接。同时，你需要在服务器端将消息组织成一定的格式推送给客户端。
下面是用于在客户端上建立 SSE 连接的代码：
const source = new EventSource('/sse-server');这里我们将 EventSource 对象实例化，传递了一个 URL 参数。在客户端上使用 EventSource 实例来建立 SSE 连接，就会向指定 URL 发送请求，从而进行连接。
接下来，我们看一下在服务器端推送消息的实现：
-- -------------------- ---- ------- -- ------ ------------------ - --------------- -------------------- -- -- ------------ ---------------- ----------- -- ---- ------------- ------------- -- ---- --- -- ------ -------------- -- - ---------------- - - --- --------------------------- - -------- -- ------
这里，我们定义了一个循环，在每次循环中调用 res.write() 方法来发送消息，并将消息的格式定为 data: + 消息内容 + \n\n。其中，“data:”表示这是数据类型，消息内容写在它后面，每个消息以两个分行符结尾。
Content-Type 设置为 text/event-stream，指示浏览器以 SSE 的方式解析返回的内容。同时要注意将 Cache-Control 设置为 no-cache，以禁用缓存。
完整的服务端代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -----
----------------------- ---- -- -
-- -- --- ----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ------
-------------- -- -
---------------- - - --- --------------------------- - --------
-- ------
----------------
------------------- --------- -- ---- ----------为了测试这个示例代码，请在终端上执行 node server.js。在浏览器中输入 http://localhost:3000，你将看到 SSE 推送的消息。
相关 API
EventSource
用于在客户端上创建 SSE 连接。调用方法为：
const source = new EventSource(url);
其中，url 参数是你要连接的服务器的 URL，字符串类型。
onmessage
当客户端接收到消息时触发。可以使用以下方法为事件添加监听器：
source.onmessage = (event) => {
const data = event.data;
// 处理收到的消息
}onopen
在成功建立 SSE 连接时触发。可以使用以下方法为事件添加监听器：
source.onopen = () => {
// 处理连接成功后的操作
}onerror
在 SSE 连接出错时触发，常常用于处理事件。可以使用以下方法为事件添加监听器：
source.onerror = (error) => {
// 处理连接出错后的操作
}总结
本文介绍了使用 Server-Sent Events 实现实时通知的方法，以及相关的 API，希望对您提供一些启示和帮助。
完整的示例代码如下：
-- -------------------- ---- -------
-- -----
----- ---- - ----------------
----- ---- - -----
----------------------- ---- -- -
-- -- --- ----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ------
-------------- -- -
---------------- - - --- --------------------------- - --------
-- ------
----------------
------------------- --------- -- ---- ----------
-- -----
----- ------ - --- ---------------------------
---------------- - ------- -- -
----- ---- - -----------
--------------------- -------- ----------
--
------------- - -- -- -
----------------------- ---------------
--
-------------- - ------- -- -
-------------------- ----------- -------
--Happy coding!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a05a97d4982a6eb3bea8a