WebRTC大文件传输中断问题求助：RTCDatachannel发送队列已满报错

这个问题我之前帮同事排查过，核心原因是你当前的代码是同步一次性把所有文件chunk塞进DataChannel的发送队列，而WebRTC的RTCDataChannel发送队列有固定的容量上限——当队列被瞬间占满后，后续的send()调用会直接失败或被阻塞，最终导致传输停止。小文件能正常工作只是因为它的chunk数量少，刚好能被队列容纳而已。

正确的实现思路 #

我们需要改成异步分批发送：利用RTCDataChannel的bufferedamountlow事件，这个事件会在发送队列的缓冲数据降到你设定的阈值时触发，这时再发送下一个chunk，从根源上避免队列溢出。

修改后的完整代码 #

let file = fileUpload.files[0];
const chunkSize = 1024 * 1024 * 4; // 建议把chunk调小到4MB，适配更多网络环境
let remainingBuffer;

// 读取文件并初始化发送流程
file.arrayBuffer().then((buffer) => {
  remainingBuffer = buffer;
  // 设置缓冲阈值：当队列剩余未发送数据小于这个值时，触发bufferedamountlow事件
  dataChannel.bufferedAmountLowThreshold = chunkSize;
  // 绑定事件监听，准备发送下一批数据
  dataChannel.addEventListener('bufferedamountlow', sendNextChunk);
  // 启动第一个chunk的发送
  sendNextChunk();
});

function sendNextChunk() {
  // 检查是否还有剩余数据
  if (!remainingBuffer || remainingBuffer.byteLength === 0) {
    // 传输完成，清理事件监听
    dataChannel.removeEventListener('bufferedamountlow', sendNextChunk);
    console.log('文件传输已完成');
    return;
  }

  // 切割当前要发送的chunk
  const chunk = remainingBuffer.slice(0, chunkSize);
  remainingBuffer = remainingBuffer.slice(chunkSize);

  // 发送chunk
  try {
    dataChannel.send(chunk);
    console.log(`已发送 ${(chunk.byteLength / 1024 / 1024).toFixed(2)}MB，剩余 ${(remainingBuffer.byteLength / 1024 / 1024).toFixed(2)}MB`);
  } catch (error) {
    console.error('发送chunk失败:', error);
    // 可以在这里添加重试逻辑
  }
}

额外优化建议 #

• 动态调整chunk大小：如果你的应用需要适配不同网络环境，可以通过监听网络状态（比如navigator.connection）来动态调整chunkSize，弱网下用更小的chunk。
• 添加错误处理：给dataChannel绑定error和close事件，捕获发送过程中的异常（比如网络中断、通道意外关闭），及时给用户反馈或做重试处理。
• 进度跟踪：可以维护一个已发送字节数的变量，每次发送chunk后更新，配合DOM实现进度条展示，提升用户体验。

内容的提问来源于stack exchange，提问作者Priyangsu Banerjee