什么是WebRTC的DataChannel，以及它如何通过JavaScript实现点对点的实时数据传输？

WebRTC的DataChannel是WebRTC体系中用于在两个浏览器或客户端之间建立直接、低延迟数据连接的通道。它基于RTCPeerConnection完成信令协商后创建，能够在点对点链路中传输字符串、二进制数组、文件分片等数据，而不需要经过应用服务器转发。相比WebSocket，DataChannel走的是P2P路径，适合对延迟敏感的场景。

DataChannel是什么

DataChannel对应底层SCTP协议之上的逻辑通道，由RTCPeerConnection创建。它提供双向通信能力，支持可靠有序或不可靠无序模式。开发者通过JavaScript的RTCDataChannel对象收发数据，事件模型和WebSocket类似，包含onopen、onmessage、onclose等回调。

如何用JavaScript建立点对点传输

基本流程

• 双方各自创建RTCPeerConnection实例
• 一方调用createDataChannel创建通道
• 交换SDP描述与ICE候选完成连接
• 通道onopen后使用send方法发数据

示例代码

下面演示一个最小可用的本地双端模拟逻辑，实际项目中需要将信令通过服务器中转给对端。

// 创建本地连接与远端连接，模拟两个对等端
const pcA = new RTCPeerConnection();
const pcB = new RTCPeerConnection();

// A端创建DataChannel
const channelA = pcA.createDataChannel('chat');

channelA.onopen = () => {
  channelA.send('你好，这是来自A的消息');
};

channelA.onmessage = (e) => {
  console.log('A收到:', e.data);
};

// B端监听通道创建
pcB.ondatachannel = (e) => {
  const channelB = e.channel;
  channelB.onmessage = (e) => {
    console.log('B收到:', e.data);
    channelB.send('收到，我是B');
  };
};

// ICE候选交换
pcA.onicecandidate = (e) => {
  if (e.candidate) pcB.addIceCandidate(e.candidate);
};
pcB.onicecandidate = (e) => {
  if (e.candidate) pcA.addIceCandidate(e.candidate);
};

// 协商SDP
(async () => {
  const offer = await pcA.createOffer();
  await pcA.setLocalDescription(offer);
  await pcB.setRemoteDescription(offer);
  const answer = await pcB.createAnswer();
  await pcB.setLocalDescription(answer);
  await pcA.setRemoteDescription(answer);
})();

注意事项

实际部署时，信令交换必须借助WebSocket或HTTP服务把SDP和ICE发给对方。若处于对称NAT后，还需配置STUN或TURN服务器。DataChannel发送二进制时建议使用ArrayBuffer，避免大对象阻塞主线程。

DataChannel不替代HTTP接口，它专注已连上后的实时双向数据流动。

小结

通过RTCPeerConnection与createDataChannel，JavaScript可以在浏览器间建立直接数据通道。掌握信令流程和事件回调，就能实现聊天、文件快传和实时游戏同步等功能。

WebRTCDataChannelJavaScript修改时间：2026-07-31 03:54:16