JavaScript实时通信：WebSockets与WebRTC详解

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

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

使用 WebSockets 实现实时消息通信

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

在浏览器端，使用原生 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>

安装 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 作为信令通道。

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

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

获取摄像头和麦克风：

<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>

生成并交换会话描述（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>

选择合适的技术

根据你的需求决定使用哪种方案：

• 用 WebSockets：当你只需要客户端和服务器之间实时发送文本、状态更新、通知等。
• 用 WebRTC：当你需要音视频通话、屏幕共享、大文件传输或极低延迟的点对点通信。
• 结合使用：WebRTC 需要信令服务器，通常用 WebSocket 来完成初始连接协商。

基本上就这些。掌握 WebSockets 能快速搭建实时消息系统，而 WebRTC 虽复杂一些，但为多媒体通信提供了强大能力。关键是理解它们的适用场景和协作方式。

好了，本文到此结束，带大家了解了《JavaScript实时通信：WebSockets与WebRTC详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！