随着 Web 应用程序的发展，实时性变得越来越重要。实时进度条是一个很好的例子，它可以让用户清楚地看到任务的进展，并提高用户体验。在本文中，我们将介绍如何使用 Server-Sent Events 技术来实现实时进度条。
什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种 Web 技术，可以让服务器向客户端推送数据。它是基于 HTTP 协议的，使用简单，无需额外的插件或库。SSE 可以用于实现实时通知、实时聊天、实时进度条等功能。
实现实时进度条
实现实时进度条的关键在于服务器端如何推送数据到客户端。在这里，我们将使用 Node.js 和 Express 框架来实现服务器端代码。
服务器端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
-------------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
--- -------- - --
----- ----- - -------------- -- -
-------- -- ------------- - ---
-- --------- -- ---- -
---------------------
----------------- --------
---------------- ------------------ --------- --- ----------
----------
- ---- -
---------------- ------------------ -------- ----------
-
-- ------
---
---------------- -- -- -
------------------- --------- -- ---- -------
---在上面的代码中，我们使用 Express 框架创建了一个 HTTP 服务器，并在 /progress 路径上监听 GET 请求。当客户端请求该路径时，服务器会返回一个 SSE 流，该流的类型为 text/event-stream。在 SSE 流中，每个数据项都由一个 data 字段和一个可选的 event 字段组成。event 字段用于标识数据的类型，data 字段用于存储数据。
在上面的代码中，我们使用了一个定时器来模拟进度条的变化。每秒钟，服务器会将进度条的值推送给客户端，直到进度条的值达到 100。当进度条的值达到 100 时，服务器会在 SSE 流中发送一个 end 事件，表示进度条已经完成。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------- -------- -----------
-------
------------- -
------ ------
------- -----
----------------- --------
-------------- -----
--------- -------
-
--------- -
------- -----
----------------- --------
----------- ----- ---- ------------
-
--------
-------
------
------------- -------- --------
---- ---------------------
---- -----------------------
------
--------
----- -------- - ------------------------------------
----- ----------- - --- -------------------------
--------------------- - ------- -- -
----- ---- - -----------------------
-------------------- - --------------------
--
----------------------------------- -- -- -
--------------------
---
---------
-------
-------在上面的代码中，我们创建了一个简单的 HTML 页面，并使用 CSS 样式创建了一个进度条。在 JavaScript 代码中，我们使用 EventSource 对象来建立与服务器的 SSE 连接。当服务器推送数据时，onmessage 事件会触发，我们可以在该事件中更新进度条的宽度。
当服务器发送 end 事件时，我们可以使用 addEventListener 方法来监听该事件，并在事件处理程序中关闭 SSE 连接。
总结
在本文中，我们介绍了如何使用 Server-Sent Events 技术来实现实时进度条。通过 SSE，服务器可以向客户端推送数据，从而实现实时通知、实时聊天、实时进度条等功能。SSE 是一种基于 HTTP 协议的简单、易用的技术，可以用于构建实时 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fed9a5d10417a222a0d705