WebSocket 不参与 WebRTC 媒体传输，仅负责安全低延迟交换 SDP（offer/answer）和 ICE candidate 等信令数据；需搭建 WebSocket 服务器中转消息，浏览器端通过其协同 RTCPeerConnection 完成连接建立，消息须用带 type 字段的 JSON 格式封装，并注意 HTTPS、房间标识、错误重连等部署细节。
WebSocket 本身不参与 WebRTC 媒体传输，它的作用是为两个对等端（Peer）安全、低延迟地交换 SDP 协议描述（offer/answer）和 ICE 候选地址（candidate），即完成信令（signaling）过程。WebRTC 的 P2P 连接建立必须依赖外部信令通道，WebSocket 是最常用、最实用的选择之一。
1. 搭建 WebSocket 信令服务器（Node.js + ws 示例）
你需要一个轻量级服务来中转信令消息，不能靠浏览器直连（因为 WebRTC 没有内置发现机制）。推荐使用 ws 库（比 Socket.IO 更简洁，无额外协议开销）：
- 安装：
npm install ws - 启动服务（
server.js）：const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); <p>wss.on('connection', (ws, req) => { // 可选：用 URL 查询参数传递 roomID 或 userID const url = new URL(req.url, '<a href="https://www.php.cn/link/bb122c8fe6c764e8aae555e2186a6344">https://www.php.cn/link/bb122c8fe6c764e8aae555e2186a6344</a>'); const roomId = url.searchParams.get('room');</p><p>ws.on('message', (data) => { try { const msg = JSON.parse(data); // 广播给同房间其他客户端（简单房间逻辑） wss.clients.forEach(client => { if (client !== ws && client.readyState === WebSocket.OPEN && client.roomId === roomId) { client.send(JSON.stringify(msg)); } }); // 也可只转发给指定 target（需 msg 包含 to 字段） } catch (e) { console.error('Invalid JSON:', e); } });</p><p>// 标记连接所属房间（简化版） ws.roomId = roomId; });
2. 浏览器端：创建 RTCPeerConnection + WebSocket 协作流程
关键不是“用 WebSocket 实现 WebRTC”，而是让 WebSocket 成为 RTCPeerConnection 的“嘴”——替它说话（发 offer/answer/candidate）和“耳朵”——听对方说话。
- 初始化连接时，先连 WebSocket，再创建
RTCPeerConnection（带 STUN/TURN 配置） - 发起方调用
createOffer()→setLocalDescription()→ 通过 WebSocket 发送 offer - 接收方收到 offer 后，调用
setRemoteDescription(offer)→createAnswer()→setLocalDescription(answer)→ 发送 answer - 双方在
onicecandidate回调中，把每个 candidate 通过 WebSocket 发给对方；收到 candidate 后调用addIceCandidate() - 监听
onconnectionstatechange或oniceconnectionstatechange判断是否连通成功
3. 消息格式要清晰、带类型字段
不要裸发 SDP 字符串。统一用 JSON 封装，包含 type 字段区分消息语义，便于扩展和调试：
立即学习“前端免费学习笔记（深入）”；
// offer 消息
{ "type": "offer", "sdp": "v=0\r\no=- 123... ", "from": "alice" }
<p>// candidate 消息（注意：candidate 可能为 null，表示 ICE 收集结束）
{ "type": "candidate", "candidate": "candidate:abc... 1 udp 2130706431...", "from": "bob" }</p><p>// answer 消息
{ "type": "answer", "sdp": "v=0\r\no=- 456... ", "to": "alice" }客户端根据 type 分发处理逻辑，避免 if-else 堆砌。
4. 注意实际部署中的关键细节
-
跨域与 HTTPS：现代浏览器强制要求
RTCPeerConnection在 HTTPS（或 localhost）下运行；WebSocket 地址也需匹配（wss://生产环境必需） - 房间/用户标识：用 URL 参数、JWT token 或登录态关联 WebSocket 连接与 WebRTC 角色，避免消息错发
-
错误兜底：WebSocket 断连时暂停发送信令，并尝试重连；同时监听
pc.oniceconnectionstatechange状态退化（如变为disconnected或failed）及时提示 - 不传媒体流本身：WebSocket 只传文本信令，音视频数据走 P2P 加密 UDP，这才是 WebRTC 的核心价值
信令只是桥梁，真正通话靠的是 SDP 协商一致 + ICE 打洞成功 + DTLS/SRTP 加密。WebSocket 做好“快递员”，不丢件、不误投，剩下的交给浏览器底层的 WebRTC 引擎。
