使用 Server-sent Events 实现文件上传进度监控

阅读时长 6 分钟读完

在前端开发中,文件上传是一个非常常见的功能。但是,在上传大型文件时,往往会出现大量时间等待,用户体验下降等问题。如何优化上传体验,让用户获得更好的反馈,是我们需要关注的问题。

本文介绍使用 Server-sent Events 实现文件上传进度监控的方法。借助 Server-sent Events,我们可以实时地获取上传进度,并及时展示给用户。

什么是 Server-sent Events

Server-sent Events(以下简称 SSE)是一项 HTML5 技术,用于实现服务器端向客户端推送数据。相比于传统的 Ajax 轮询技术,SSE 更加高效和稳定,能够实时向客户端推送数据。

SSE 的核心是 EventSource 对象。在客户端,我们可以通过创建 EventSource 对象,与服务器端建立长连接。服务器端会不断地发送数据给客户端,客户端通过 onmessage 事件处理函数接收数据。使用 SSE,我们可以非常方便地实现实时通信功能。

实现文件上传进度监控

下面,我们将使用 SSE 技术,实现文件上传进度监控的功能。

客户端代码

在客户端,我们需要先创建一个 EventSource 对象,与服务器端建立长连接。然后,在上传文件时,通过 FormData 对象将文件数据上传给服务器。服务器接收到上传数据后,会不断地向客户端推送上传进度信息。客户端通过 onmessage 事件处理函数接收上传进度信息,更新页面显示。

-- -------------------- ---- -------
----- ------ - --- --------------------------------

-- --------
---------------- - ----- -- -
  ----- ---- - -----------------------
  -- ----------
  --------------------------------------------------------- ---------------
  ------------------------------------------- - ------------
--

-- ----
----- ---- - --- -----------
------------------- --------------------
---------------- -----------
---------------

在代码中,我们创建了一个 EventSource 对象,并指定连接的 URL(/upload-progress)。当与服务器端建立长连接后,服务器端会不断地向客户端推送数据。客户端通过 onmessage 事件处理函数接收上传进度信息,并更新页面显示。

服务器端代码

在服务器端,我们需要实现两个接口,一个用于上传文件,另一个用于获取上传进度。

  • 上传文件接口
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- ---- - ----------------

----- ------ - -------- ----- ----------------------- ---------- ---

----- --- - ----------

------------------- ---------------------- ----- ---- -- -
  ---------------- -----------
---

在代码中,我们使用 multer 中间件,处理文件上传操作。上传的文件存储在指定目录(/uploads)下。

  • 获取上传进度接口
-- -------------------- ---- -------
--------------------------- ----- ---- -- -
  ----------------------------- ---------------------
  ------------------------------ ------------
  --------------------------- --------------

  ----- -------- - ----------------------- ---------- --------------
  ----- -------- - ---------------------------

  --- -------- - --
  ----- -------- - -------------- -- -
    ----- ---------- - ----------------------------- - ------ -------- ---
    --------------------- ------- -- -
      -------- -- -------------
      ----- ---------- - --------- - -------- - ----------------
      ---------------- ------------ -------------- --------- ----------------------
    ---

    -------------------- -- -- -
      ------------------------
      ---------------- ------------ ---- --------- ------- ------------------
      ----------
    ---
  -- ------
---

在代码中,我们定义了一个 /upload-progress 接口,用于获取上传进度。在函数中,我们设置了响应头信息,告诉客户端响应为 text/event-stream 类型,并保持长连接。然后,我们从客户端 URL 中获取上传文件的 ID。根据 ID,我们读取上传文件的大小,并在 setInterval 中不断读取上传文件的数据。每次读取完数据后,我们计算上传进度,将信息以 JSON 格式发送到客户端。

同时我们也保证,当传输结束后,及时清除计时器,释放读取流,最后以上传完全的状态向服务器返回数据。

学习和指导意义

在本文中,我们介绍了使用 SSE 监控文件上传进度的方法。通过本文的学习,您可以了解 SSE 技术及其在实时通信中的应用。同时,您还可以掌握如何使用 Node.js 和 Express 实现文件上传和进度监控功能。

对于前端开发者而言,实现进度监控功能,是提升用户体验的有效手段。通过 SSE,我们可以及时地向用户反馈上传进度,提高上传效率,帮助用户更快地完成文件上传操作。

总之,本文所介绍的方法对于提升使用体验,减少用户等待时间,有着非常重要的意义。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67971664504e4ea9bde1b2dd

纠错
反馈