在 Web 开发中，客户端和服务器端的通信方式有很多种，而其中一种非常实用的方式是使用 Server-Sent Events（SSE）。SSE 是一种 HTTP 实时推送技术，它允许服务器端推送数据到客户端，而不需要客户端发起请求。
本文将对 Server-Sent Events API 进行详细介绍，并提供一些使用示例。如果你想了解如何在前端应用中使用 SSE，那么这篇文章就是为你准备的。
Server-Sent Events API 简介
Server-Sent Events API 由 W3C 组织提出并纳入 HTML5 规范中。它定义了一种协议，用于在客户端和服务器端建立长久的 HTTP 连接，从而使得服务器可以随时向客户端推送数据。其中，服务端就是一个基于 HTTP 的简单的 HTTP 服务器，而客户端是一个使用 JavaScript 的 Web 应用程序。
SSE 的主要优点是它们允许服务器端推送数据到客户端，而不需要客户端发起请求。这种方法比轮询或 WebSockets 更高效，因为它可以减少每个客户端的网络流量，以及服务器端的资源消耗。
SSE 的另一个优点是，它与 Web 浏览器的原生支持非常好。这意味着您不需要使用任何第三方库或插件来实现 SSE。
如何使用 Server-Sent Events API
要使用 Server-Sent Events API，您需要创建一个 EventSource 实例。如下所示：
----- ----------- - --- -----------------
在这里，URL 是服务器端推送事件的 URL。此 URL 必须位于同一域中，否则浏览器会拒绝连接。
当建立了 SSE 连接后，你可以使用以下方法来处理数据：
- onopen：连接成功建立时触发。
- onerror：当连接出现错误时触发。
- onmessage：当收到来自服务器的数据时触发。
例如下面代码展示了如何实现一个 SSE 连接，并在客户端接收推送的消息：
----- ----------- - --- ----------------- ------------------ - ------- -- - --------------------- -- ------------------- - ----- -- - ------------------- -- --------------------- - ------- -- - ---------------------- ---------------- --
服务器端配置
要使服务端推送事件，您需要在服务器端设置响应头：
- Content-Type：
text/event-stream - Cache-Control：
no-cache
然后，您需要使用 event: 和 data: 标记来推送事件。 event: 标记用于指定事件名称，而 data: 标记用于指定要推送的事件数据。
例如下面代码展示了如何在服务器端发送消息：
----- ------- - -------------------
----- --- - ----------
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
-------------- -- -
----------------- ---------
---------------- ----- -------------
-- ------
---
---------------- -- -- -
-------------------------- -------
---在这个例子中，我们使用 Express.js 创建了一个 HTTP 服务器。当客户端连接到 /events 路径时，服务器将向客户端推送一个名为 "ping" 的事件，其中包含消息 "Hello World!"。推送间隔为 1 秒钟。
效果演示
您可以在本地启动上述示例代码，并在浏览器上访问 http://localhost:5000/events，然后查看浏览器控制台中的消息。
那么，我们就成功地使用 SSE 完成了服务器到客户端的推送。这种方式比轮询或 WebSockets 更高效、可靠，并且避免了频繁的 HTTP 请求。
总结
本文简要介绍了 Server-Sent Events API，并提供了一些使用示例。希望本文对于前端开发者了解 SSE 和在前端应用中使用 SSE 提供了帮助。如果您正在开发需要实时数据的应用程序，则 SSE 是一个值得考虑的选项。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6486e97148841e989458b232