本文详解 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)）、实时协作或音视频通话等高级场景。
