WebRTC连接建立时效性问题解析：手动信令交换的挑战与优化

export default class P2P {
  constructor() {
    this.peerConnection = null;
    this.dataChannel = null;
    this.configuration = {
      iceServers: [
        {
          urls: ['stun:stun4.l.google.com:19302']
        }
      ],
      // 推荐使用默认值或0/1，避免过大的资源浪费
      iceCandidatePoolSize: 0 
    };
    // 假设这是一个用于发送信令消息的函数
    this.sendSignalingMessage = (message) => {
      console.log('Sending signaling message:', message);
      // 实际应用中，这里会通过WebSocket等发送给远程Peer
    };
  };

  createPeerConnection = () => {
    this.peerConnection = new RTCPeerConnection(this.configuration);
    this.openDataChannel();

    // 监听ICE候选者生成事件，实现增量式交换
    this.peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        // 将ICE候选者发送给远程Peer
        this.sendSignalingMessage({ type: 'iceCandidate', candidate: event.candidate });
      } else {
        console.log('ICE gathering complete.');
        // 如果所有候选者都已发送，且SDP也已发送，则可以认为ICE收集阶段完成
      }
    };

    this.peerConnection.addEventListener('connectionstatechange', () => {
      console.log('Connection state changed:', this.peerConnection.connectionState);
    });

    this.peerConnection.oniceconnectionstatechange = () => {
      console.log('ICE connection state changed:', this.peerConnection.iceConnectionState);
    };

    // 监听数据通道连接状态
    this.peerConnection.ondatachannel = (event) => {
      this.dataChannel = event.channel;
      this.dataChannel.onopen = () => console.log('Data channel opened!');
      this.dataChannel.onmessage = (e) => console.log('Data channel message:', e.data);
      this.dataChannel.onclose = () => console.log('Data channel closed!');
      this.dataChannel.onerror = (e) => console.error('Data channel error:', e);
    };
  };

  openDataChannel = () => {
    let options = { 
      ordered: true // reliable在WebRTC中已更名为ordered
    }; 
    this.dataChannel = this.peerConnection.createDataChannel('test', options);
    this.dataChannel.binaryType = "arraybuffer";
    this.dataChannel.onopen = () => console.log('Local Data channel opened!');
    this.dataChannel.onmessage = (e) => console.log('Local Data channel message:', e.data);
    this.dataChannel.onclose = () => console.log('Local Data channel closed!');
    this.dataChannel.onerror = (e) => console.error('Local Data channel error:', e);
  };

  createOffer = async () => {
    this.createPeerConnection();
    const offer = await this.peerConnection.createOffer();
    await this.peerConnection.setLocalDescription(offer);
    console.log("Created local offer.");
    // 将Offer发送给远程Peer
    this.sendSignalingMessage({ type: 'offer', sdp: this.peerConnection.localDescription });
    return JSON.stringify(this.peerConnection.localDescription);
  };

  acceptOffer = async (offerSdp) => {
    if (!this.peerConnection) {
      this.createPeerConnection();
    }
    const offer = new RTCSessionDescription(offerSdp);
    await this.peerConnection.setRemoteDescription(offer);
    console.log("Accepted remote offer.");
  };

  createAnswer = async () => {
    const answer = await this.peerConnection.createAnswer();
    await this.peerConnection.setLocalDescription(answer);
    console.log("Created local answer.");
    // 将Answer发送给远程Peer
    this.sendSignalingMessage({ type: 'answer', sdp: this.peerConnection.localDescription });
    return JSON.stringify(this.peerConnection.localDescription);
  };

  acceptAnswer = async (answerSdp) => {
    // 确保peerConnection已存在且远程描述尚未设置为Answer
    // 注意：这里的if条件可能需要根据实际信令流程调整
    // 一般情况下，直接设置即可，WebRTC内部会处理描述更新
    if (this.peerConnection && (!this.peerConnection.currentRemoteDescription || this.peerConnection.currentRemoteDescription.type === 'offer')) {
      const answer = new RTCSessionDescription(answerSdp);
      await this.peerConnection.setRemoteDescription(answer);
      console.log('Accepted remote answer.');
    } else {
      console.warn('PeerConnection not initialized or remote description already set.');
    }
  };

  // 接收到远程Peer的ICE候选者时调用
  addRemoteIceCandidate = async (candidate) => {
    try {
      if (this.peerConnection && candidate) {
        await this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
        console.log('Added remote ICE candidate.');
      }
    } catch (e) {
      console.error('Error adding remote ICE candidate:', e);
    }
  };

  // 模拟信令服务器接收到消息的入口
  onSignalingMessage = async (message) => {
    switch (message.type) {
      case 'offer':
        await this.acceptOffer(message.sdp);
        await this.createAnswer(); // 收到Offer后立即创建并发送Answer
        break;
      case 'answer':
        await this.acceptAnswer(message.sdp);
        break;
      case 'iceCandidate':
        await this.addRemoteIceCandidate(message.candidate);
        break;
      default:
        console.warn('Unknown signaling message type:', message.type);
    }
  };
};