h5实现通信
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允许同源不同窗口/标签页间通信。
// 创建或加入频道
const bc = new BroadcastChannel('test_channel');
// 发送消息
bc.postMessage('广播消息');
// 接收消息
bc.onmessage = function(event) {
console.log('收到广播: ' + event.data);
};每种通信方式各有特点，应根据具体应用场景选择最合适的方法。WebSocket适合实时双向通信，SSE适合服务器推送，PostMessage适合跨域通信，WebRTC适合点对点连接，而传统AJAX适合请求-响应式交互。
