当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实时通信：WebSockets与WebRTC详解

JavaScript实时通信：WebSockets与WebRTC详解

2026-04-26 14:51:35 0浏览收藏

本文深入解析了JavaScript中实现Web实时通信的两大核心技术——WebSockets与WebRTC：前者以轻量、全双工的持久连接支撑聊天室、通知推送等服务器中心化文本通信场景；后者则通过点对点架构实现低延迟音视频通话、屏幕共享和高效数据传输，虽需借助WebSocket完成信令协商，却彻底规避了媒体流经服务器的带宽与延迟瓶颈；二者并非互斥，而是常协同工作——用WebSocket“牵线搭桥”，再由WebRTC“面对面直连”，共同构筑现代协作应用（如在线会议、实时协作文档）的技术基石。

如何用JavaScript进行实时通信（如WebSockets或WebRTC）？

实时通信在现代Web应用中非常关键，比如聊天室、视频会议、在线协作工具等。JavaScript提供了多种方式实现这类功能，主要依赖于 WebSockets 和 WebRTC 两种技术。它们各有用途：WebSockets 适合文本或小数据的双向通信，WebRTC 则用于高效率的音视频流和点对点数据传输。

使用 WebSockets 实现实时消息通信

WebSockets 提供了一个持久的、全双工的客户端与服务器连接，适合需要频繁交换数据的场景。

● 建立 WebSocket 连接：

在浏览器端，使用原生 WebSocket 构造函数即可连接到支持 WebSocket 的服务端（如 Node.js + ws 库）。

<code>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);
};
</code>

● 服务端示例（Node.js 使用 ws 库）：

安装 ws：
npm install ws

<code>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('欢迎加入！');
});
</code>

使用 WebRTC 实现点对点通信

WebRTC 主要用于音视频通话、文件共享或低延迟数据通道，它不依赖中间服务器传输媒体流（但需要服务器协助建立连接）。

● 核心步骤：

WebRTC 连接建立涉及信令、SDP 协商和 ICE 候选者交换，通常仍需 WebSocket 或 HTTP 作为信令通道。

1. 创建 RTCPeerConnection：

这是 WebRTC 的核心对象，管理连接和流传输。

<code>const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const peerConnection = new RTCPeerConnection(configuration);
</code>

2. 添加媒体流或数据通道：

获取摄像头和麦克风：

<code>navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    localVideo.srcObject = stream;
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
  });
</code>

或者创建数据通道（用于发送任意数据）：

<code>const dataChannel = peerConnection.createDataChannel('chat');
dataChannel.onmessage = (event) => {
  console.log('收到数据:', event.data);
};
</code>

3. 信令交换（通过 WebSocket）：

生成并交换会话描述（offer/answer）和 ICE 候选者：

<code>// 发起方创建 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 }));
  });
</code>

接收方处理 offer 并回复 answer：

<code>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));
  }
};
</code>