Server-Sent Events（SSE）是一种 HTML5 技术，它允许客户端通过单向连接从服务器获取实时事件流。与 WebSockets 不同，SSE 只需要使用标准的 HTTP 连接，而不需要建立双向连接。这使得 SSE 成为一种非常简单易用的实时通信技术。
然而，在某些 Android 浏览器中，使用 SSE 会出现内存泄漏的问题。在这篇文章中，我们将介绍这个问题的原因，并提供一种解决方案。
内存泄漏问题的原因
SSE 是通过 EventSource 对象在客户端实现的。当我们创建一个 EventSource 对象时，它会创建一个新的连接，然后开始监听服务器发送的事件流。在某些 Android 浏览器中，当我们关闭页面或者离开当前页面时，这个 EventSource 对象并没有被正确地销毁。这就导致了内存泄漏。
为了解决这个问题，我们需要在页面关闭或离开之前手动关闭 EventSource 对象。
解决方案
我们可以使用以下代码来手动关闭 EventSource 对象：
var source = new EventSource('demo.sse');
window.addEventListener('beforeunload', function() {
source.close();
});在这个例子中，我们创建了一个 EventSource 对象，然后添加了一个 beforeunload 事件监听器。beforeunload 事件会在用户关闭页面或离开当前页面之前触发。当这个事件触发时，我们就可以调用 EventSource 对象的 close 方法来关闭它。
示例代码
以下是一个完整的示例代码，它演示了如何在客户端使用 SSE，并解决了内存泄漏问题。
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- ------------------
--------
--- ------ - --- -----------------------
---------------------------------- ----------- -
--- ---- - -------------------
--- --- - ------------------------------
------------- - -------------
---------------------------------------------------
---
--------------------------------------- ---------- -
---------------
---
---------
-------
-------这个 HTML 文件中包含了一个空 div 元素，和一个使用 EventSource 对象监听服务器发送的消息流的 JavaScript 代码。当服务器发送一条消息时，我们会在这个 div 元素中添加一个新的子元素来显示这条消息。
服务器端代码（使用 node.js）：
-- -------------------- ---- -------
--- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
--- ---- - -
-------- ------- -------
--
---------------- - - -------------------- - --------
-- ------
----------------这个服务器代码使用 node.js 创建了一个 HTTP 服务器，并监听 /events 路径的请求。当客户端请求这个路径时，它会返回一个 Content-Type 为 text/event-stream 的响应，这表明这个响应会包含一个 SSE 事件流。
在这个例子中，我们使用 setInterval 方法每隔一秒钟发送一条消息给客户端。注意，我们在每条消息前都需要在前面添加一个 data: 前缀，并在结尾处添加两个新行符（\n\n）。这是 SSE 格式中的一个要求。
结论
在某些 Android 浏览器中，使用 SSE 可能会导致内存泄漏。为了解决这个问题，我们可以手动关闭 EventSource 对象，以确保它不会在页面关闭或离开当前页面时泄漏内存。在本文中，我们提供了一个解决方案，同时提供了一个包含示例代码的示例，以便读者可以更加深入地了解 SSE 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67723aaf6d66e0f9aad5ece4