介绍
随着 web 应用程序的发展，实时数据已成为 web 应用程序的必备功能之一。Server-Sent Events（SSE）是一种可用于实现实时数据推送的技术，它允许服务器推送事件流到客户端。SSE 比传统的轮询技术更有效率，因为它只在有新数据时才会发送数据。
本文将介绍如何使用 SSE 技术在 web 应用程序中实现实时数据推送，并且跨浏览器兼容。
SSE 基础
SSE 是一种基于 HTTP 的实时通信技术。在 SSE 中，客户端通过发送一个 HTTP 请求到服务器来建立一个持久连接。这个连接将保持打开状态，直到服务器发送一个事件流关闭连接。服务器可以通过发送事件流来向客户端推送数据。
客户端可以通过 JavaScript 的 EventSource API 来订阅事件流。EventSource 对象会自动处理服务器推送的事件流，并向客户端发送一个 MessageEvent 事件。
以下是一个简单的 SSE 事件流示例：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------------------------- --------------- - ------------------------ --- ------------------------------------- --------------- - ------------------ ----------- ---
在上述示例中，我们创建一个 EventSource 对象，并通过 addEventListener 方法订阅 message 和 error 事件。当服务器发送一个事件流时，message 事件将被触发，并且事件数据将被打印到控制台。如果发生错误，error 事件将被触发。
SSE 服务器端实现
要实现 SSE，我们需要在服务器端创建一个路由来处理 SSE 请求。以下是一个简单的 Node.js 示例：
-- -------------------- ---- -------
--------------- ------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
---------------- - - --- ----------------- - --------
-- ------
--------------- ---------- -
----------------------- ---------
---
---在上述示例中，我们创建一个路由来处理 /sse 请求，并且设置响应头来指示响应类型为 SSE。我们使用 setInterval 方法来定时向客户端发送事件流，并在每个事件流之间添加一个空行。
我们还监听 req 对象的 close 事件，以便在客户端关闭连接时能够在服务器端做出相应的处理。
跨浏览器兼容
SSE 是一个标准化的技术，但是不同的浏览器实现 SSE 的方式可能会有所不同。以下是一些常见的跨浏览器问题以及解决方法：
Internet Explorer
Internet Explorer 不支持 SSE，但是可以使用一个 polyfill 来模拟 SSE。以下是一个简单的 polyfill 示例：
if (typeof(EventSource) === 'undefined') {
EventSource = function(url) {
var source = new EventSourcePolyfill(url);
return source;
}
}在上述示例中，我们检查 EventSource 是否存在，如果不存在则使用一个 polyfill 来创建一个 EventSource 对象。
Safari
Safari 在处理 SSE 事件流时可能会有缓存问题。为了解决这个问题，我们需要在响应头中添加一个 Last-Event-ID 字段，以便客户端能够识别上次接收到的事件流。
以下是一个示例：
-- -------------------- ---- -------
--------------- ------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---------------- ---------------------------- -- --
---
---------------------- -
---------------- - - --- ----------------- - --------
-- ------
--------------- ---------- -
----------------------- ---------
---
---在上述示例中，我们从请求头中获取 Last-Event-ID 字段，并将其添加到响应头中。
Chrome
在 Chrome 中，如果服务器发送的事件流包含一个超过 16 KB 的字段，客户端将会断开连接。为了解决这个问题，我们可以将事件流分成多个部分。
以下是一个示例：
-- -------------------- ---- -------
--------------- ------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
--- ---- - --- ---------- - -- - -------------
--- ------ - -------------------------
------------------------------ -
---------------- - - ----- - --------
---
-- ------
--------------- ---------- -
----------------------- ---------
---
---在上述示例中，我们将一个 16 KB 的字符串分成多个 1 KB 的字符串，并将其分别发送到客户端。
结论
SSE 是一种非常有用的实时数据推送技术，可以帮助我们构建更加高效的 web 应用程序。在本文中，我们介绍了 SSE 的基础知识，并提供了一个 Node.js 示例来演示如何在服务器端实现 SSE。我们还讨论了一些跨浏览器兼容问题，并提供了解决方案。
如果您想了解更多有关 SSE 的信息，请查看 MDN 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673eac2690e7ed93bee43b94