首页 > 网页制作 >如何使用PeerJS建立对等连接并实现实时数据传输

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

来源：互联网 2026-06-30 08:23:12

PeerJS 这东西听着高大上，其实就是帮你把 WebRTC 的复杂度藏了起来。这篇文章的目标很简单：把初始化的坑、连接的时序、消息怎么发怎么收，以及怎么处理错误，都讲明白。附带可直接跑的代码，看完你就能搭一套稳当的 P2P 通信。 PeerJS 是一个轻量级的 WebRTC 封装库，让浏览器之间能

PeerJS 这东西听着高大上，其实就是帮你把 WebRTC 的复杂度藏了起来。这篇文章的目标很简单：把初始化的坑、连接的时序、消息怎么发怎么收，以及怎么处理错误，都讲明白。附带可直接跑的代码，看完你就能搭一套稳当的 P2P 通信。

PeerJS 是一个轻量级的 WebRTC 封装库，让浏览器之间能直接建立点对点连接，不需要中间服务器就能传文字、文件甚至流媒体。不过，它依赖异步通信机制，状态变化需要通过事件监听来把握。很多新手在使用 PeerJS 开发 P2P 应用时掉坑，主要原因是没有检查连接状态、事件监听时机不对，或者调试方法选错了。

PeerJS 初始化与连接管理

正确初始化与 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 是不是 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');  }}

PeerJS 开发关键注意事项

别用 alert() 来调试——那东西会阻塞主线程，把 WebRTC 的异步流程搅成一团乱。老老实实用 console.log() 或者直接更新 DOM；
每个连接都得独立处理：peer.on('connection') 可能被触发多次，每个对端都有独立的连接对象。代码里的 peerConnection 变量只保存了最后一次，如果你要同时跟多个人通信，得用个 Map 来存；
别忘了给错误事件上监听：为 peerConnection 和 peer 实例绑定 error 事件，网络超时、ID 不存在、ICE 失败这些异常都能抓到；
资源清理要到位：页面卸载前记得调用 peer.destroy() 释放资源，防止内存泄漏——好习惯。