Server-sent Events (SSE) 是一种向客户端推送事件的技术，这种技术是建立在 HTTP 协议之上的。SSE 提供了一种实时通信的方式，可以用于实现实时警报系统。
在本篇文章中，我们将会介绍如何使用 SSE 推送实时警报信息到前端页面，并提供一个示例代码，帮助读者了解 SSE 和如何实现一个实时警报系统。
什么是 Server-sent Events？
Server-sent Events 是一种用于从服务器向客户端推送事件的技术。它的工作方式是添加一个 text/event-stream 类型的响应头，服务器端再向这个响应管道不断的发送文本数据，而客户端可以通过监听这个管道接收到数据并进行处理。
使用 SSE，可以让客户端实时获取服务器端的信息，这对于需要实时更新数据的应用，比如实时聊天室和实时监控系统等是非常有用的。
如何使用 SSE 实现实时警报系统？
在本篇文章中，我们将会演示如何使用 SSE 实现实时警报系统。在这个系统中，服务器端将会向所有连接到它的客户端推送警报信息。这个系统的目标是让用户能够实时地接收到警报信息，并且在收到这些警报信息时立刻进行处理。
准备工作
在开始编写代码之前，我们需要进行一些准备工作。首先，我们需要设置一个简单的服务器端。在这个服务器端上，我们将会写一个处理 HTTP GET 请求的处理器，这个处理器将会返回一个包含了 SSE 响应头的响应信息：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- -----------
---
------------------- -- -- -
------------------- --------- -- ---- -------
---在设置好基本的服务器端之后，我们需要定义一个与 SSE 有关的事件类型，这个事件类型将会在客户端接收到服务器端发送的数据时进行响应：
const SSE_EVENT = 'alert';
发送实时信息
在设置好服务器端和 SSE 事件类型之后，我们需要开始向客户端推送实时信息。在这个实例中，我们将会通过让服务器端每隔 1 秒向客户端发送一条警报信息来演示这一操作：
setInterval(() => {
const alert = {
type: SSE_EVENT,
data: `Alert message at ${new Date()}`
};
res.write(`data: ${JSON.stringify(alert)}\n\n`);
}, 1000);在这段代码中，我们在一个 setInterval 里发送了一条警报信息。这个信息是一个包含了警报类型和警报内部数据的对象。我们通过 JSON.stringify 把这个对象转换成了字符串，以便于客户端进行处理。
在发送数据时，我们需要注意把数据以 data: 的格式进行发送，并且在发送数据之前需要添加一个空行(\n\n)，这个空行是 SSE 规范要求的一部分。客户端需要通过这个空行来判断接收完一个事件，以便于进行下一次事件的接收。
接收实时信息
在服务端设置完毕后，我们需要在客户端上进行 SSE 数据的接收，并对接收到的数据进行处理。在下面的代码中，我们将会通过创建一个 EventSource 对象并监听 alert 事件，来演示应该如何接收实时信息：
const source = new EventSource('http://localhost:3000');
source.addEventListener(SSE_EVENT, (event) => {
const data = JSON.parse(event.data);
if (data.type === SSE_EVENT) {
// TODO：处理警报信息
}
});在这段代码中，我们创建了一个 EventSource 对象，实现了 SSE 的接收和监听，当浏览器从服务器接收到一个 SSE 事件时，它会触发 EventSource 上面的 onmessage 事件，我们需要在这个事件中来对接收到的数据进行处理。
示例代码
下面是一个使用 SSE 实现实时警报系统的完整代码实现：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ----- - -
----- ----------
----- ------ ------- -- ----- --------
--
---------------- -------------------------------
-- ------
---
------------------- -- -- -
------------------- --------- -- ---- -------
---
----- ------ - --- -------------------------------------
---------------------------------- ------- -- -
----- ---- - -----------------------
-- ---------- --- ---------- -
--------------------- ------ ---------------
-
---在运行这个代码之后，我们可以看到在浏览器的控制台输出了一条包含了警报信息的日志，警报信息的格式为：Alert message at Wed Aug 25 2021 19:19:05 GMT+0800 (中国标准时间)。
总结
在本篇文章中，我们介绍了什么是 SSE 以及如何使用 SSE 实现实时警报系统，通过阅读本文，读者应该能够理解 SSE 技术的基本原理以及如何使用该技术实现一个简单的应用——一个实时警报系统。我们希望这篇文章能够对读者有所帮助，帮助读者了解 SSE 并能够使用该技术来构建实时通信的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492df0e48841e98940a9cc7