5、数据通道（RTCDataChannel）入门：DataChannel的概念、创建与配置、发送与接收文本消息

聊到WebRTC，很多人第一反应就是视频通话。但说实话，我工作中用得最多的反而是数据通道。为什么呢？因为视频通话涉及编解码、带宽适配、帧率控制，坑太多了。而数据通道，说白了就是一条浏览器到浏览器的直连管道，你往里面丢数据，对方就能收到。

嗯，今天我们就来好好聊聊这个RTCDataChannel。

什么是DataChannel？

DataChannel，顾名思义，就是一条专门用来传数据的通道。它和媒体通道（音频/视频）是并行的，但用途完全不同。

你可以把它想象成一条TCP或UDP连接——只不过它跑在WebRTC的P2P链路上。我习惯把它叫做“浏览器里的Socket”。

为什么需要它？举个例子：你做一个在线协作白板，用户画一笔，你要把坐标实时同步给其他人。如果用WebSocket，数据得先飞到服务器再转发回来，延迟至少多几十毫秒。用DataChannel，数据直接点对点，延迟低到可以忽略。

我在项目中遇到过类似场景——一个在线文档编辑工具，用户打字要实时同步。用DataChannel后，延迟从原来的80ms降到了10ms以内。用户体验提升非常明显。

创建与配置DataChannel

创建DataChannel其实很简单。你只需要一个RTCPeerConnection实例，然后调用它的createDataChannel()方法。

const pc = new RTCPeerConnection(config);
const dataChannel = pc.createDataChannel('myLabel', {
  ordered: true,
  maxRetransmits: 3
});

这里有两个关键点：

• 第一个参数是标签（label）：你可以理解为通道的名字。同一个连接上可以创建多个通道，用标签区分。我习惯用功能命名，比如“chat”、“gameState”、“fileTransfer”。
• 第二个参数是配置选项：这里决定了通道的行为。

配置选项里最重要的就是ordered和maxRetransmits/maxPacketLifeTime。说白了，就是让你在“可靠有序”和“快速无序”之间做选择。

配置	效果	适用场景
ordered: true, maxRetransmits: 3	可靠、有序、最多重传3次	文本聊天、文件传输
ordered: false, maxPacketLifeTime: 100	不可靠、无序、数据包存活100ms	游戏位置同步、实时音频数据
不传任何配置	默认可靠有序（类似TCP）	大多数场景

这里有个坑要注意：createDataChannel()必须在连接建立之前调用。如果连接已经建立，你需要监听对方的ondatachannel事件来获取通道。

// 发起方：连接建立前创建
const dc = pc.createDataChannel('chat');

// 接收方：连接建立后监听
pc.ondatachannel = (event) => {
  const dc = event.channel;
  // 现在可以使用dc了
};

为什么会这样？因为DataChannel的创建信息需要包含在SDP协商中。如果连接已经建立，SDP已经交换完毕，就没法再添加新通道了。嗯，这个设计其实挺合理的——想想看，如果连接建立后还能随意加通道，那协商逻辑就乱套了。

发送与接收文本消息

通道创建好了，接下来就是发送和接收数据。这部分其实特别简单。

发送消息

// 等待通道打开
dataChannel.onopen = () => {
  console.log('通道已打开');
  
  // 发送文本消息
  dataChannel.send('你好，世界！');
  dataChannel.send(JSON.stringify({ type: 'chat', content: 'Hello' }));
};

注意：一定要等onopen触发后再发送。通道刚创建时处于connecting状态，这时候发数据会失败。我刚开始做的时候就被这个坑过——通道创建完立刻发消息，结果数据丢了，我还以为是WebRTC的bug。

接收消息

dataChannel.onmessage = (event) => {
  const data = event.data;
  console.log('收到消息:', data);
  
  // 如果是JSON字符串，记得解析
  try {
    const obj = JSON.parse(data);
    console.log('解析后的对象:', obj);
  } catch (e) {
    // 普通文本，直接使用
  }
};

接收端就一个onmessage回调，简单粗暴。你想想看，这不就跟WebSocket一模一样吗？只不过底层走的是P2P。

完整示例：一个简单的聊天

把上面这些拼起来，就是一个最简单的P2P聊天功能：

// 发起方
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel('chat');

dc.onopen = () => {
  dc.send('Hello from initiator!');
};

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

// 接收方
pc.ondatachannel = (event) => {
  const dc = event.channel;
  
  dc.onmessage = (e) => {
    console.log('收到:', e.data);
    dc.send('Hello back!');
  };
};

这段代码虽然简单，但已经涵盖了DataChannel的核心用法。你只需要再加上信令服务器（交换SDP和ICE候选），就能跑通一个完整的P2P聊天应用。

知识结构图

下面这张图帮你理清DataChannel的核心逻辑：

好了，DataChannel的基础就这些。说白了就是三步：创建通道、配置参数、收发数据。你只要记住“先创建后连接、等打开再发送”这两条原则，基本不会出大问题。

下一节我们会深入DataChannel的进阶用法，包括二进制数据传输、流控、以及如何用它传文件。但今天的内容已经足够你跑通一个P2P聊天了——动手试试看？

---