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