SharedWorker实现多页面通信的完整示例
以下是一个使用SharedWorker实现多页面通信的完整示例，包含HTML页面和SharedWorker脚本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SharedWorker示例</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
.container { border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; }
button { padding: 8px 16px; background: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background: #45a049; }
#messages { height: 200px; overflow-y: scroll; border: 1px solid #eee; padding: 10px; }
</style>
</head>
<body>
<div class="container">
<h2>SharedWorker通信示例</h2>
<div>
<input type="text" id="messageInput" placeholder="输入消息">
<button id="sendBtn">发送消息</button>
</div>
<div id="messages"></div>
</div>
<script>
const worker = new SharedWorker('worker.js');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const messagesDiv = document.getElementById('messages');
// 启动端口通信
worker.port.start();
// 发送消息
sendBtn.addEventListener('click', () => {
const message = messageInput.value;
if (message) {
worker.port.postMessage({
type: 'message',
content: message,
timestamp: new Date().toLocaleTimeString()
});
messageInput.value = '';
}
});
// 接收消息
worker.port.onmessage = (e) => {
const { type, content, timestamp } = e.data;
if (type === 'message') {
const messageElement = document.createElement('div');
messageElement.textContent = `${timestamp}: ${content}`;
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
} else if (type === 'connection') {
const infoElement = document.createElement('div');
infoElement.textContent = `系统消息: ${content}`;
infoElement.style.color = '#666';
messagesDiv.appendChild(infoElement);
}
};
</script>
</body>
</html>
//worker.js
// 跟踪所有连接的端口
const connectedPorts = new Set();
// 处理新连接
onconnect = function(e) {
const port = e.ports[0];
connectedPorts.add(port);
// 通知新连接
broadcastMessage({
type: 'connection',
content: `新客户端已连接，当前连接数: ${connectedPorts.size}`,
timestamp: new Date().toLocaleTimeString()
});
// 消息处理
port.onmessage = function(e) {
if (e.data.type === 'message') {
// 广播消息给所有连接的客户端
broadcastMessage(e.data);
}
};
// 端口关闭时清理
port.addEventListener('close', () => {
connectedPorts.delete(port);
broadcastMessage({
type: 'connection',
content: `客户端断开，当前连接数: ${connectedPorts.size}`,
timestamp: new Date().toLocaleTimeString()
});
});
port.start();
};
// 广播消息给所有客户端
function broadcastMessage(message) {
connectedPorts.forEach(port => {
port.postMessage(message);
});
}代码功能说明：
主页面通过SharedWorker构造函数创建共享线程实例，并通过port属性进行通信
SharedWorker脚本使用onconnect事件处理新连接，每个连接对应一个MessagePort对象
实现了消息广播功能，所有连接的页面都能收到其他页面发送的消息
包含连接状态跟踪，实时显示当前连接数 使用结构化消息格式，
包含消息类型、内容和时间戳
使用方法：
在浏览器中打开多个index.html页面（同源） 在一个页面发送消息，
其他所有页面都会实时显示该消息 系统会自动显示连接和断开通知
注意事项： 所有页面必须同源（相同协议、域名和端口）才能共享同一个SharedWorker
需要显式调用port.start()方法才能接收消息
SharedWorker生命周期独立于页面，即使所有页面关闭，Worker仍可能保持运行
