Server-sent Events (SSE) 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端发送事件通知，而无需客户端发出请求。这种通信方式非常适合实现实时的自定义事件通知，例如聊天室、实时数据更新等。
在本文中，我们将学习如何使用 SSE 技术实现实时自定义事件通知，并提供一个完整的示例代码，以便读者更好地理解和应用。
SSE 基本概念
SSE 是一种基于 HTTP 的通信协议，它基于 HTTP 1.1 协议，使用了长连接（长轮询）来实现实时通信。客户端通过建立一个 HTTP 连接，向服务器发送一个请求，并保持连接打开。当服务器有事件通知时，它会将事件以流的形式发送给客户端，客户端接收到事件后可以对事件进行处理。
SSE 的事件通知是以文本格式发送的，格式如下：
event: <event-name> data: <event-data> event: <event-name> data: <event-data> ...
其中，event-name 表示事件名称，event-data 表示事件数据。事件名称和事件数据之间以一个空行分隔。
使用 SSE 实现实时自定义事件通知
在使用 SSE 实现实时自定义事件通知时，我们需要实现两个部分：服务器端和客户端。下面我们将分别介绍这两个部分的实现方式。
服务器端
在服务器端，我们需要实现一个 SSE 事件流，以便向客户端发送事件通知。下面是一个使用 Node.js 和 Express 框架实现 SSE 事件流的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------------ ----- ---- -- -
-- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ------
-------------- -- -
----- ---- - ------- ------------------- ----- ---------------------------
----------------
-- ------
---
---------------- -- -- -
------------------- -- ------- -- ---- --------
---在上面的代码中，我们首先创建了一个 Express 应用，并定义了一个 /events 路由，用于处理 SSE 事件流。在处理函数中，我们设置了响应头，告诉客户端返回的数据是一个 SSE 事件流。然后，我们使用 setInterval 方法定时向客户端发送事件通知，事件名称为 custom-event，事件数据为当前时间的 ISO 字符串表示。
客户端
在客户端，我们需要实现一个 SSE 客户端，用于接收服务器端发送的事件通知，并对事件进行处理。下面是一个使用 JavaScript 实现 SSE 客户端的示例代码：
const evtSource = new EventSource('/events');
evtSource.addEventListener('custom-event', (event) => {
console.log(`Received event: ${event.data}`);
});在上面的代码中，我们首先创建了一个 EventSource 对象，并指定了服务器端 SSE 事件流的 URL。然后，我们使用 addEventListener 方法监听事件名称为 custom-event 的事件，并在事件回调函数中输出事件数据。
总结
使用 SSE 技术实现实时自定义事件通知是一种非常实用的技术，它可以帮助我们实现实时聊天、实时数据更新等功能。在本文中，我们介绍了 SSE 技术的基本概念，并提供了一个完整的示例代码，希望读者能够通过本文了解 SSE 技术的应用和实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660f9d96d10417a2220345e4