WebRTC连接建立超时问题解析：手动信令交换与ICE机制的挑战

export default class P2PConnectionManager {
  constructor(signalingChannel) {
    this.peerConnection;
    this.dataChannel;
    this.signalingChannel = signalingChannel; // 假设这是一个WebSocket或类似的信令通道
    this.configuration = {
      iceServers: [
        { urls: ['stun:stun4.l.google.com:19302'] }
      ],
      // iceCandidatePoolSize 通常不需要设置过大，甚至可以省略，
      // 因为我们通过onicecandidate事件实时交换。
      // iceCandidatePoolSize: 0 
    };
  }

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

    // 1. 监听ICE候选者事件，并立即通过信令服务器发送
    this.peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        console.log('本地ICE候选者生成并发送:', event.candidate);
        // 通过信令服务器将候选者发送给远端
        this.signalingChannel.send({ type: 'iceCandidate', candidate: event.candidate });
      } else {
        console.log('ICE候选者收集完成');
        // 可选：当ICE候选者收集完成后，可以发送一个信号
        // this.signalingChannel.send({ type: 'iceGatheringComplete' });
      }
    };

    // 2. 监听连接状态变化，用于调试和UI更新
    this.peerConnection.onconnectionstatechange = () => {
      console.log('PeerConnection 状态:', this.peerConnection.connectionState);
    };

    this.peerConnection.oniceconnectionstatechange = () => {
      console.log('ICE 连接状态:', this.peerConnection.iceConnectionState);
    };

    this.peerConnection.onicegatheringstatechange = () => {
      console.log('ICE 收集状态:', this.peerConnection.iceGatheringState);
    };

    // 3. 监听数据通道事件 (如果是接收方)
    this.peerConnection.ondatachannel = (event) => {
      console.log('接收到远程数据通道:', event.channel.label);
      this.dataChannel = event.channel;
      this.dataChannel.onopen = () => console.log('数据通道已打开');
      this.dataChannel.onmessage = (msgEvent) => console.log('收到数据通道消息:', msgEvent.data);
      this.dataChannel.onclose = () => console.log('数据通道已关闭');
    };
  }

  // 创建Offer方
  async createOffer() {
    await this.createPeerConnection();
    this.dataChannel = this.peerConnection.createDataChannel('test-channel'); // 创建数据通道
    this.dataChannel.onopen = () => console.log('本地数据通道已打开');
    this.dataChannel.onmessage = (event) => console.log('收到数据通道消息:', event.data);

    const offer = await this.peerConnection.createOffer();
    await this.peerConnection.setLocalDescription(offer);
    console.log('创建并设置本地Offer:', offer);
    // 通过信令服务器发送Offer
    this.signalingChannel.send({ type: 'offer', sdp: offer });
    return offer;
  }

  // 接收Offer方
  async handleOffer(remoteOffer) {
    await this.createPeerConnection();
    await this.peerConnection.setRemoteDescription(new RTCSessionDescription(remoteOffer));
    console.log('设置远程Offer:', remoteOffer);

    const answer = await this.peerConnection.createAnswer();
    await this.peerConnection.setLocalDescription(answer);
    console.log('创建并设置本地Answer:', answer);
    // 通过信令服务器发送Answer
    this.signalingChannel.send({ type: 'answer', sdp: answer });
    return answer;
  }

  // 接收Answer方
  async handleAnswer(remoteAnswer) {
    // 只有当本地描述已设置，且远程描述尚未设置时才设置远程Answer
    if (this.peerConnection.currentLocalDescription && !this.peerConnection.currentRemoteDescription) {
      await this.peerConnection.setRemoteDescription(new RTCSessionDescription(remoteAnswer));
      console.log('设置远程Answer:', remoteAnswer);
    } else {
      console.warn('远程Answer已设置或本地描述未准备好，忽略此Answer。');
    }
  }

  // 处理接收到的远程ICE候选者
  async handleIceCandidate(candidate) {
    try {
      if (this.peerConnection && candidate) {
        await this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
        console.log('添加远程ICE候选者:', candidate);
      }
    } catch (e) {
      console.error('添加ICE候选者失败:', e);
    }
  }
}

// 实际应用中，'signalingChannel' 会是一个真实的通信实例，例如：
// const ws = new WebSocket('ws://your-signaling-server.com');
// ws.onmessage = async (event) => {
//   const message = JSON.parse(event.data);
//   if (message.type === 'offer') {
//     await p2pManager.handleOffer(message.sdp);
//   } else if (message.type === 'answer') {
//     await p2pManager.handleAnswer(message.sdp);
//   } else if (message.type === 'iceCandidate') {
//     await p2pManager.handleIceCandidate(message.candidate);
//   }
// };
// const p2pManager = new P2PConnectionManager(ws);