PeerJS数据连接异常：音频通话应用嵌套监听失效及数据接收咨询

我来帮你理清楚这个问题哈！PeerJS的事件监听逻辑是先注册、后捕获——只有当你提前把监听挂载到Peer实例上，它才能捕捉到后续触发的事件。你把peer.on('connection', ...)放在peer.on('call', ...)内部，就会出现这些问题：

• 如果发起方先建立数据连接、再发起呼叫，那connection事件早就触发完了，你的监听还没注册，自然抓不到；
• 就算发起方同时操作，也存在时序差，监听注册的时机可能晚于事件触发；
• 更麻烦的是，每次收到呼叫都会重复注册一次connection监听，后续再收到数据连接时会多次触发回调，导致逻辑混乱。

你需要把connection事件的监听和call事件的监听放在同一层级，直接挂载在Peer实例上，这样只要Peer实例存在，就能随时捕获新的数据连接。然后在数据连接的data事件里处理收到的指令（比如关闭音频流）。

给你个具体的代码示例：

// 初始化接收方的Peer实例
const peer = new Peer('接收方的PeerID', {
  host: 'your-peer-server-host',
  port: 9000,
  path: '/peerjs'
});

// 先监听数据连接事件（和call事件同级）
peer.on('connection', (conn) => {
  console.log('收到数据连接');
  // 监听数据接收
  conn.on('data', (data) => {
    console.log('收到呼叫方的数据:', data);
    // 根据收到的数据执行关闭音频流的逻辑
    if (data.type === 'close-audio') {
      // 示例：关闭本地音频轨道
      // localStream.getAudioTracks()[0].stop();
      // 或者禁用远程音频
      // remoteStream.getAudioTracks()[0].enabled = false;
      console.log('执行关闭音频流操作');
    }
  });
});

// 再监听呼叫事件
peer.on('call', (call) => {
  // 先获取本地媒体流（假设已提前获取）
  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
    .then((localStream) => {
      // 接听呼叫
      call.answer(localStream);
      // 处理远程流
      call.on('stream', (remoteStream) => {
        const remoteAudio = document.getElementById('remote-audio');
        remoteAudio.srcObject = remoteStream;
      });
    });
});

另外要提醒下：发起方最好先建立数据连接、再发起呼叫（或者同时操作），确保接收方的connection监听已经注册完毕。发起方的核心代码大概是这样：

const conn = peer.connect('接收方的PeerID');
conn.on('open', () => {
  // 发送关闭音频的指令
  conn.send({ type: 'close-audio' });
});

// 发起呼叫
const call = peer.call('接收方的PeerID', localStream);

这样就能保证接收方正常捕获数据连接并处理指令啦！

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