数据通道
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
}| 选项 | 默认值 | 说明 |
|---|---|---|
ordered | true | 保证消息按序到达 |
maxRetransmits | — | 最大重传次数(设置后 maxPacketLifeTime 无效) |
negotiated | false | 是否由应用层协商 ID |