什么是 Server-sent Events
Server-sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端推送事件流，而无需客户端发出任何请求。与 WebSocket 不同，SSE 仅支持单向通信，即服务器向客户端推送数据，而客户端无法向服务器发送数据。
SSE 的优势
相比于传统的轮询或长轮询技术，SSE 具有以下优势：
- 实时性更高：服务器推送数据时，客户端可以立即收到，无需等待下一次轮询或长轮询。
- 节省带宽：SSE 使用 HTTP 协议，不需要建立新的连接，不会产生额外的开销。
- 更简单的实现：与 WebSocket 相比，SSE 的实现更加简单，无需考虑双向通信和心跳等问题。
如何使用 SSE
服务器端实现
在服务器端，我们需要使用语言或框架提供的 SSE 库来实现 SSE 功能。以 Node.js 为例，我们可以使用 sse 库来实现 SSE：
-- -------------------- ---- -------
----- --- - ---------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
----- --- - --- -------- -----
---------- ----- ------ ------ ---
-
---
--------------------在上面的代码中，我们首先创建了一个 HTTP 服务器，并监听 3000 端口。当客户端请求 /events 路径时，我们创建了一个 SSE 实例，并通过 send 方法向客户端推送了一条消息。
客户端实现
在客户端，我们可以使用 JavaScript 的 EventSource 对象来接收服务器推送的事件：
const source = new EventSource('/events');
source.addEventListener('message', (event) => {
console.log(event.data);
});在上面的代码中，我们创建了一个 EventSource 对象，并指定了服务器端的 SSE 路径。当服务器推送消息时，我们可以通过 message 事件来监听，并在回调函数中处理消息数据。
推送通知示例
下面是一个使用 SSE 实现推送通知功能的示例代码：
-- -------------------- ---- -------
-- ----
----- --- - ---------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
----- --- - --- -------- -----
-------------- -- -
----- ---- - - -------- ---- -------- --
---------- ----- -------------------- ---
-- ------
-
---
--------------------
-- ---
----- ------ - --- -----------------------
---------------------------------- ------- -- -
----- ---- - -----------------------
-------------------------------
---
-------- ------------------------- -
----- ------------ - --- ----------------- --------- -
----- --------
---
-------------------- - -- -- -
------------------------- ----------
--
-在上面的代码中，服务器端每隔 5 秒钟向客户端推送一条消息，客户端通过 EventSource 对象监听消息，并在收到消息时弹出推送通知。当用户点击通知时，会触发 onclick 事件，并在控制台输出一条消息。
总结
通过使用 Server-sent Events 技术，我们可以轻松地实现具有推送通知功能的 Web 应用程序。相比于传统的轮询或长轮询技术，SSE 具有更高的实时性和更低的带宽消耗，同时实现也更加简单。在实际开发中，我们可以根据业务需求，灵活地使用 SSE 技术来实现各种推送功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513f65595b1f8cacdc6f30a