HTML5 中的 Server-Sent Events (SSE) 是一种轻量级的传输协议，用于实现服务器向客户端的实时数据推送。与 WebSockets 不同，SSE 协议建立在 HTTP 协议上，可用于客户端和服务器之间的单向数据流。
在这篇教程中，我们将详细介绍如何使用 SSE 发送 HTML 事件。我们将首先简要介绍 SSE 的基本原理和用途，然后提供一个使用 SSE 的简单示例，并逐步深入了解 SSE 的核心技术。
什么是 SSE？
SSE 是一种基于 HTTP 的服务器推送技术，允许服务器将实时数据流发送到客户端。SSE 在浏览器和服务器之间建立一个持久的连接，使得服务器能够实时地向客户端发送更新数据。
与传统的轮询技术不同，SSE 技术可以在消耗较少的带宽和服务器资源的情况下，实现实时通信和数据更新。SSE 接收到的数据是通过 EventSource 包装的，这是一个 HTML5 API，用于从服务器获取数据并将其显示在客户端上。
如何在客户端接收 SSE 数据？
在客户端上使用 SSE，需要创建一个新的 EventSource 对象，并将其连接到服务器的 SSE 端点。SSE 端点是一个使用 REST 接口所提供的服务器 URL。客户端使用该 URL 和 EventSource 对象建立 SSE 连接，并在接收到数据时执行自定义处理程序。
以下是使用 SSE 接收数据的基本示例：
-- -------------------- ---- -------
--- ----------- - --- --------------------------------------
------------------ - ------- -- -
---------------- ---------- ----------
--
------------------- - ------- -- -
---------------- ---------- ---------
--
--------------------- - ------- -- -
--- --------- - -----------------------
--------------------- --- ------- -----------
--在上面的代码中，我们首先创建一个 EventSource 对象，然后通过 SSE 端点 URL 'http://example.com/sse' 建立 SSE 连接。接下来，我们设置了 SSE 连接的三个事件处理程序：onopen、onerror 和 onmessage。
当 SSE 连接成功建立时，将调用 onopen 处理程序。如果发生错误，将调用 onerror 处理程序。当服务器向客户端推送数据时，将调用 onmessage 处理程序，并将包含数据的 event 对象传递给处理程序。在示例代码中，我们将接收到的数据转换为 JSON 对象，并打印到控制台中。
使用 SSE 发送 HTML 事件
与普通的 SSE 数据消息不同，HTML 事件消息是一种特殊的 SSE 格式，用于触发客户端浏览器中的网页事件。在 HTML 页面中，我们可以定义自定义事件，然后在客户端 JavaScript 中监听这些事件。
下面是使用 SSE 发送 HTML 事件的基本示例：
-- -------------------- ---- -------
--- ----------- - --- --------------------------------------
------------------ - ------- -- -
---------------- ---------- ----------
--
------------------- - ------- -- -
---------------- ---------- ---------
--
-------------------------------------------- ------- -- -
--------------------- ---- -------- ------------
---在上面的代码中，我们首先创建一个 SSE 连接，并设置 SSE 连接的事件处理程序。然后，我们通过调用 addEventListener 方法来监听自定义事件 'custom-event'。当服务器向客户端发送这个事件时，将调用事件处理程序，并将包含事件数据的 event 对象传递给处理程序。
在服务器端，我们需要创建一个 SSE 消息，并使用服务端 API 将其发送到客户端。以下是一个使用 Node.js 和 Express Web 框架的简单示例：
-- -------------------- ---- -------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
--- --------- - ------ ------
--- -------- - ------- ------------------- ------------------
--------------------
-- ------
---在这个示例中，我们创建了一个 SSE 端点 '/sse'，并设置了相应的响应头。我们利用 setInterval 方法发送包含自定义事件 'custom-event' 数据的 SSE 消息。当客户端建立 SSE 连接时，将开始向客户端发送 HTML 事件，并触发客户端的自定义事件处理程序。
总结
SSE 技术为 Web 应用程序提供了一个实时推送数据的简单、轻量级方法。使用 SSE，我们可以向客户端发送实时数据流，包括普通数据消息和 HTML 事件消息。
在本文中，我们介绍了 SSE 的基本原理和用途，并提供了一个实现 SSE 的简单示例。我们还介绍了如何使用 SSE 发送 HTML 事件，以及如何在客户端 JavaScript 中处理这些事件。如果您想了解更多关于 SSE 技术的详细信息，请参考官方文档和相关编程资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497d82748841e98944de9e3