Server-sent Events：进阶指南
Server-sent Events (SSE) 是一种流式数据传输通信协议，它可以通过单向连接从服务器向客户端传输实时数据。SSE 可以极大地提高 Web 应用程序的实时性和响应性，适用于很多应用场景，例如推送通知，实时更新等。
本文将深入探讨 SSE 的相关知识，包括 SSE 的工作原理，如何实现 SSE 服务器和客户端，以及一些常见的问题和注意事项。
SSE 的工作原理
SSE 基于 HTTP 协议的长轮询机制实现，使用了一个持续的 HTTP 连接，单向地从服务器向客户端发送数据。与传统的 Ajax 轮询和 WebSocket 相比，SSE 是一种非常简单的技术，而且与现有的 Web 技术非常兼容，因为它基于标准 HTTP 协议。
在 SSE 连接建立后，服务器可以一次或多次地向客户端发送“事件”（event），每个事件可以包含一个或多个数据字段。客户端通过 EventSource 对象接收事件，然后可以根据事件的名称和数据类型进行处理。客户端可以通过 EventSource 的 readyState 属性来检查连接的状态，以及通过 onopen、onmessage 和 onerror 属性来处理连接的事件。
使用 SSE
SSE 的使用非常简单，客户端可以使用 EventSource 对象创建 SSE 连接，服务器可以使用类似 Node.js、Express 或者 PHP 等构建 SSE 服务器。
以下是一个基于 HTML 和 JavaScript 的 SSE 客户端示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------------
-------
------
--------------- ------ ------------
---- --------------------
--------
----- ------ - --- --------------------
---------------------------------- ------- -- -
----- ------- - -----------------------
--------------------------------------------- -- ----- - ------------ - -------
---
------------------------------- ------- -- -
---------------- ---------- ----------
---
-------------------------------- ------- -- -
---------------- -------- -------
---------------
---
---------
-------
-------在此示例中，我们使用 EventSource 对象创建 SSE 连接。连接的 URL 是 /sse，而服务器会在此地址发送事件。客户端使用 addEventListener 函数来处理三个事件：message、open 和 error。当服务器发送消息时，客户端会将其显示在 HTML 页面上。
以下是一个基于 Node.js 和 Express 的 SSE 服务器示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- --- -----
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -------- - -------------- -- -
----- ---- - -
----- ------- ----- - - --- --------------------
--
----------------- ------------
---------------- - - -------------------- - --------
-- ------
--------------- -- -- -
------------------------
---
---
-- ----- ------
----- ------ - ---------------- -- -- -
---------------- ------ ------- -- ---- --------
---在此示例中，我们使用 Express 库来创建 SSE 服务器。我们定义了一个 SSE 路由，它会将 Content-Type 设置为 text/event-stream，然后使用 res.write 函数来向客户端发送事件。在这种情况下，我们每秒钟发送一个事件，包含当前的服务器时间。客户端会在 event 属性设置为 message 时，通过 message 事件接收这些事件。
常见的问题和注意事项
以下是一些常见的问题和注意事项，需要在使用 SSE 时留意：
SSE 不能跨域发送数据。因为 SSE 基于标准 HTTP 协议，所以它遵守同源策略。如果你需要跨域发送数据，请考虑使用 WebSocket。
SSE 支持 HTTP 1.1 版本以上的浏览器。如果你的网站需要支持非常古老的浏览器，需要考虑使用其他技术轮询数据。
SSE 不支持双向通信。与 WebSocket 相比，SSE 只支持从服务器到客户端的单向通信。
SSE 的连接不是无限期的。在使用 SSE 时，需要注意客户端和服务器之间的连接，以及错误处理等问题。
结论
本文深入介绍了 SSE 技术的基本概念和实现细节，并提供了具体的客户端和服务器端示例。通过学习 SSE 技术，我们可以将实时数据传输特性集成到我们的 Web 应用程序中，提高用户体验。在使用 SSE 时，我们需要留意 SSE 的局限性和注意事项，以便更好地应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771795c6d66e0f9aace9e09