如何用JavaScript进行实时通信（如WebSockets或WebRTC）？-js教程-PHP中文网

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

betcha

发布： 2025-10-01 18:58:02

原创

603人浏览过

WebSockets适用于客户端与服务器间的实时文本通信，如聊天室；WebRTC用于点对点音视频通话和低延迟数据传输，需WebSocket辅助信令交换。

如何用javascript进行实时通信（如websockets或webrtc）？

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

使用 WebSockets 实现实时消息通信

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

● 建立 WebSocket 连接：

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

<pre class="brush:php;toolbar:false;">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);
};

登录后复制

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

安装 ws：
npm install ws

<pre class="brush:php;toolbar:false;">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('欢迎加入！');
});

登录后复制

使用 WebRTC 实现点对点通信

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

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

● 核心步骤：

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

1. 创建 RTCPeerConnection：

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

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

<pre class="brush:php;toolbar:false;">const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const peerConnection = new RTCPeerConnection(configuration);

登录后复制

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

获取摄像头和麦克风：

<pre class="brush:php;toolbar:false;">navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    localVideo.srcObject = stream;
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
  });

登录后复制

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

<pre class="brush:php;toolbar:false;">const dataChannel = peerConnection.createDataChannel('chat');
dataChannel.onmessage = (event) => {
  console.log('收到数据:', event.data);
};

登录后复制

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

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

<pre class="brush:php;toolbar:false;">// 发起方创建 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 }));
  });

登录后复制

接收方处理 offer 并回复 answer：

<pre class="brush:php;toolbar:false;">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));
  }
};

登录后复制