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