WebSockets适用于客户端与服务器间的实时文本通信，如聊天室；WebRTC用于点对点音视频通话和低延迟数据传输，需WebSocket辅助信令交换。
实时通信在现代Web应用中非常关键，比如聊天室、视频会议、在线协作工具等。JavaScript提供了多种方式实现这类功能，主要依赖于 WebSockets 和 WebRTC 两种技术。它们各有用途：WebSockets 适合文本或小数据的双向通信，WebRTC 则用于高效率的音视频流和点对点数据传输。
使用 WebSockets 实现实时消息通信
WebSockets 提供了一个持久的、全双工的客户端与服务器连接，适合需要频繁交换数据的场景。
● 建立 WebSocket 连接：在浏览器端，使用原生 WebSocket 构造函数即可连接到支持 WebSocket 的服务端（如 Node.js + ws 库）。
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
console.log('连接已建立');
socket.send('你好，服务器！');
};
socket.onmessage = (event) => {
console.log('收到消息:', event.data);
};
socket.onclose = () => {
console.log('连接已关闭');
};
socket.onerror = (error) => {
console.error('发生错误:', error);
};
● 服务端示例（Node.js 使用 ws 库）：
安装 ws：npm install ws
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('客户端已连接');
socket.on('message', (data) => {
console.log('收到:', data.toString());
socket.send(`回执: ${data}`);
});
socket.send('欢迎加入！');
});
使用 WebRTC 实现点对点通信
WebRTC 主要用于音视频通话、文件共享或低延迟数据通道，它不依赖中间服务器传输媒体流（但需要服务器协助建立连接）。
立即学习“Java免费学习笔记（深入）”；
● 核心步骤：WebRTC 连接建立涉及信令、SDP 协商和 ICE 候选者交换，通常仍需 WebSocket 或 HTTP 作为信令通道。
1. 创建 RTCPeerConnection：这是 WebRTC 的核心对象，管理连接和流传输。
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const peerConnection = new RTCPeerConnection(configuration);
2. 添加媒体流或数据通道：
获取摄像头和麦克风：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
localVideo.srcObject = stream;
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
});
或者创建数据通道（用于发送任意数据）：
const dataChannel = peerConnection.createDataChannel('chat');
dataChannel.onmessage = (event) => {
console.log('收到数据:', event.data);
};
3. 信令交换（通过 WebSocket）：
生成并交换会话描述（offer/answer）和 ICE 候选者：
// 发起方创建 offer
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
socket.send(JSON.stringify({ candidate: event.candidate }));
}
};
peerConnection.createOffer()
.then(offer => peerConnection.setLocalDescription(offer))
.then(() => {
socket.send(JSON.stringify({ offer: peerConnection.localDescription }));
});
接收方处理 offer 并回复 answer：
socket.onmessage = async (event) => {
const message = JSON.parse(event.data);
if (message.offer) {
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
socket.send(JSON.stringify({ answer }));
}
if (message.answer) {
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.answer));
}
if (message.candidate) {
await peerConnection.addIceCandidate(new RTCIceCandidate(message.candidate));
}
};
选择合适的技术
根据你的需求决定使用哪种方案：
- 用 WebSockets：当你只需要客户端和服务器之间实时发送文本、状态更新、通知等。
- 用 WebRTC：当你需要音视频通话、屏幕共享、大文件传输或极低延迟的点对点通信。
- 结合使用：WebRTC 需要信令服务器，通常用 WebSocket 来完成初始连接协商。
基本上就这些。掌握 WebSockets 能快速搭建实时消息系统，而 WebRTC 虽复杂一些，但为多媒体通信提供了强大能力。关键是理解它们的适用场景和协作方式。
