WebSocket 是一种实时通信的协议，通过它可以在客户端和服务器之间建立持久性的连接，实现双向通信。在 Web 应用程序中，我们可以使用 WebSocket 在客户端和服务器之间传输各种类型的数据，包括文件。本文将介绍如何使用 Socket.io 实现 WebSocket 文件传输。
什么是 Socket.io
Socket.io 是一个基于 Node.js 框架的实时应用程序库，通过它可以轻松地实现 WebSocket 通信。它支持多个传输协议，包括 WebSocket、Flash Socket、AJAX 长轮询等，可以保证在不同的浏览器和操作系统中都能正常工作。
Socket.io 不仅支持实时通信，还提供了诸如房间、命名空间、广播等高级特性，使得实时应用程序的开发变得更加容易和灵活。
准备工作
在使用 Socket.io 实现文件传输之前，我们需要安装相关的库和组件，包括 Node.js、Socket.io、Express 等。
我们可以使用 npm 包管理器进行安装。依次执行以下命令：
npm install express --save npm install socket.io --save
实现文件传输
接下来，我们将实现一个简单的文件传输应用程序，使用 Socket.io 进行 WebSocket 通信。该应用程序的功能如下：
- 服务端监听客户端的连接；
- 客户端选择要上传的文件，并将文件传输到服务端；
- 服务端接收文件，并将其保存到本地磁盘；
- 服务端将上传状态和上传后的文件名发送给客户端；
- 客户端接收到上传状态和文件名，并进行相应的处理。
服务端实现
服务端主要负责监听客户端的连接，接收并处理客户端上传的文件。
首先，我们需要在服务器端创建一个 Express 应用程序，并在该应用程序中启用 Socket.io。
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);然后，我们需要设置一个路由，当客户端请求访问该路由时，返回一个上传文件的页面。
app.get('/upload', (req, res) => {
res.send(`
<form method="post" enctype="multipart/form-data" action="/upload">
<input type="file" name="file"/>
<input type="submit" value="上传"/>
</form>
`);
});当客户端上传文件时，服务端需要接收文件、保存文件，并向客户端发送上传状态和文件名。为此，我们需要使用 Socket.io 进行 WebSocket 通信。当客户端连接到服务器时，服务端需要注册一个新的事件处理程序，用于处理客户端上传的文件。
// javascriptcn.com 代码示例
io.on('connection', socket => {
console.log('client connected');
// file upload
socket.on('file-upload', data => {
console.log('file upload', data);
const file = data.file;
const filename = file.name;
const destPath = `uploads/${filename}`;
// save file
const stream = fs.createWriteStream(destPath);
stream.on('open', () => {
file.data.pipe(stream);
file.data.on('end', () => {
stream.end();
console.log('file saved', filename);
// send result to client
socket.emit('file-upload-result', {
success: true,
filename: filename
});
});
});
});
});在事件处理程序中，我们获取客户端上传的文件，并将其保存到本地磁盘。使用 Socket.io，我们可以向客户端发送一个包含上传文件状态和文件名的消息。
客户端实现
客户端主要负责上传文件、接收服务端发送的消息，并进行相应的处理。
在客户端我们需要创建一个 HTML 页面，包含一个上传文件的表单。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传 - WebSocket</title>
</head>
<body>
<h1>WebSocket 文件传输</h1>
<form id="upload-form">
<input type="file" id="file-input"/>
<button type="submit">上传</button>
</form>
<div id="result"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('upload-form');
const input = document.getElementById('file-input');
const result = document.getElementById('result');
form.onsubmit = function(e) {
e.preventDefault();
const file = input.files[0];
const reader = new FileReader();
reader.onloadend = function() {
console.log('file loaded', file);
// emit file upload event
socket.emit('file-upload', {
file: {
name: file.name,
data: reader.result
}
});
};
reader.readAsArrayBuffer(file);
};
socket.on('file-upload-result', data => {
console.log('file upload result', data);
if (data.success) {
result.innerHTML = `<p>上传成功，文件名：${data.filename}</p>`;
} else {
result.innerHTML = `<p>上传失败</p>`;
}
});
</script>
</body>
</html>在页面加载完成后，客户端需要连接到服务器。
const socket = io();
当用户选择要上传的文件并单击“上传”按钮时，客户端需要读取文件内容，并使用 Socket.io 向服务器发送一个包含上传文件数据的消息。
// javascriptcn.com 代码示例
form.onsubmit = function(e) {
e.preventDefault();
const file = input.files[0];
const reader = new FileReader();
reader.onloadend = function() {
console.log('file loaded', file);
// emit file upload event
socket.emit('file-upload', {
file: {
name: file.name,
data: reader.result
}
});
};
reader.readAsArrayBuffer(file);
};当服务器发送一个包含上传结果的消息时，客户端需要进行相应的处理，例如在页面上显示上传状态和文件名。
socket.on('file-upload-result', data => {
console.log('file upload result', data);
if (data.success) {
result.innerHTML = `<p>上传成功，文件名：${data.filename}</p>`;
} else {
result.innerHTML = `<p>上传失败</p>`;
}
});总结
在本文中，我们介绍了如何使用 Socket.io 实现文件传输，并提供了相关的示例代码。通过这种方式，我们可以以一种简单、快速和灵活的方式，在客户端和服务器之间传输各种类型的数据。这对于实时应用程序的开发非常有帮助，例如在线文档、协同编辑、在线游戏等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651d319695b1f8cacd4b76e9