Skip to content

数据通道

DataChannel 提供 WebRTC 的任意数据传输能力,包括文本消息、二进制数据和文件传输。通过 rtc.data 访问 DataManager

创建 DataChannel

在初始化时预配置 DataChannel:

ts
const rtc = new WetRTC({
  signal,
  dataChannels: [
    { label: 'chat', options: { ordered: true } },
    { label: 'file', options: { ordered: false, maxRetransmits: 3 } },
  ],
})

发送消息

ts
// 获取通道
const chatChannel = rtc.data.getChannel('chat')

// 发送文本
chatChannel.send('Hello from WetRTC!')

// 发送 JSON
chatChannel.send(JSON.stringify({ type: 'ping', ts: Date.now() }))

// 发送二进制
const buffer = new ArrayBuffer(1024)
chatChannel.send(buffer)

接收消息

ts
rtc.on('message', (data, channel) => {
  console.log(`[${channel.label}]:`, data)
})

远端 DataChannel

远端创建的 DataChannel 会通过 datachannel 事件通知:

ts
rtc.on('datachannel', (channel) => {
  console.log('收到远端通道:', channel.label)

  channel.addEventListener('message', (e) => {
    console.log('远端消息:', e.data)
  })
})

文件传输

DataManager 内置文件分片传输能力:

ts
// 发送文件
const fileInput = document.querySelector('input[type=file]')
const file = fileInput.files[0]

await rtc.data.sendFile(file, {
  chunkSize: 16384,
  maxRetries: 3,
  maxFileSize: 1024 * 1024 * 1024,
  onProgress: (sent, total) => {
    console.log(`进度: ${((sent / total) * 100).toFixed(1)}%`)
  }
})

// 接收文件
rtc.data.onFile((fileMeta, blob) => {
  const url = URL.createObjectURL(blob)
  // 触发下载或预览
})

通道配置选项

ts
interface DataChannelOptions {
  ordered?: boolean        // 是否保证消息顺序
  maxPacketLifeTime?: number
  maxRetransmits?: number
  protocol?: string
  negotiated?: boolean
  id?: number
}
选项默认值说明
orderedtrue保证消息按序到达
maxRetransmits最大重传次数(设置后 maxPacketLifeTime 无效)
negotiatedfalse是否由应用层协商 ID

Released under the MIT License.