在前端开发中,经常需要传输文件,如图片、音频、视频等。一般情况下,我们使用 AJAX 或 WebSocket 进行文件传输。但是,这些方法有时会面临一些问题,如传输速度慢、断点续传难等。这时,Socket.io 便是一个好的选择。
Socket.io 简介
Socket.io 是一个实时通信库,基于 WebSocket 技术实现,支持跨平台、跨浏览器和跨设备。它提供了一套客户端和服务端的交互 API,使得双向通讯变得很容易。Socket.io 提供了多种方便的功能,如房间功能、可靠的断开连接、支持 WebSockets 和轮询等。
Socket.io 文件传输
Socket.io 的文件传输基于二进制流传输,不同于 HTTP 的文本传输。使用 Socket.io 传输文件,需要先将文件转换为二进制流,然后将二进制流传输给服务端。
文件上传
在客户端,需要先监听文件选择事件。当用户选择文件时,将文件转换为二进制流,并使用 emit 将文件发送给服务端。
-- -------------------- ---- ------- -- ----- ----- ----- - --------------------------------------------- -------------------------------- ------- -- - ----- ---- - ---------------------- ----- ------ - --- ------------- ------------------------------- ------------- - -- -- - --------------------- - ----- ---------- ----- ---------- ----- ---------- ----- ------------- --- -- ---
在服务端,可以监听 upload 事件处理文件上传。将二进制流保存为文件,可以使用工具库如 fs 或 multer。
// 服务端代码 const fs = require('fs'); socket.on('upload', (data) => { const buffer = Buffer.from(data.data); fs.writeFile(data.name, buffer, () => { console.log(`${data.name} saved!`); }); });
文件下载
在客户端,需要监听 download 事件。当用户需要下载文件时,客户端向服务端发送 download 请求,并将二进制流转换成文件并下载。
-- -------------------- ---- ------- -- ----- ----------------------- ---------- --------------------- ------ -- - ----- ---- - --- ------------------- - ----- --------- --- ----- ---- - ---------------------------- --------- - -------------------------- ------------- - ---------- -------------------------------- ------------- -------------------------------- ---
在服务端,可以监听 download 事件处理文件下载。读取文件并将二进制流发送给客户端。
-- -------------------- ---- ------- -- ----- ----- -- - -------------- --------------------- ---------- -- - --------------------- ----- ------- -- - -- ----- ----- ---- ----------------------- - ----- --------- ----- -------------- ----- --------------------------- ------ --- --- ---
总结
使用 Socket.io 传输文件,可以提高传输速度、支持断点续传、支持双向通讯等优点。Socket.io 可以应用于多种场景,如在线聊天、实时协作等。学会使用 Socket.io 传输文件,可以让我们开发出更好用、更稳定的 Web 应用。
参考资料
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/648ac6a748841e98948f01cd