SSE 如何完成文件上传及实时预览

阅读时长 5 分钟读完

SSE (Server-sent Events) 是一种 HTML5 中的技术,它提供了一种简单的方法来打开 server 到 client 的单向连接(unidirectional)通信。利用 SSE,我们可以轻易地实现推送(push)和实时通知(real-time notification),比如如何完成文件上传及实时预览。

传统的文件上传

在传统的文件上传方式中,我们通常使用 form 表单中的 input[type=file] 元素,然后将文件上传到后端服务器。上传完成后,后端返回一个对应的链接或者路径,前端会进一步把这个链接或者路径填充到页面上进行展示。

但是,这样的方式有一个缺点:每次上传文件后,都需要进行一次页面刷新,才能够实现预览。这意味着用户需要手动刷新,才能够了解上传的文件内容是否正确有效。

使用 SSE 实现文件上传和实时预览

借助 SSE 技术,我们可以让浏览器和服务器之间建立一条持久连接(persistent connection),使得当服务端发生更改时,浏览器可以实时地接收到通知从而进行相应的展示。

1. 前端实现

我们可以在前端代码中引入 EventSource 对象,来建立一个与服务端之间的 SSE 连接。具体实现如下:

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

上述代码中,我们首先创建一个 EventSource 对象,并指定监听的 URL 为 '/upload'。然后,通过 onmessage 回调函数来接收服务端向浏览器发送的消息。服务端可以通过 event.data 来发送消息内容,将消息体中的 JSON 数据解析后即可获取具体的消息内容。

2. 后端实现

针对 Node.js 后端,我们可以使用 Express 框架和 Multer 库来实现文件上传和预览的功能。具体实现如下:

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

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

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

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

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

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

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

上述代码中,我们首先创建了一个 Express 应用,并使用 Multer 对文件进行上传处理。上传完成后,我们将文件预览链接封装成 JSON 数据返回回传给浏览器端,并将数据再次封装到 SSE 中以便前端进行展示。Server-sent Events 数据可以通过常规的 HTTP 请求和响应来发送和接收,本文使用 fs.writeFile() 函数来将数据保存到文件 event.log 中。

总结

通过上述的步骤,我们可以使用 SSE 实现文件上传和实时预览的功能,通过持久连接让浏览器和服务器之间保持实时通信,避免了用户反复刷新页面的繁琐。这种实时通信技术,在实现在线聊天或者监控数据实时更新等功能时,也都有着广泛的应用。

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

纠错
反馈