服务器发送事件（SSE）是一种在 Web 中实现服务器推送的技术。在这种方式下，服务器可以向客户端发送任何类型的消息，而客户端无需发起任何请求。
本文将介绍如何使用 SSE 实现多个事件的订阅及取消。我们将首先探讨 SSE 的基础知识，然后介绍如何实现多事件订阅以及取消，最后并提供一个完整的示例代码。
SSE 简介
SSE 是基于 HTTP/1.1 协议的。在 SSE 中，客户端通过向服务器申请一个永久性连接（例如：new EventSource('/some_url')），服务器可以向客户端发送任意数量的消息，也就是 SSE 事件。每个事件都包含一个事件类型、数据以及可选的 ID。
SSE 事件非常适合用于实时通知，例如：聊天、即时通讯、在线游戏等应用场景。
实现多事件订阅
现在我们假设你已经有了一些使用 SSE 通知客户端的代码，那么如何实现多事件订阅呢？
首先我们需要定义多个事件类型，例如以下代码片段中定义了两个事件：message 和 notification。
const events = ['message', 'notification'];
然后我们需要利用 SSE 对象的 addEventListener 方法监听这些事件。
const source = new EventSource('/some_url');
source.addEventListener('message', handleMessage);
source.addEventListener('notification', handleNotification);上述代码中，handleMessage 和 handleNotification 是我们自定义的事件处理程序。
最后我们需要在服务器发送的每个事件中包含事件类型，例如：
-- -------------------- ---- ------- -- ------- -- ----- ---- - - -------- ------- ------- -- ----------------- ------------ ---------------- ------------------------------ -- ------------ -- ----- ---- - - ------ --------------- -------- ---- -------------- -- ----------------- ----------------- ---------------- ------------------------------
现在当服务器发送 message 或 notification 事件时，客户端会自动调用相应的事件处理程序。
实现取消事件订阅
如果你想取消一个事件的订阅，你可以调用 SSE 对象的 removeEventListener 方法，例如：
source.removeEventListener('message', handleMessage);上述代码将取消 message 事件的订阅。
完整示例代码
以下是一个完整的 SSE 多事件订阅及取消的示例代码：
-- -------------------- ---- ------- ----- ------ - ----------- ---------------- ----- ------------- - ------- -- - ----------------------- ------------ -- ----- ------------------ - ------- -- - ---------------------------- ------------ -- ----- ------ - --- ------------------------- ---------------------------------- --------------- --------------------------------------- -------------------- ----- ------------------------- - -- -- - ------------------------------------- --------------- -- ----- ------------------------------ - -- -- - ------------------------------------------ -------------------- -- ------------------------------------- ------ ------------------------------------------ -------
上述代码订阅了 message 和 notification 事件，并在 5 秒后取消了 message 事件的订阅，10 秒后取消了 notification 事件的订阅。
总结
在本文中我们介绍了如何使用 SSE 实现多个事件的订阅及取消。我们讨论了 SSE 的基本知识，以及如何在服务器中发送事件以及客户端中处理事件。我们希望这篇文章可以帮助你更好地理解 SSE，也能够在你的 Web 项目中使用 SSE 实现实时通知和事件处理的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648291c148841e98941f4ab4