答案：基于WebRTC的纯前端点对点文件传输通过RTCPeerConnection和DataChannel实现，需信令服务器交换SDP与ICE候选信息，文件数据经分片后直接在浏览器间传输。1. 创建RTCPeerConnection并配置STUN服务器；2. 发起方创建DataChannel并通过createOffer生成offer，经信令发送；3. 接收方设置远程描述，创建answer并回传；4. 双方交换ICE候选以建立连接；5. 使用FileReader将文件分片通过DataChannel发送，接收方拼接数据；6. 传输完成发送结束标记。尽管需信令辅助，但文件流不经过服务器，实现高效P2P传输。
实现一个基于 WebRTC 的纯前端点对点文件传输应用，关键在于利用 WebRTC 的 DataChannel 接口在浏览器之间直接传输任意数据，无需经过服务器中转。虽然完全“纯前端”意味着不依赖后端服务，但需借助信令机制交换连接信息，通常仍需要简单的信令服务器（如 WebSocket 服务）协助建立连接。不过文件数据本身是点对点传输的。
1. 理解 WebRTC 核心组件
WebRTC 实现点对点通信依赖三个主要 API：
- RTCPeerConnection：管理 P2P 连接，处理音视频或数据通道。
- RTCDataChannel：用于在连接中发送文本或二进制数据（如文件分片）。
- 信令（Signaling）：通过外部方式（如 WebSocket、Socket.IO）交换 SDP 和 ICE 候选信息。
注意：WebRTC 本身不定义信令协议，需自行实现连接前的“握手”过程。
2. 前端实现步骤
以下是构建该应用的核心流程，全部可在浏览器中完成（除信令外）：
立即学习“前端免费学习笔记（深入）”；
创建 RTCPeerConnection 和 DataChannel
发起方创建连接并打开数据通道：
const pc = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] // 使用公共 STUN 服务器
});
<p>// 打开数据通道
const dataChannel = pc.createDataChannel('fileChannel');
dataChannel.onopen = () => {
console.log('数据通道已打开，可发送文件');
};
dataChannel.onmessage = (event) => {
// 接收文件数据
handleReceivedData(event.data);
};</p><p>// 设置本地描述并发送 offer
pc.createOffer().then(offer => pc.setLocalDescription(offer))
.then(() => {
// 通过信令服务器发送 offer 给接收方
signaling.send({ type: 'offer', sdp: pc.localDescription });
});
接收方响应连接
接收方监听 offer，创建应答：
signaling.onmessage = async (message) => {
if (message.type === 'offer') {
const pc = new RTCPeerConnection({ ... });
<pre class="brush:php;toolbar:false;">pc.ondatachannel = (event) => {
const receiveChannel = event.channel;
receiveChannel.onmessage = (e) => handleReceivedData(e.data);
};
await pc.setRemoteDescription(new RTCSessionDescription(message.sdp));
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
// 发送 answer 回发起方
signaling.send({ type: 'answer', sdp: pc.localDescription });} };
交换 ICE 候选
双方需交换网络可达性信息（ICE candidates）：
pc.onicecandidate = (event) => {
if (event.candidate) {
signaling.send({ type: 'candidate', candidate: event.candidate });
}
};
<p>// 接收方添加候选
signaling.onmessage = (message) => {
if (message.type === 'candidate') {
pc.addIceCandidate(new RTCIceCandidate(message.candidate));
}
};
3. 文件分片与传输
大文件需分片传输以避免阻塞和内存溢出：
- 读取文件为 ArrayBuffer 或 Blob。
- 使用 FileReader 分块读取（如每片 16KB）。
- 通过 dataChannel.send() 发送每一块。
- 接收方按顺序拼接数据，最后生成文件。
示例发送逻辑：
function sendFile(file, dataChannel) {
const chunkSize = 16 * 1024;
let offset = 0;
<p>function sendNext() {
const chunk = file.slice(offset, offset + chunkSize);
const reader = new FileReader();
reader.onload = () => {
if (dataChannel.readyState === 'open') {
dataChannel.send(reader.result);
offset += chunk.size;
if (offset < file.size) {
sendNext();
} else {
dataChannel.send('END'); // 标记传输结束
}
}
};
reader.readAsArrayBuffer(chunk);
}
sendNext();
}
4. 纯前端部署注意事项
虽然逻辑在前端，但仍需考虑以下限制：
- 信令服务器无法避免，但可用 Firebase、Socket.IO 临时服务或 WebRTC mesh 工具简化。
- STUN/TURN 服务器建议使用公共 STUN（如 Google 的），大文件或复杂网络下可能需要自建 TURN。
- 浏览器兼容性良好（Chrome、Firefox、Edge 支持完整）。
- 安全性：P2P 连接加密（DTLS），但需确保信令安全（WSS）。
基本上就这些。核心是掌握 RTCPeerConnection 生命周期和数据分片机制，结合简单信令即可实现高效、低延迟的前端点对点文件传输。
