Socket.io 是一个实现了实时、双向、基于事件的通信的 JavaScript 库，它能在浏览器和服务器之间建立持久连接，允许双方实时地进行数据交换。在前端开发中，Socket.io 被广泛应用于聊天室、多人游戏等需要实时通信的场景。本文将介绍 Socket.io 的文件上传及下载的方案。
传统方法
在传统的 Web 开发中，文件上传及下载都是采用 HTTP 协议来实现的。文件上传时，浏览器向服务器发送一个包含文件数据的 POST 请求；文件下载时，浏览器发送一个 GET 请求，服务器根据请求的 URL 返回文件数据。这种方法虽然简单易用，但由于 HTTP 协议本身的限制，文件传输速度很慢。
Socket.io 方案
Socket.io 利用 Websocket 协议实现了双向通信，因此可以用它来实现文件的实时上传和下载，从而提高文件传输的速度。具体实现方案如下：
上传
- 前端发起 Socket 连接，并监听连接成功事件。
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('Socket connected');
});- 当用户选择文件后，前端读取文件内容，并通过 Socket 发送给服务器。
-- -------------------- ---- -------
----- ------ - --- -------------
------------------------------- -- ------
------------- - -- -- -
--------------------- -
--------- ----------
--------- ----------
--------- -------------
--- -- ----
--- 服务器接收到文件后，保存到磁盘。
socket.on('upload', ({ filename, filesize, filedata }) => {
const filepath = path.join(__dirname, 'uploads', filename);
const stream = fs.createWriteStream(filepath);
stream.write(Buffer.from(filedata));
stream.end();
});下载
- 前端向服务器发送一个下载请求，并携带文件名。
socket.emit('download', filename); // 发送下载请求- 服务器接收到请求后，读取文件内容，并通过 Socket 发送给前端。
-- -------------------- ---- -------
--------------------- -------- -- -
----- -------- - -------------------- ---------- ----------
----- ------ - ------------------------------
--- -------- - ---
----------------- ---- -- -
--------------------
---
---------------- -- -- -
----------------------- -
--------- ---------
--------- ------------------- -- -- - - --------- ---
--------- -----------------------
---
---
---- 前端接收到文件内容后，将其保存到本地磁盘。
socket.on('filedata', ({ filename, filesize, filedata }) => {
const blob = new Blob([filedata], { type: 'application/octet-stream' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.click();
});以上就是使用 Socket.io 实现实时文件上传和下载的方案。值得注意的是，由于 Socket.io 建立的是长连接，因此在传输大文件时，需要进行分包传输，以避免数据包丢失导致传输失败。另外，在实际应用中还需要加入安全机制，避免文件上传下载时的权限问题。
完整示例代码可以在 GitHub 上查看：https://github.com/LuckyHH/Socket.io-File-Transfer。
总结
本文介绍了 Socket.io 实现文件上传及下载的方案，相比传统的 HTTP 协议，它能提高文件传输的速度，使文件传输更加稳定可靠。但在实际应用中，还需要考虑安全性和可扩展性等问题。我们希望本文能对前端工程师提供一定的借鉴和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e1bc6968c7c53b00840d4