实时通信能够让Web应用摆脱传统HTTP请求响应模式的限制，实现低延迟的双向数据交互。WebSocket和WebRTC是JavaScript生态中实现实时通信的两大核心技术，适用场景各有侧重，下面分别介绍它们的实现方式。
一、使用WebSocket实现实时通信
1. WebSocket核心原理
WebSocket是基于TCP的全双工通信协议，在建立连接时通过HTTP握手升级协议，之后客户端和服务端可以直接双向传输数据，不需要每次请求都携带完整的HTTP头信息，大大降低了通信延迟。它的连接状态分为连接中、已连接、关闭中、已关闭四种，开发者可以通过监听对应的事件处理不同阶段的逻辑。
2. 客户端JavaScript实现
浏览器原生提供了WebSocket构造函数，不需要额外引入第三方库就可以创建连接，核心代码如下：
// 创建WebSocket连接，地址替换为实际的服务端WebSocket地址
const socket = new WebSocket('ws://127.0.0.1:8080/ws');
// 连接建立成功时的回调
socket.addEventListener('open', function (event) {
console.log('WebSocket连接已建立');
// 向服务端发送消息
socket.send('客户端发送的第一条消息');
});
// 接收服务端推送的消息
socket.addEventListener('message', function (event) {
console.log('收到服务端消息：', event.data);
});
// 连接关闭时的回调
socket.addEventListener('close', function (event) {
console.log('WebSocket连接已关闭，关闭码：', event.code);
});
// 连接出错时的回调
socket.addEventListener('error', function (event) {
console.error('WebSocket连接出现错误');
});
3. 简单服务端示例（Node.js）
服务端可以使用ws库快速搭建WebSocket服务，首先需要安装依赖：
npm install ws
服务端核心实现代码如下：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 监听客户端连接
wss.on('connection', function connection(ws) {
console.log('有新的客户端连接');
// 接收客户端发送的消息
ws.on('message', function message(data) {
console.log('收到客户端消息：', data);
// 向客户端回推消息
ws.send(`服务端已收到消息：${data}`);
});
// 连接关闭时的处理
ws.on('close', function () {
console.log('客户端连接已关闭');
});
});
二、使用WebRTC实现实时通信
1. WebRTC核心原理
WebRTC是支持浏览器之间进行实时音视频和数据传输的技术，不需要安装插件，核心流程包括信令交换、ICE候选收集、媒体流传输三个阶段。需要注意的是WebRTC本身不包含信令传输的实现，通常需要结合WebSocket等通道来交换SDP描述和ICE候选信息。
2. 获取本地媒体流
实现音视频通话的第一步是获取本地的摄像头和麦克风权限，拿到媒体流，代码如下：
async function getLocalStream() {
try {
// 获取本地音视频流，video和audio参数控制是否开启视频和音频
const localStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
// 将本地流显示在video标签中，这里的video标签需要提前在HTML中定义
const localVideo = document.querySelector('#localVideo');
localVideo.srcObject = localStream;
return localStream;
} catch (error) {
console.error('获取本地媒体流失败：', error);
}
}
3. 建立点对点连接
两个客户端之间需要创建RTCPeerConnection实例，交换SDP信息完成连接协商，核心代码如下：
// 创建RTCPeerConnection实例，配置ICE服务器地址，这里使用公共的STUN服务器
const peerConnection = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' }
]
});
// 将本地媒体流加入到连接中
async function addLocalStreamToConnection(localStream) {
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
}
// 创建提议并发送SDP给对端（通过WebSocket信令通道传输）
async function createOffer() {
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// 这里通过WebSocket将offer发送给对端，实际项目中替换为对应的信令发送逻辑
// socket.send(JSON.stringify({ type: 'offer', sdp: offer }));
}
// 接收对端的应答SDP并设置
async function handleAnswer(answerSdp) {
await peerConnection.setRemoteDescription(new RTCSessionDescription(answerSdp));
}
// 接收对端的ICE候选并添加
function handleIceCandidate(candidate) {
if (candidate) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}
}
// 监听ICE候选事件，收集到候选后发送给对端
peerConnection.onicecandidate = function (event) {
if (event.candidate) {
// 通过WebSocket将候选发送给对端，实际项目中替换为对应的信令发送逻辑
// socket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate }));
}
};
// 监听对端媒体流到达事件，将流显示在远程video标签中
peerConnection.ontrack = function (event) {
const remoteVideo = document.querySelector('#remoteVideo');
remoteVideo.srcObject = event.streams[0];
};
三、两种技术的适用场景对比
可以根据实际需求选择合适的技术，两者的核心差异如下：
| 对比维度 | WebSocket | WebRTC |
|---|---|---|
| 通信模式 | 客户端与服务端双向通信 | 客户端之间点对点通信 |
| 核心用途 | 消息推送、实时数据同步、在线聊天 | 音视频通话、点对点文件传输 |
| 是否需要服务端中转数据 | 是，所有数据经过服务端 | 否，媒体流直接点对点传输，仅信令需要中转 |
| 实现复杂度 | 低，原生API简单，服务端实现也容易 | 高，需要处理信令交换、ICE候选、兼容性等问题 |
四、注意事项
- WebSocket连接地址如果是生产环境，建议使用
wss协议，也就是基于TLS加密的WebSocket，避免数据被窃听。 - WebRTC的ICE服务器如果仅使用公共STUN服务器，可能无法在对称NAT环境下建立连接，生产环境需要部署TURN服务器作为中继。
- 两种技术都需要处理断开重连的逻辑，比如WebSocket连接关闭后可以设置定时重试机制，WebRTC连接断开后可以重新发起协商流程。
- 获取媒体流、建立WebRTC连接等操作都需要用户授权，需要做好权限被拒绝的异常处理。
WebSocketWebRTCJavaScript实时通信修改时间：2026-06-16 10:39:39