当前位置：首页 > HTML

h5实现通信

2026-01-15 21:50:25HTML

H5实现通信的方法

H5（HTML5）提供了多种通信方式，适用于不同场景的需求。以下是常见的几种实现方法：

WebSocket通信

WebSocket是一种全双工通信协议，适用于实时性要求高的场景。

// 创建WebSocket连接
const socket = new WebSocket('ws://example.com/socket');

// 监听连接打开事件
socket.onopen = function() {
  console.log('连接已建立');
  socket.send('Hello Server!');
};

// 监听消息接收事件
socket.onmessage = function(event) {
  console.log('收到消息: ' + event.data);
};

// 监听连接关闭事件
socket.onclose = function() {
  console.log('连接已关闭');
};

Server-Sent Events (SSE)

SSE允许服务器向客户端推送数据，适用于单向数据推送场景。

// 创建EventSource连接
const eventSource = new EventSource('sse.php');

// 监听消息事件
eventSource.onmessage = function(event) {
  console.log('收到消息: ' + event.data);
};

// 监听自定义事件
eventSource.addEventListener('customEvent', function(event) {
  console.log('自定义事件: ' + event.data);
});

PostMessage跨域通信

window.postMessage方法可以实现跨窗口/跨域通信。

// 发送消息
window.postMessage('消息内容', '目标域');

// 接收消息
window.addEventListener('message', function(event) {
  if (event.origin !== '信任的域') return;
  console.log('收到消息: ' + event.data);
});

WebRTC点对点通信

WebRTC支持浏览器间直接通信，适用于音视频通话等场景。

// 创建RTCPeerConnection
const peerConnection = new RTCPeerConnection(configuration);

// 处理ICE候选
peerConnection.onicecandidate = function(event) {
  if (event.candidate) {
    // 发送候选到对方
  }
};

// 处理远程流
peerConnection.ontrack = function(event) {
  // 显示远程流
  videoElement.srcObject = event.streams[0];
};

// 创建offer
peerConnection.createOffer()
  .then(function(offer) {
    return peerConnection.setLocalDescription(offer);
  })
  .then(function() {
    // 发送offer到对方
  });

XMLHttpRequest/Fetch API

传统AJAX通信方式，适用于常规HTTP请求。

// 使用Fetch API
fetch('api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 使用XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'api/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Web Workers后台通信

Web Workers允许在后台线程运行脚本，与主线程通过消息传递通信。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('开始工作');
worker.onmessage = function(event) {
  console.log('收到worker消息: ' + event.data);
};

// worker.js
self.onmessage = function(event) {
  console.log('收到主线程消息: ' + event.data);
  self.postMessage('工作完成');
};

Service Worker通信

Service Worker可用于离线缓存和后台同步，支持与页面通信。

// 页面端
navigator.serviceWorker.controller.postMessage('消息内容');

navigator.serviceWorker.addEventListener('message', function(event) {
  console.log('收到SW消息: ' + event.data);
});

// Service Worker端
self.addEventListener('message', function(event) {
  console.log('收到页面消息: ' + event.data);
  event.source.postMessage('回复消息');
});

Broadcast Channel API

Broadcast Channel允许同源不同窗口/标签页间通信。

h5实现通信

// 创建或加入频道
const bc = new BroadcastChannel('test_channel');

// 发送消息
bc.postMessage('广播消息');

// 接收消息
bc.onmessage = function(event) {
  console.log('收到广播: ' + event.data);
};

每种通信方式各有特点，应根据具体应用场景选择最合适的方法。WebSocket适合实时双向通信，SSE适合服务器推送，PostMessage适合跨域通信，WebRTC适合点对点连接，而传统AJAX适合请求-响应式交互。

标签: 通信