PeerJS多人聊天室搭建遇阻：跨设备无响应及可行性咨询

当然能用PeerJS搭建多人聊天室，你当前代码的核心问题是只有被动接收连接的逻辑，完全没有主动发起连接的步骤——两台设备打开页面后，互相没建立任何连接通道，自然毫无响应。

现有代码的关键缺陷 #

• 缺少输入对方Peer ID并主动发起连接的UI和逻辑
• 仅处理了「他人主动连接我」的场景，但自己无法主动连接他人
• 没有保存所有活跃连接的统一管理逻辑

修改后的可运行代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>P2P多人聊天室</title>
    <style>
      #peer-id {
        margin-bottom: 10px;
        font-weight: bold;
      }
      .connect-section {
        margin-bottom: 15px;
      }
      #peers {
        margin-bottom: 10px;
        color: #666;
      }
      #messages div {
        margin-bottom: 5px;
        padding: 4px 8px;
        border-radius: 4px;
        background: #f0f0f0;
      }
      #messages div.self {
        background: #e3f2fd;
        text-align: right;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
   
    <script>
      const peer = new Peer();
      // 存储所有活跃连接
      let activeConnections = [];

      peer.on('open', (id) => {
        $('#peer-id').text(`你的Peer ID: ${id}`);
      });

      // 处理他人发起的连接
      peer.on('connection', (conn) => {
        handleNewConnection(conn);
      });

      // 处理新连接的通用逻辑
      function handleNewConnection(conn) {
        // 避免重复添加同一个连接
        if (!activeConnections.find(c => c.peer === conn.peer)) {
          activeConnections.push(conn);
          $('#peers').append(`<div id="peer-${conn.peer}">已连接: ${conn.peer}</div>`);
        }

        // 接收对方消息
        conn.on('data', (data) => {
          $('#messages').append(`<div>${conn.peer}: ${data}</div>`);
        });

        // 连接断开处理
        conn.on('close', () => {
          activeConnections = activeConnections.filter(c => c.peer !== conn.peer);
          $(`#peer-${conn.peer}`).remove();
        });

        // 连接错误处理
        conn.on('error', (err) => {
          alert(`连接出错: ${err.message}`);
        });
      }

      // 主动连接对方Peer
      $('#connect-btn').click(() => {
        const targetId = $('#target-id').val().trim();
        if (!targetId || targetId === peer.id) return;

        // 检查是否已连接过
        if (activeConnections.find(c => c.peer === targetId)) {
          alert('已连接过该Peer');
          return;
        }

        const conn = peer.connect(targetId);
        conn.on('open', () => {
          handleNewConnection(conn);
          $('#target-id').val('');
        });

        conn.on('error', (err) => {
          alert(`无法连接: ${err.message}`);
        });
      });

      // 发送消息
      $('#send').click(() => {
        const message = $('#message').val().trim();
        if (!message) return;

        // 给自己显示消息
        $('#messages').append(`<div class="self">我: ${message}</div>`);

        // 给所有活跃连接发送消息
        activeConnections.forEach((conn) => {
          if (conn.open) {
            conn.send(message);
          }
        });

        $('#message').val('');
      });

      // 回车发送消息
      $('#message').keypress((e) => {
        if (e.which === 13) {
          $('#send').click();
        }
      });
    </script>
  </head>
  <body>
    <div id="peer-id"></div>
    <div class="connect-section">
      <input type="text" id="target-id" placeholder="输入对方Peer ID">
      <button id="connect-btn">连接对方</button>
    </div>
    <div id="peers">已连接的Peer:</div>
    <div id="messages"></div>
    <input type="text" id="message" placeholder="输入消息">
    <button id="send">发送</button>
  </body>
</html>

修改说明 #

• 新增了「输入对方Peer ID」的输入框和连接按钮，实现主动连接逻辑
• 新增activeConnections数组统一管理所有活跃连接，避免重复连接
• 添加了连接断开、错误的处理逻辑，提升稳定性
• 优化了消息显示样式，区分自己和他人的消息
• 增加回车发送消息的便捷功能

多人聊天扩展说明 #

如果要支持更多用户，核心逻辑是：每个新加入的用户需要获取当前所有在线用户的Peer ID，然后逐个发起连接；或者可以搭建一个简单的房间服务器（用Node.js+Express即可），用来同步房间内所有在线Peer的ID，这样新用户就能自动连接所有已在线用户，不用手动输入每个ID。

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