随着 Web 应用程序的需求不断增加，实时通知系统已经成为了许多 Web 应用程序的必备功能之一。在过去，我们通常使用长轮询或 WebSocket 来实现实时通知，但它们都存在一些问题。长轮询会导致服务器负载过高，而 WebSocket 又需要客户端和服务器之间的双向通信，这使得它们不够灵活。
Server-Sent Events（SSE）是一种新的技术，它提供了一种可维护的、基于事件的通知机制，它允许服务器向客户端推送数据，而无需客户端向服务器发送请求。SSE 可以轻松地集成到现有的 Web 应用程序中，并且比长轮询和 WebSocket 更加简单和灵活。
SSE 基础知识
SSE 是基于 HTTP 的，因此它使用标准的 HTTP 连接。SSE 的核心是事件流，它是一个不断更新的流，其中包含了服务器发送给客户端的数据。客户端通过使用 EventSource 接口来接收事件流。以下是一个简单的 SSE 事件流示例：
event: message data: Hello, world!
在这个示例中，服务器发送了一个名为 "message" 的事件，它的数据是 "Hello, world!"。客户端可以通过添加一个事件监听器来接收事件流，如下所示：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});在这个示例中，我们创建了一个 EventSource 对象，并将其连接到了一个 SSE 事件流的 URL。然后，我们添加了一个事件监听器，它会在接收到一个名为 "message" 的事件时输出事件数据。
构建可维护的通知系统
使用 SSE 构建可维护的通知系统非常简单。我们可以将通知视为事件，并使用 SSE 来将它们发送到客户端。以下是一个通知系统的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------------- - ---
------------------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
----- -------- - -------------- -- -
-- --------------------- - -- -
----------------- ------------------- -------------------------------
-
-- ------
--------------- -- -- -
------------------------
---
---
-------------------------- --------------- ----- ---- -- -
----- - ------- - - ---------
----------------------------
--------------------
---
---------------- -- -- -
------------------- --------- -- ---- -------
---在这个示例中，我们创建了一个 Express 应用程序，并在 /notifications 路径上创建了一个 SSE 事件流。我们使用一个数组来存储通知，当客户端连接到 /notifications 路径时，我们将事件流发送到客户端。如果有新的通知，我们会将它们添加到数组中，并在事件流中发送一个名为 "notification" 的事件。
我们还创建了一个 /notifications POST 路径，用于添加新的通知。当客户端发送一个 POST 请求时，我们将请求体中的消息添加到通知数组中。
客户端可以使用以下代码来接收通知：
const eventSource = new EventSource('/notifications');
eventSource.addEventListener('notification', event => {
const message = JSON.parse(event.data);
console.log(message);
});在这个示例中，我们创建了一个 EventSource 对象，并将其连接到了 /notifications 路径。然后，我们添加了一个事件监听器，它会在接收到一个名为 "notification" 的事件时输出事件数据。
结论
使用 SSE 可以轻松地构建可维护的通知系统。SSE 提供了一种基于事件的通知机制，它允许服务器向客户端推送数据，而无需客户端向服务器发送请求。SSE 比长轮询和 WebSocket 更加简单和灵活，可以轻松地集成到现有的 Web 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753f2001b963fe9cc4b2fa2