如何使用 PeerJS 建立对等连接并实时传输数据

本文详解 peerjs 的正确初始化、连接建立、消息收发与错误处理流程，通过可运行示例代码帮助开发者快速构建稳定可靠的 p2p 通信功能。

本文详解 peerjs 的正确初始化、连接建立、消息收发与错误处理流程，通过可运行示例代码帮助开发者快速构建稳定可靠的 p2p 通信功能。

PeerJS 是一个轻量级 WebRTC 封装库，允许浏览器之间直接建立点对点（P2P）连接，无需中间服务器即可传输文本、文件或流媒体数据。但其连接行为具有异步性与状态依赖性，初学者常因忽略连接状态校验、事件监听时机或调试方式而失败。

✅ 正确初始化与 ID 获取

首先需创建 Peer 实例，并在 'open' 事件中获取唯一 id——该 ID 是其他客户端连接你的凭据：

const div = document.getElementById('div');let peer = new Peer(); // 可选：new Peer({ host: 'your-peer-server.com', port: 9000, path: '/peerjs' })let peerConnection;peer.on('open', (id) => {  div.innerHTML = `My peer ID is: ${id}`;});

⚠️ 注意：若未指定自托管 PeerServer，默认使用 peerjs.com 公共服务器（仅限开发测试）。生产环境务必部署私有服务器以保障稳定性与安全性。

✅ 主动连接与消息发送

调用 peer.connect(targetId) 发起连接后，必须等待 'open' 事件触发才能安全发送数据：

function connect() {  const targetId = document.getElementById('id').value.trim();  if (!targetId) return;  peerConnection = peer.connect(targetId);  peerConnection.on('open', () => {    console.log('✅ Connected to peer:', targetId);    peerConnection.send('hi!');  });  peerConnection.on('error', (err) => {    console.error('❌ Connection failed:', err);    alert(`Connection error: ${err.message}`);  });}

✅ 接收连接与监听数据

对方调用 connect() 时，本端会触发 peer.on('connection')。在此回调中监听 'data' 事件接收消息：

peer.on('connection', (conn) => {  console.log('? Incoming connection from:', conn.peer);  conn.on('data', (data) => {    console.log('? Received:', data);    // ✅ 推荐：将消息追加到 DOM 而非使用 alert（阻塞 UI 且体验差）    const msgDiv = document.createElement('div');    msgDiv.textContent = `[${conn.peer}]: ${data}`;    document.body.appendChild(msgDiv);  });  conn.on('close', () => {    console.log('? Connection closed');  });});

✅ 安全发送与状态管理

发送前务必检查 peerConnection.open 状态，避免向已关闭或未建立的连接写入数据：

function send() {  const msgInput = document.getElementById('msg');  const msg = msgInput.value.trim();  if (!msg || !peerConnection || !peerConnection.open) {    console.warn('⚠️ Cannot send: connection not ready or message empty');    return;  }  try {    peerConnection.send(msg);    console.log('? Sent:', msg);    msgInput.value = ''; // 清空输入框  } catch (err) {    console.error('❌ Send failed:', err);  }}function disconnect() {  if (peerConnection && !peerConnection.closed) {    peerConnection.close();    console.log('? Disconnected');  }}

? 关键注意事项

• 不要依赖 alert() 调试：它会阻塞主线程并干扰 WebRTC 异步流程，应统一使用 console.log() 或 DOM 更新；
• 每个连接需独立处理：peer.on('connection') 可能触发多次（多个对端），peerConnection 变量仅保存最后一次连接，如需多连接请改用 Map 存储；
• 添加错误监听：为 peerConnection 和 peer 实例绑定 'error' 事件，捕获网络超时、ID 不存在、ICE 失败等异常；
• 资源清理：页面卸载前调用 peer.destroy() 释放资源，防止内存泄漏。

完整 HTML 示例已集成上述最佳实践，可直接运行验证。掌握这些核心模式后，你即可扩展支持文件传输（conn.send(blob)）、实时协作或音视频通话等高级场景。