如何利用JavaScript实现实时通信，如WebSocket和WebRTC？-js教程-PHP中文网

如何利用JavaScript实现实时通信，如WebSocket和WebRTC？

紅蓮之龍

发布： 2025-09-24 23:22:01

原创

226人浏览过

WebSocket用于客户端与服务器双向通信，如聊天室；WebRTC实现浏览器间点对点音视频及数据传输，需信令服务器辅助建立连接。

如何利用javascript实现实时通信，如websocket和webrtc？

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

立即学习“Java免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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 等）
  });

登录后复制