什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，可以在服务器端向客户端发送实时数据流。与传统的轮询方式相比，SSE 可以节省网络带宽和服务器资源，同时也可以实时更新客户端的数据。
SSE 的应用场景
SSE 可以用于实现实时聊天、实时通知、实时数据监控等功能，本文将介绍如何使用 SSE 完成服务器端的文件传输和下载。
实现服务器端的文件传输和下载
服务器端代码
首先，我们需要在服务器端实现 SSE 的逻辑，以下是一个简单的 Express 应用程序示例：
----- ------- - -------------------
----- -- - --------------
----- --- - ----------
-------------------- ----- ---- -- -
----- ---- - ------------------------------------
---------
--------------- ---------------------------
---------------------- ------------ ----------------
---
---------------
---
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
----- ---- - ------------------------------------
--------------- ----- -- -
---------------- ---------------
---
-------------- -- -- -
----------------- ---------- -----------
----------
---
---
---------------- -- -- -
------------------- -- ------- -- ------------------------
---在上面的代码中，我们使用 Express 框架创建了一个简单的应用程序，其中包含了两个路由，分别是 /download 和 /stream。
/download 路由用于下载文件，我们使用 Node.js 的 fs 模块创建了一个可读流，并将其通过管道传输到响应对象中。我们还设置了响应头，指定了响应的 MIME 类型和文件名。
/stream 路由用于实现 SSE，我们同样设置了响应头，指定了响应的 MIME 类型和缓存控制。我们使用 Node.js 的 fs 模块创建了一个可读流，并监听其 data 事件，将数据流发送到客户端。当数据流结束时，我们还发送了一个事件，通知客户端数据传输已完成。
客户端代码
接下来，我们需要在客户端实现 SSE 的逻辑，以下是一个简单的 HTML 页面示例：
--------- -----
------
------
----- ----------------
------------------ --------------
-------
------
--------------- -----------
------- -------------------------------
---- ------------------
--------
----- ------ - ----------------------------------
----- ----------- - --- -----------------------
--------------------- - ----- -- -
---------------- -- -----------
--
----------------------------------- -- -- -
---------------- -- ------------ ----------------
---
----- -------- - ------------------------------------
---------------------------------- -- -- -
-------------------- - ------------
---
---------
-------
-------在上面的代码中，我们首先创建了一个按钮，用于触发文件下载。当用户点击按钮时，我们使用 JavaScript 的 window.location.href 方法将请求发送到服务器端的 /download 路由。
我们还创建了一个 div 元素，用于显示文件传输的进度。当客户端请求服务器端的 /stream 路由时，我们使用 JavaScript 的 EventSource 对象创建了一个 SSE 连接，并监听其 message 事件。当服务器端发送数据时，我们将其添加到 div 元素中。
当服务器端发送 end 事件时，我们向 div 元素中添加一条消息，提示用户文件下载已完成。
总结
本文介绍了如何使用 SSE 完成服务器端的文件传输和下载。通过使用 SSE 技术，我们可以实现实时的文件传输和下载功能，提高用户体验和服务器性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657ff27ed2f5e1655daea3fc