如何实现一个基于 WebRTC 的纯前端点对点文件传输应用？-js教程-PHP中文网

如何实现一个基于 WebRTC 的纯前端点对点文件传输应用？

betcha

发布： 2025-09-28 14:21:02

原创

216人浏览过

答案：基于WebRTC的纯前端点对点文件传输通过RTCPeerConnection和DataChannel实现，需信令服务器交换SDP与ICE候选信息，文件数据经分片后直接在浏览器间传输。1. 创建RTCPeerConnection并配置STUN服务器；2. 发起方创建DataChannel并通过createOffer生成offer，经信令发送；3. 接收方设置远程描述，创建answer并回传；4. 双方交换ICE候选以建立连接；5. 使用FileReader将文件分片通过DataChannel发送，接收方拼接数据；6. 传输完成发送结束标记。尽管需信令辅助，但文件流不经过服务器，实现高效P2P传输。

如何实现一个基于 webrtc 的纯前端点对点文件传输应用？

实现一个基于 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 });
});

登录后复制

接收方响应连接

造点AI

夸克 · 造点AI

325

查看详情

接收方监听 offer，创建应答：

signaling.onmessage = async (message) => {
  if (message.type === 'offer') {
    const pc = new RTCPeerConnection({ ... });
<pre class="brush:php;toolbar:false;"><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();
}

登录后复制