在前端开发中，实时数据展示已经变得越来越普遍，而 HTML5 Server-sent Events（SSE）则是一种推送技术，用于在客户端和服务器之间建立一个联系，并将数据实时推送给客户端。在这篇文章中，我们将深入学习 HTML5 SSE 技术，并提供一些示例代码来指导读者学习此技术。
什么是 HTML5 Server-sent Events？
HTML5 SSE 是一种基于 HTTP 的协议，用于使服务器向客户端推送数据。这种技术允许服务器在数据可用时向浏览器发送数据流，而无需客户端发起请求。
在 HTML5 SSE 中，客户端打开一个到服务器的连接，并保持连接打开以接收数据。服务器随时可以推送数据，直接在这个打开的连接中推送。这种方式可以使客户端实时地接收数据，并在页面中使用这些数据。
HTML5 SSE 的优点
- 省去了不必要的 HTTP 请求，减轻了服务器的负担；
- 保持了连接，更容易推送实时数据。在长期连接中，SSE 的连接将始终打开状态，因此数据可以立即发送给客户端，而不需要再次建立连接；
- 基于 HTTP，只需要开放一个端口进行传输，并支持跨域处理。
HTML5 SSE 的浏览器兼容性
HTML5 SSE 已成为 HTML5 规范的一部分，因此它已经被所有主流浏览器支持。以下是支持 SSE 的浏览器列表：
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer（10 及更高版本）
HTML5 SSE 的示例代码
在这个示例中，我们将使用 Node.js 和 Express 框架来创建一个 SSE 服务器，并使用 JavaScript 和 jQuery 来构建客户端页面。
服务器代码
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------------
--- ----- - --
----- ---------- - -------------- -- -
----- ------- - ------ --------------
-------------------
------------------ -------------
--------
-- ------ --- -- -
--------------------------
----------
-
-- ------
---
---------------- -- -- ---------------- ------ ------- -- ---- --------在上面的代码中，我们首先实例化 Express，然后使用 app.use(express.static('public')) 指定了一个静态文件夹，用于存储客户端页面中需要的 CSS 和 JS 文件，这些文件将被浏览器自动请求。接着，在 '/sse' 路由处理程序中，我们设置了响应报头，以及一个每秒钟向客户端发送一个数字的定时器，总共发送了 5 次后终止连接。
客户端代码
--------- -----
----- ----------
------
----- ----------------
---------- ------------
----- ---------------- -----------------
-------
------
------- ---------
---- ------------------
------- -----------------------------------------------------------
--------
------------ -
----- ------ - --- --------------------
---------------- - --------------- -
------------------------------
--
---
---------
-------
-------在上面的代码中，我们通过 <link> 标签引入了一个 CSS 文件，然后创建了一个空的 DIV 元素，用于在网页中显示从服务器发送的数据。接着，使用 <script> 标签引入了 jQuery 库，然后使用 EventSource 对象创建了一个 SSE 连接，并指定连接的 URL 为 '/sse'。最后，在连接的 onmessage 事件处理程序中，我们通过 $('#result').text(event.data) 将从服务器收到的数据显示在 DIV 元素中。
结论
HTML5 Server-sent Events 是一种推送技术，可用于实现实时数据展示。本文中，我们详细学习了此技术，并提供了一些示例代码，来指导读者深入学习此技术。HTML5 SSE 技术的优点是减轻服务器负担、保持连接并支持跨域处理。虽然支持 SSE 的浏览器列表很长，但请注意确保您的用户可以在他们的浏览器上使用此技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67246f592e7021665e137243