使用PeerJS建立对等连接实现实时数据传输教程

PeerJS 虽然听起来颇具技术门槛，本质上就是将 WebRTC 的复杂机制优雅地封装起来。本文的核心目标非常明确：系统讲解 PeerJS 初始化的常见问题、连接建立的时序控制、消息收发流程，以及错误处理策略。配合可直接运行的示例代码，阅读后你便能搭建一套稳定可靠的 P2P 实时通信方案。

PeerJS 作为一款轻量级的 WebRTC 封装库，使得浏览器之间能够直接建立点对点连接，无需依赖中间服务器即可传输文本、文件乃至流媒体数据。然而，其底层采用异步通信机制，状态变化必须通过事件监听来精确把控。许多初学者之所以遇到问题，根源往往在于未检查连接状态、事件监听时机不当，或是调试策略选择有误。

✅ PeerJS 正确初始化与 Peer ID 获取指南

首先创建一个 Peer 实例，随后在 open 事件回调中获取唯一的 Peer 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 的公共服务器——该方案仅适用于开发与测试环境。生产环境上线时，务必搭建私有 PeerServer，以确保连接的稳定性与数据传输的安全性。

✅ 主动发起连接与发送消息

调用 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 属性值为 true，切忌向已断开的连接写入数据：

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 示例已将上述最佳实践全面集成，直接运行即可验证实际效果。掌握了这套开发模式，向文件传输、实时协作编辑、音视频通话等场景扩展应用便水到渠成。