30秒上手PeerJS：从零搭建第一个WebRTC点对点聊天完整教程

30秒上手PeerJS从零搭建第一个WebRTC点对点聊天完整教程【免费下载链接】peerjsSimple peer-to-peer with WebRTC.项目地址: https://gitcode.com/gh_mirrors/pe/peerjsPeerJS 是一个基于 WebRTC 的轻量级点对点P2P通信库它把复杂的信令协商、连接建立和浏览器兼容处理全部封装成几行简单 API让你无需深入理解 SDP 和 ICE 细节就能快速搭建 WebRTC 点对点聊天、文件传输、音视频通话等应用。本文将带你用不到 30 分钟从零完成第一个可用的 P2P 文字聊天页面。为什么 PeerJS 适合新手做第一个 P2P 项目 ⚡原生 WebRTC API 需要手动处理信令交换SDP offer/answer、候选地址收集ICE candidates、多浏览器差异适配代码量往往上千行。PeerJS 的价值在于极简 APInew Peer()创建节点peer.connect()建立数据通道三行代码完成连接内置信令服务器默认接入公共信令服务开箱即用也可自建 PeerServer 完全托管数据与媒体双通道同一套 API 既支持DataConnection文字、JSON、二进制数据也支持MediaConnection音视频流成熟稳定MIT 协议核心逻辑见 lib/peer.ts导出入口在 lib/exports.ts浏览器支持来自 README.mdChromeEdgeFirefoxSafari83838015提示Firefox 102 才支持 MsgPack/CBOR 序列化详见 lib/dataconnection/StreamConnection/MsgPack.ts。安装 PeerJSnpm 一行命令搞定 打开终端执行npm install peerjsYarn 用户则运行yarn add peerjs。如果你希望通读源码、对照本教程学习内部实现可以先克隆仓库git clone https://gitcode.com/gh_mirrors/pe/peerjs cd peerjs npm install项目关键目录速览路径作用lib/peer.tsPeer 核心类连接/呼叫/事件的总入口lib/dataconnection/DataConnection.ts数据通道封装聊天消息走这里lib/mediaconnection.ts音视频媒体连接lib/negotiator.tsWebRTC offer/answer 协商管理lib/socket.ts与信令服务器的 WebSocket 通信e2e/端到端测试页面含数据收发、错误场景演示建立 P2P 数据通道只需 5 行核心代码点对点通信有两个角色发起方主动连接对方的 Peer ID接收方监听连接请求。发起方Aliceimport { Peer } from peerjs; const peer new Peer(); // 不传 ID由服务器分配一个随机 ID peer.on(open, (id) { console.log(我的 Peer ID, id); // 把这个 ID 告诉对方 }); const conn peer.connect(对方的-peer-id); conn.on(open, () { conn.send(hi!); // 通道就绪后即可发送 });接收方Bobpeer.on(connection, (conn) { conn.on(data, (data) { console.log(data); // 收到 hi! }); conn.on(open, () { conn.send(hello!); // 回复对方 }); });完整的 Peer 配置项自定义信令服务器地址、端口、TLS、调试级别等定义在 lib/peer.ts#L25-L68 的PeerOptions中事件模型集中在 lib/peer.ts#L80-L109。单页聊天示例完整可用的文字聊天应用 ✍️下面是一个可以直接跑起来的单页聊天 Demo页面引入构建产物dist/peerjs.min.js的方式与项目自带的 e2e/datachannel/serialization.html 测试页一致。两个浏览器窗口各打开一份输入对方 ID 点击连接即可互发消息!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titlePeerJS 点对点聊天/title /head body h1PeerJS 点对点聊天/h1 div idstatus等待连接…/div div idmessages/div input idpeer-id placeholder输入对方的 Peer ID / button onclickconnect()连接/button input idtext placeholder输入消息 / button onclicksend()发送/button script src/dist/peerjs.min.js/script script const peer new Peer(); const status document.getElementById(status); const messages document.getElementById(messages); let conn; peer.on(open, (id) { status.textContent 我的 Peer ID id; }); peer.on(error, (err) { status.textContent 出错 err.type; }); // 作为被动方对方主动连过来 peer.on(connection, (c) { conn c; c.on(open, () (status.textContent 对方已连接)); c.on(data, (text) append(对方, text)); }); // 作为主动方我点击连接按钮 function connect() { const otherId document.getElementById(peer-id).value; conn peer.connect(otherId); conn.on(open, () (status.textContent 连接成功)); conn.on(data, (text) append(对方, text)); } function send() { const text document.getElementById(text).value; if (conn) conn.send(text); append(我, text); } function append(who, text) { const div document.createElement(div); div.textContent who text; messages.appendChild(div); } /script /body /html运行方式npm run build生成dist/peerjs.min.js再用任意静态服务器打开页面即可。注意只需一方点击连接另一方等待即可。PeerJS 核心事件速查表 掌握下面这张表日常开发基本够用来源lib/peer.ts#L80-L109 与 lib/dataconnection/DataConnection.ts#L15-L26事件挂载对象触发时机openpeer与信令服务器建连成功拿到 Peer IDconnectionpeer对方发起数据连接到本机callpeer对方发起音视频呼叫openconn / call通道就绪可开始收发dataconn收到对方发来的数据closeconn / peer连接被关闭errorpeer / conn发生错误peer 级别通常致命会销毁实例进阶音视频通话与二进制数据 语音/视频通话先拿到本地媒体流再peer.call()发起对方用call.answer()接听navigator.mediaDevices.getUserMedia({ video: true, audio: true }, (stream) { const call peer.call(对方的-peer-id, stream); call.on(stream, (remoteStream) { videoElement.srcObject remoteStream; // 播放对方的音视频 }); }); peer.on(call, (call) { navigator.mediaDevices.getUserMedia({ video: true, audio: true }, (stream) { call.answer(stream); // 用本地流应答 }); });数据序列化默认序列化基于 BinaryPack对象、数组、字符串、二进制均可直接send项目测试中覆盖了中文、Emoji、大文件、TypedArray 等类型见 e2e/data.js。需要压缩传输时可切换 MsgPack 序列化器在peer.connect(id, { serialization: msgpack })中指定。常见坑与排错清单 ️Peer ID 冲突ID 全局唯一重复会触发unavailable-id错误。项目自带 e2e/peer/id-taken.html 专门演示ID 被占用时新连接会安全失败的场景。生产环境务必用 HTTPSgetUserMedia和 P2P 连接在非安全上下文非 HTTPS 的http://页面下会被浏览器拦截。信令服务器配置默认连接0.peerjs.com:443。需要数据自主可控时可自建 PeerServer 并在new Peer({ host, port, path, secure })中指定。调试技巧new Peer({ debug: 3 })打开最详细日志快速定位协商卡在哪一步参考 e2e/datachannel/serialization.js。错误几乎都致命peer.on(error)触发后实例即被销毁业务上应重建 Peer 而不是复用。总结你的下一步 到这里你已经完成了从零开始的 WebRTC 点对点聊天安装 PeerJS → 创建 Peer 实例 → 建立数据通道 → 实现单页聊天 → 了解事件模型与排错方法。接下来可以按这个路线深入阅读 lib/negotiator.ts看看 PeerJS 是如何替你完成 WebRTC 协商的跑一遍端到端测试npm test单元与npm run e2e浏览器把聊天升级为文件传输用send传File/ArrayBuffer序列化细节见 e2e/datachannel/ 下的测试用例几行代码撬动整条 P2P 通信链路——这就是 PeerJS 的魅力所在。【免费下载链接】peerjsSimple peer-to-peer with WebRTC.项目地址: https://gitcode.com/gh_mirrors/pe/peerjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考