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免费学习笔记（深入）”；

Tripo AI

AI驱动的3D建模平台

262

查看详情

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

基本上就这些，掌握好连接建立、事件监听和数据传输三个核心环节，就能实现出稳定的实时通信功能。