本文详解 peerjs 的基础连接流程与双向通信实现，涵盖 peer 实例初始化、id 获取、主动连接、消息收发及错误处理，帮助开发者快速构建稳定可靠的 web 端点对点通信应用。
本文详解 peerjs 的基础连接流程与双向通信实现，涵盖 peer 实例初始化、id 获取、主动连接、消息收发及错误处理，帮助开发者快速构建稳定可靠的 web 端点对点通信应用。
PeerJS 是一个基于 WebRTC 的轻量级库，可简化浏览器间点对点（P2P）连接的建立与数据传输。要成功启用 PeerJS 连接并实现文本消息共享，需严格遵循其事件驱动模型，并注意连接状态管理与错误反馈机制。
✅ 正确初始化与 ID 获取
首先，创建 Peer 实例并监听 'open' 事件获取本地唯一 ID：
const div = document.getElementById('div');
let peer = new Peer(); // 自动连接默认 PeerServer（https://peerjs-server.herokuapp.com）
let peerConnection;
peer.on('open', (id) => {
div.innerHTML = `My peer ID is: ${id}`;
});
⚠️ 注意：若未指定 key 或 host/port，PeerJS 将使用公共服务器（已逐步弃用），生产环境务必部署私有 PeerServer 并显式配置：
let peer = new Peer({
key: 'your-api-key',
host: 'your-peer-server.com',
port: 9000,
path: '/peerjs'
});
✅ 主动连接与消息发送
用户输入目标 Peer ID 后，调用 peer.connect() 发起连接。关键在于：必须在 'open' 事件触发后才可安全发送数据：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
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}`);
});
}
✅ 接收消息：监听全局 'connection' 事件
PeerJS 使用被动监听模式接收入站连接——所有传入连接均通过 peer.on('connection') 捕获：
peer.on('connection', (conn) => {
console.log('? Incoming connection from:', conn.peer);
conn.on('data', (data) => {
console.log('? Received:', data);
// ✅ 推荐：将消息追加到 DOM 而非使用 alert()
const msgDiv = document.createElement('div');
msgDiv.textContent = `[${conn.peer}]: ${data}`;
document.body.appendChild(msgDiv);
});
conn.on('close', () => {
console.log('? Connection closed');
});
conn.on('error', (err) => {
console.error('❌ Data channel error:', err);
});
});
✅ 安全发送与断连控制
发送前必须校验连接状态，避免向已关闭或未建立的连接写入数据：
function send() {
const msgInput = document.getElementById('msg');
const msg = msgInput.value.trim();
if (!msg || !peerConnection || !peerConnection.open) {
console.warn('⚠️ Cannot send: connection closed or empty message');
return;
}
try {
peerConnection.send(msg);
console.log('? Sent:', msg);
msgInput.value = ''; // 清空输入框
} catch (e) {
console.error('❌ Send failed:', e);
}
}
function disconnect() {
if (peerConnection && !peerConnection.closed) {
peerConnection.close();
console.log('? Disconnected');
}
}
? 关键注意事项总结
- 不要依赖 alert() 调试：浏览器可能拦截或延迟弹窗，应统一使用 console.log() + DOM 更新进行可视化反馈；
- 每个连接独立监听：peer.on('connection') 是入口，每个 conn 对象需单独绑定 'data'、'close'、'error' 事件；
- 异常必须捕获：网络波动、ID 错误、跨域限制等均会触发 'error'，忽略将导致静默失败；
- 资源及时释放：调用 conn.close() 或 peer.destroy() 避免内存泄漏与信令通道占用；
- HTTPS 强制要求：WebRTC 在现代浏览器中仅支持 HTTPS（或 localhost），HTTP 页面将无法启用摄像头/麦克风，部分功能受限。
通过以上结构化实现，即可构建健壮的 PeerJS 文本通信系统。后续可扩展为文件传输（conn.send(Blob)）、实时音视频（peer.call()）或多人协作场景（结合 signaling server 管理拓扑）。
