简介
HTML5 Server-sent Events（SSE）是一种基于 HTTP 协议的实时通信技术。与 WebSockets 不同，SSE 是一种单向通信协议，仅允许服务器向客户端发送数据。SSE 提供了一种简单、轻量级、低延迟的实时通信方式，可以用于实现自动刷新网页数据等场景。
在前端开发中，我们经常会遇到需要在网页上展示动态数据的情况。传统的实现方式是使用 AJAX 轮询来定时请求数据，但是这种方式会占用大量网络带宽和服务器资源。使用 SSE 技术可以解决这个问题，让网页更加高效、流畅、即时。
本文将介绍如何使用 HTML5 Server-sent Events 实现自动刷新网页数据，包括 SSE 的原理、具体实现步骤和示例代码。
原理
SSE 使用 EventSource 对象在客户端与服务器之间建立长连接，服务器可以通过该连接向客户端发送数据，客户端通过监听 EventSource 的 onmessage 事件来接收数据。
SSE 的优点在于它能够在数据传输过程中保持连接的持久性，也就是说，服务器在数据更新时可以直接将数据发送到客户端，无需客户端主动请求。这种方式大大减少了不必要的网络流量和请求次数，使得网页数据更新更加实时和高效。
实现步骤
下面是使用 SSE 实现自动刷新网页数据的具体步骤：
- 在 HTML 页面中创建一个 EventSource 对象，指定服务器的 SSE 接口地址。
-- -------------------- ---- -------
------
------
---------- ------------
-------
------
--- --------------------
--------
----- ------ - --- --------------------
---------
-------
-------- 在服务器端实现 SSE 接口，该接口返回一个 HTTP 响应，并将 Content-Type 设置为 text/event-stream。在响应中以流式方式输出数据。
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
-------------- -- -
----- ---- - --- -------
---------------- - - ---- - --------
-- ------
----------------
------------------- ------- -- ------------------------- 在前端代码中监听 EventSource 的 onmessage 事件，并对接收到的数据进行处理。
const source = new EventSource('/sse');
const dataList = document.getElementById('data-list');
source.onmessage = (event) => {
const li = document.createElement('li');
li.textContent = event.data;
dataList.appendChild(li);
};- 测试 SSE 功能。在浏览器中打开 HTML 页面，可以看到数据每秒钟刷新一次。
示例代码
下面是一个完整的使用 SSE 实现自动刷新网页数据的示例代码。
HTML 页面：
-- -------------------- ---- -------
------
------
---------- ------------
-------
------
--- --------------------
--------
----- ------ - --- --------------------
----- -------- - -------------------------------------
---------------- - ------- -- -
----- -- - -----------------------------
-------------- - -----------
-------------------------
--
---------
-------
-------Node.js 服务器代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - --- -------
---------------- - - ---- - --------
-- ------
----------------
------------------- ------- -- ------------------------总结
使用 HTML5 Server-sent Events 可以实现自动刷新网页数据的功能，提高网页的实时性和性能。SSE 技术的实现方式相比于传统的 AJAX 轮询更加高效和简单。使用 SSE 的关键在于建立长连接并以流式方式输出数据，同时在前端代码中监听 EventSource 对象的 onmessage 事件来接收服务器端发送的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501a7da95b1f8cacdf5288a