PeerJS连接无法生成ID及无消息显示问题排查与实现咨询

问题根源分析 #

原代码存在多处PeerJS API误用和逻辑错误，导致无法生成ID、无法建立连接：

• 不存在的API调用：peer.generateID()、peer.createSession()都不是PeerJS的官方方法，PeerJS没有这些接口。
• 提前创建DataChannel：DataChannel依赖已建立的连接，不能在Peer实例初始化时直接创建，此时没有有效连接，会导致通道无效。
• 缺失必要DOM元素：joinHost()函数尝试获取hostPeerID输入框的值，但页面中没有这个元素，无法获取主机ID。
• 连接逻辑错误：主机端监听连接的方式错误，客户端连接后的处理逻辑混乱，没有正确处理连接对象的回调。

修复后的完整代码 #

<html>
<head>
  <title>Peer to Peer Activity</title>
  <script src="https://cdn.peerjs.io/latest/peerjs.min.js"></script>
</head>
<body>
  <h1>Peer to Peer Activity</h1>

  <p>Select an option:</p>

  <button onclick="createHost()">Create Host</button>
  <button onclick="joinHost()">Join Host</button>

  <!-- 新增主机ID输入框 -->
  <input type="text" id="hostPeerID" placeholder="输入主机Peer ID" />
  
  <input type="text" id="messageInput" placeholder="输入消息" />
  <button onclick="sendMessage()">Send Message</button>

  <div id="message"></div>

  <script>
    let peer;
    let dataChannel;

    // 初始化Peer实例
    function initPeer(customId = null) {
      peer = new Peer(customId);
      
      // 监听Peer实例就绪事件，获取分配的ID
      peer.on('open', (id) => {
        if (customId) {
          document.getElementById('message').innerHTML = `主机已创建，你的Peer ID: <strong>${id}</strong>`;
          // 保存主机ID到localStorage
          localStorage.setItem('hostPeerID', id);
        }
      });

      // 主机端监听 incoming 连接
      peer.on('connection', (conn) => {
        // 接受连接
        conn.on('open', () => {
          dataChannel = conn;
          bindMessageListener();
          document.getElementById('message').innerHTML = '已收到客户端连接';
        });
      });

      // 监听错误
      peer.on('error', (err) => {
        document.getElementById('message').innerHTML = `错误: ${err.message}`;
      });
    }

    // 创建主机
    function createHost() {
      // 可以自定义ID，也可以不传让服务器自动生成
      initPeer();
    }

    // 加入主机
    function joinHost() {
      const hostPeerID = document.getElementById('hostPeerID').value.trim();
      if (!hostPeerID) {
        document.getElementById('message').innerHTML = '请输入主机Peer ID';
        return;
      }

      initPeer();
      // 连接到主机
      const conn = peer.connect(hostPeerID);
      
      conn.on('open', () => {
        dataChannel = conn;
        bindMessageListener();
        document.getElementById('message').innerHTML = `已成功连接到主机: ${hostPeerID}`;
        // 保存连接的主机ID到localStorage
        localStorage.setItem('connectedHostID', hostPeerID);
      });
    }

    // 绑定消息监听
    function bindMessageListener() {
      dataChannel.onmessage = (event) => {
        const messageContent = `收到消息: ${event.data}`;
        document.getElementById('message').innerHTML = messageContent;
        // 保存消息到localStorage
        localStorage.setItem('lastReceivedMessage', event.data);
      };
    }

    // 发送消息
    function sendMessage() {
      const message = document.getElementById('messageInput').value.trim();
      if (!message || !dataChannel) {
        document.getElementById('message').innerHTML = '消息为空或未建立连接';
        return;
      }

      dataChannel.send(message);
      document.getElementById('messageInput').value = '';
    }
  </script>
</body>
</html>

修复说明 #

• 正确的Peer初始化：通过new Peer()创建实例，监听open事件获取分配的Peer ID，支持自定义ID或自动生成。
• DataChannel创建时机：在连接建立（open事件触发）后，获取连接对象作为DataChannel，确保通道有效。
• 新增必要DOM元素：添加了hostPeerID输入框，用于客户端输入主机ID。
• 完善的连接逻辑：主机端监听connection事件接受连接，客户端调用peer.connect()主动发起连接，双方在连接打开后绑定消息监听。
• 错误处理与localStorage存储：添加错误监听，同时将主机ID、连接的主机ID、收到的消息存入localStorage，符合需求。

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