1. 项目背景与技术选型
P2P文件传输一直是互联网领域的热门话题，特别是在需要快速分享大文件的场景下。传统的中心化文件传输服务存在服务器带宽成本高、传输速度受限等问题。而基于WebRTC的P2P技术可以直接在用户浏览器之间建立连接，实现高速文件传输，完全绕过中间服务器。
在这个项目中，我们选择的技术栈包括：
- WebRTC：实现浏览器间的直接P2P连接
- Socket.IO：用于信令服务，协调P2P连接的建立
- Node.js + Express：构建后端信令服务器
- HTML5 File API：处理前端文件的分块和传输
提示：WebRTC虽然主要用于视频通话，但其DataChannel功能非常适合文件传输，支持可靠和不可靠两种传输模式，可以根据文件类型灵活选择。
2. 系统架构设计
2.1 整体架构
我们的P2P文件传输网站采用三层架构：
- 前端层：用户界面和WebRTC客户端
- 信令层：基于Socket.IO的信令服务器
- STUN/TURN层：用于NAT穿透的公共服务
code复制用户浏览器A ↔ 信令服务器 ↔ 用户浏览器B
↑ ↑
└── WebRTC直连 ────┘
2.2 核心工作流程
- 发送方选择文件并生成唯一分享码
- 接收方输入分享码建立连接
- 信令服务器交换SDP和ICE候选
- 建立P2P连接后直接传输文件
- 传输完成关闭连接
3. 关键技术实现
3.1 信令服务器搭建
首先创建Node.js项目并安装依赖：
bash复制npm init -y
npm install express socket.io uuid
然后实现基础信令服务器：
javascript复制const express = require('express');
const socketIO = require('socket.io');
const { v4: uuidv4 } = require('uuid');
const app = express();
const server = require('http').createServer(app);
const io = socketIO(server, {
cors: {
origin: "*"
}
});
// 存储房间和用户映射
const rooms = new Map();
io.on('connection', (socket) => {
console.log('New connection:', socket.id);
// 创建新房间
socket.on('create', () => {
const roomId = uuidv4().substr(0, 8);
rooms.set(roomId, new Set([socket.id]));
socket.join(roomId);
socket.emit('created', roomId);
});
// 加入已有房间
socket.on('join', (roomId) => {
if (!rooms.has(roomId)) {
socket.emit('error', '房间不存在');
return;
}
const users = rooms.get(roomId);
if (users.size >= 2) {
socket.emit('error', '房间已满');
return;
}
users.add(socket.id);
socket.join(roomId);
socket.to(roomId).emit('ready');
socket.emit('joined', roomId);
});
// 转发信令消息
socket.on('signal', ({ roomId, signal }) => {
socket.to(roomId).emit('signal', signal);
});
// 断开连接清理
socket.on('disconnect', () => {
rooms.forEach((users, roomId) => {
if (users.delete(socket.id)) {
if (users.size === 0) {
rooms.delete(roomId);
} else {
socket.to(roomId).emit('peer-disconnected');
}
}
});
});
});
server.listen(3000, () => {
console.log('信令服务器运行在:3000');
});
3.2 前端WebRTC实现
前端核心代码处理文件分块和传输：
javascript复制class FileTransfer {
constructor() {
this.peerConnection = null;
this.dataChannel = null;
this.file = null;
this.chunkSize = 16 * 1024; // 16KB chunks
this.currentChunk = 0;
}
async initConnection() {
this.peerConnection = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' },
// 生产环境需要配置TURN服务器
]
});
this.dataChannel = this.peerConnection.createDataChannel('fileTransfer', {
ordered: true, // 保证顺序传输
maxRetransmits: 30 // 适当重试次数
});
this.dataChannel.onopen = () => {
console.log('Data channel opened');
this.sendFile();
};
this.dataChannel.onmessage = (event) => {
console.log('Received message:', event.data);
};
this.peerConnection.onicecandidate = (event) => {
if (event.candidate) {
socket.emit('signal', {
roomId: this.roomId,
signal: { candidate: event.candidate }
});
}
};
}
async sendFile(file) {
this.file = file;
this.totalChunks = Math.ceil(file.size / this.chunkSize);
// 先发送文件元数据
const metadata = {
name: file.name,
size: file.size,
type: file.type,
totalChunks: this.totalChunks
};
this.dataChannel.send(JSON.stringify({
type: 'metadata',
data: metadata
}));
// 然后分块发送文件内容
this.sendNextChunk();
}
sendNextChunk() {
if (this.currentChunk >= this.totalChunks) {
this.dataChannel.send(JSON.stringify({
type: 'complete'
}));
return;
}
const start = this.currentChunk * this.chunkSize;
const end = Math.min(start + this.chunkSize, this.file.size);
const chunk = this.file.slice(start, end);
const reader = new FileReader();
reader.onload = (e) => {
this.dataChannel.send(e.target.result);
this.currentChunk++;
// 更新进度
const progress = Math.round((this.currentChunk / this.totalChunks) * 100);
updateProgress(progress);
// 继续发送下一块
if (this.currentChunk < this.totalChunks) {
setTimeout(() => this.sendNextChunk(), 0); // 避免阻塞
}
};
reader.readAsArrayBuffer(chunk);
}
}
4. 性能优化与问题解决
4.1 NAT穿透问题
WebRTC在复杂网络环境下可能遇到连接问题。我们的解决方案：
-
STUN服务器配置：使用多个公共STUN服务器
javascript复制iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' }, { urls: 'stun:stun2.l.google.com:19302' } ] -
TURN服务器备用：对于无法直接P2P连接的情况，需要配置TURN服务器中继
注意：生产环境必须部署自己的TURN服务器，公共STUN服务器可能不稳定且不适合传输大文件。
4.2 大文件传输优化
- 分块传输：将大文件分成小块传输，避免内存问题
- 流量控制：动态调整分块大小基于网络状况
- 断点续传：记录已传输的块，连接恢复后继续
javascript复制// 动态调整分块大小示例
function adjustChunkSize(prevTransferRate) {
if (prevTransferRate > 1024 * 1024) { // 1MB/s以上
this.chunkSize = 64 * 1024; // 64KB
} else if (prevTransferRate > 256 * 1024) { // 256KB/s以上
this.chunkSize = 16 * 1024; // 16KB
} else {
this.chunkSize = 4 * 1024; // 4KB
}
}
4.3 安全性考虑
- 房间ID生成：使用足够随机的UUID，防止猜测
- 传输加密：WebRTC默认使用DTLS-SRTP加密
- 文件校验：传输完成后计算哈希校验
- 大小限制：前端和后端都实施合理限制
5. 完整部署方案
5.1 生产环境部署
推荐使用PM2管理Node.js进程：
bash复制npm install pm2 -g
pm2 start server.js --name "p2p-file-transfer"
pm2 save
pm2 startup
5.2 Nginx配置
对于生产环境，建议使用Nginx作为反向代理：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# 静态文件缓存
location /public/ {
alias /path/to/your/static/files/;
expires 30d;
}
}
5.3 监控与维护
- 日志记录：记录关键事件和错误
- 性能监控：监控服务器CPU、内存和网络
- 自动重启：配置进程崩溃自动恢复
6. 实际应用中的经验分享
在实际开发中，我们遇到了几个值得注意的问题：
-
移动端兼容性：iOS Safari对WebRTC的支持有特殊要求，需要在页面中添加特定的meta标签：
html复制<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
防火墙问题：某些企业网络会阻止WebRTC连接，这种情况下只能依赖TURN服务器中继。
-
内存管理：传输超大文件时，浏览器可能因内存不足崩溃。解决方案是：
- 使用更小的分块大小
- 定期清理不再需要的对象
- 提供内存使用警告
-
进度显示：准确的进度显示对用户体验至关重要。我们实现了两种进度计算方式：
javascript复制// 基于已传输字节数 const progress = (sentBytes / totalBytes) * 100; // 基于确认收到的块数 const progress = (confirmedChunks / totalChunks) * 100; -
取消传输：实现优雅的传输取消需要：
- 关闭DataChannel
- 发送取消通知
- 清理临时数据
- 重置状态
这个P2P文件传输网站项目展示了WebRTC在非视频领域的强大应用。通过合理的技术选型和优化，我们实现了高效可靠的文件传输方案。未来可以考虑添加更多功能，如文件夹传输、传输队列、多文件并行传输等，进一步提升用户体验。