Server-Sent Events（SSE）是一种允许服务器向客户端推送实时数据的技术。在前端领域，SSE 可以用于构建实时的聊天室、股票行情等实时数据展示场景。
SSE 的使用非常简单，只需要在客户端使用 EventSource 对象进行订阅即可，如下所示：
const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
console.log('received message', event.data);
};上面代码中，我们通过 new EventSource('/sse') 创建了一个 EventSource 对象并向服务器发起了 SSE 的订阅请求。之后，我们便可以通过设置 eventSource.onmessage 方法，处理服务器推送的实时数据。
但是，在某些场景下，我们需要取消 SSE 订阅，比如用户离开了一个特定的页面，或者我们需要停止一个实时数据的推送等。那么在这些情况下，我们该如何取消 SSE 的订阅呢？
方法一：调用 EventSource.close()
简单来说，我们可以通过调用 EventSource.close() 方法来取消 SSE 的订阅。例如：
eventSource.close();
上面代码在客户端调用了 eventSource.close() 方法，告诉浏览器停止接收 SSE 消息并释放资源。
但是需要注意的是，一旦调用了 close() 方法，SSE 的连接便会永久断开，并且不能再次订阅。因此，在某些场景下，我们需要通过其他手段，实现取消 SSE 订阅的目的。
方法二：使用 EventSource.readyState 判断
除了调用 EventSource.close() 方法，我们还可以通过 EventSource.readyState 属性来判断客户端当前的 SSE 连接状态。简单来说，EventSource.readyState 可能的值有以下三种：
- 0（CONNECTING）：正在建立连接。
- 1（OPEN）：连接已经建立。
- 2（CLOSED）：连接已经关闭。
因此，在某些场景下（比如用户离开了一个特定的页面），我们可以检查 EventSource.readyState 属性的值，如果是 1（OPEN）则表示 SSE 的连接已经建立，此时我们可以调用 eventSource.close() 方法来取消 SSE 的订阅。例如：
window.addEventListener('beforeunload', (event) => {
if (eventSource.readyState === EventSource.OPEN) {
eventSource.close();
}
});上面代码使用 window.addEventListener 监听了 beforeunload 事件，并在事件触发时，检查了 EventSource.readyState 属性的值，如果为 OPEN，则关闭 SSE 连接。
方法三：使用 SSE 服务器端 API
另一种方案是，使用 SSE 服务器端 API 主动关闭 SSE 连接。这种方案较为灵活，并且不会造成 SSE 连接不能再次订阅的困扰。
SSE 服务器端 API 一般会提供 close() 方法，用于关闭当前连接。以 Node.js 的 SSE 模块（sse-express）为例，我们可以在 Express.js 的路由中执行以下代码，来关闭 SSE 连接：
-- -------------------- ---- -------
----- --- - -----------------------
------------------ ------ ----- ---- -- -
----- --------- - -------------- -- -
---------------- ----------------
-- ------
-- -- -------------- --- --
--------------------- - ----------
---
-------------------- ----- ---- -- -
----- --------- - ----------------------
-- ----------- -
-------------------------
-- -- ------- ---- --- --
----------------
------ ----------------------
-
------------ ---------
---上面代码中，我们在 /sse 路由中创建了一个 SSE 连接并持续向客户端推送消息，同时将 messageId 保存在了客户端的 Session 中。在 /close 路由中，我们可以根据 Session 中保存的 messageId，停止 SSE 的消息推送并调用 res.sse.close() 关闭连接。
这样，通过 SSE 服务器端 API 主动关闭 SSE 连接，我们可以实现灵活地取消 SSE 的订阅，并可以在未来再次订阅。
总结
在本文中，我们介绍了三种取消 SSE 订阅的方案：
- 方法一：调用 EventSource.close() 方法。
- 方法二：使用 EventSource.readyState 属性判断 SSE 的连接状态。
- 方法三：使用 SSE 服务器端 API 主动关闭 SSE 连接。
需要注意的是，如果你使用了第一种方法调用了 EventSource.close() 方法，则你将不能再次订阅 SSE；而第二种和第三种方法则没有这个限制，因此可以应用在更广泛的场景中。
最后，希望本文能够帮助你更好地理解并使用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64843f1848841e98943604bf