WebRTC建立P2P连接后怎么传自定义数据？

红爱~ 提问于 2026-03-12 17:26:24 阅读 2

交互

我用WebRTC搞了个简单的P2P连接，信令服务器也搭好了，双方能成功交换offer/answer和ICE候选者。但连上之后想发点自定义消息（比如聊天文本），发现不知道该调哪个API。试过peerConnection.send()，结果报错说不是函数。

查文档看到好像要用RTCDataChannel，但不确定是不是必须在创建offer前就建好？我现在的代码是在连接建立后再尝试创建data channel，结果对方收不到。下面是我创建channel的部分：

const pc = new RTCPeerConnection(config);
const channel = pc.createDataChannel('chat', { reliable: true });
channel.onopen = () => {
  channel.send('hello');
};
channel.onmessage = e => console.log(e.data);

实时通信

我来解答赞 1 收藏

反馈

1 条解答

诸葛玉娅 Lv1

你的问题在于data channel的创建时机和双方协商流程没对上。

核心问题： data channel必须在创建offer之前就创建好，这样它的描述才会自动包含在SDP里。对端收到offer后，要通过ondatachannel事件来接收这个channel，然后才能正常通信。

你的代码只展示了创建data channel的部分，但关键是你创建完channel后有没有把它包含进offer里。正确的流程是这样的：

发起端（你）:

const pc = new RTCPeerConnection(config);



// 1. 先创建data channel

const channel = pc.createDataChannel('chat', { ordered: true });

channel.onopen = () => {

  console.log('channel打开了');

  channel.send('hello');

};

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



// 2. 再创建offer

const offer = await pc.createOffer();

await pc.setLocalDescription(offer);

// 把offer发给对端（通过你的信令服务器）

sendToSignalingServer(offer);

对端:

const pc = new RTCPeerConnection(config);



// 关键：对端必须监听ondatachannel来接收channel

pc.ondatachannel = e => {

  const channel = e.channel;

  channel.onopen = () => console.log('channel打开了');

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

};



// 收到offer后设置远程描述

await pc.setRemoteDescription(offer);



// 创建answer

const answer = await pc.createAnswer();

await pc.setLocalDescription(answer);

// 把answer发回给发起端

sendToSignalingServer(answer);

几个点注意一下：

1. ordered: true比reliable: true更标准可靠，reliable在有些浏览器已经废弃了

2. 你的代码里peerConnection.send()报错是正常的，RTCPeerConnection本身没有send方法，send是data channel的方法

3. ICE候选者的交换同样重要，别忘了在pc.onicecandidate里把候选者发给对端并及时添加

4. 安全方面：data channel本身不加密，如果传输敏感数据需要确保底层SRTP通道已加密（WebRTC默认走DTLS），或者应用层自己加密

你可以检查一下对端有没有监听ondatachannel，这个事件没注册的话，对端根本收不到channel。

2026-03-12 18:04