JavaScript实现实时通信：WebSocket与WebRTC详解

本文深入解析了JavaScript中实现网页实时通信的两大核心技术——WebSocket与WebRTC：前者通过持久化全双工连接实现客户端与服务器间的高效双向通信，适用于聊天室、实时通知等场景；后者则支持浏览器间点对点的音视频及数据直传，虽需借助信令服务器（常由WebSocket担当）完成连接协商，却能大幅降低延迟与服务器负载。文章不仅厘清二者定位与协作逻辑，还辅以精炼代码示例和选型建议，帮助开发者根据实际需求快速构建稳定、低延时的实时交互应用。

要实现网页中的实时通信，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 服务。

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~