WebSocket用于客户端与服务器双向通信，如聊天室；WebRTC实现浏览器间点对点音视频及数据传输，需信令服务器辅助建立连接。
要实现网页中的实时通信，JavaScript 提供了两种核心技术：WebSocket 和 WebRTC。它们用途不同，但都能实现实时数据传输。
WebSocket：实现客户端与服务器的双向实时通信
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。适合需要服务器主动推送消息的场景，比如聊天室、实时通知、股票行情等。
使用方法：- 创建 WebSocket 实例，连接指定的服务器地址
- 监听 open、message、error 和 close 事件
- 通过 send() 方法发送数据，onmessage 接收数据
示例代码：
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
console.log('连接已建立');
socket.send('你好，服务器！');
};
socket.onmessage = (event) => {
console.log('收到消息：', event.data);
};
socket.onerror = (error) => {
console.error('连接出错：', error);
};
socket.onclose = () => {
console.log('连接已关闭');
};
后端可以使用 Node.js 配合 ws 或 socket.io 等库来搭建 WebSocket 服务。
立即学习“Java免费学习笔记（深入）”；
WebRTC：实现浏览器之间的点对点通信
WebRTC（Web Real-Time Communication）支持浏览器之间直接传输音视频流或任意数据，常用于视频会议、语音通话、P2P 文件传输等。
关键组件：- RTCPeerConnection：管理点对点连接，处理音视频流传输
- RTCDataChannel：在连接中传输任意数据（如文本、文件）
- 信令机制：WebRTC 本身不提供信令，需借助 WebSocket、HTTP 等方式交换连接信息（如 SDP 和 ICE 候选）
基本流程：
- 两个用户各自创建 RTCPeerConnection 实例
- 发起方创建 offer，设置本地描述，并通过信令服务器发送给接收方
- 接收方收到 offer 后设置远程描述，创建 answer 并回传
- 双方通过 ICE 协议收集网络候选并交换，建立 P2P 连接
- 连接成功后可通过 RTCDataChannel 发送数据，或添加音视频轨道进行通话
简单示例（创建数据通道）：
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel('chat');
dc.onmessage = (event) => {
console.log('收到数据：', event.data);
};
pc.ondatachannel = (event) => {
event.channel.onmessage = (e) => {
console.log('对方发来：', e.data);
};
};
// 启动连接（需配合信令交换）
pc.createOffer().then(offer => pc.setLocalDescription(offer))
.then(() => {
// 将 offer 发送给对方（通过 WebSocket 等）
});
选择建议
- 如果只需要客户端和服务器之间实时通信，用 WebSocket 更简单高效
- 如果需要浏览器之间直接传输音视频或大量数据，优先考虑 WebRTC
- 实际项目中，两者常结合使用：用 WebSocket 做信令服务器，用 WebRTC 建立 P2P 连接
