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); });}代码功能说明：
主页面通过Sha[文]redWorker构造函数创[章]建共享线程实例，并通过por[来]t属性进行通信
SharedWo[自]rker脚本使用onconn[一]ect事件处理新连接，每个连[道]接对应一个MessagePo[，]rt对象
实现了消息广播功[一]能，所有连接的页面都能收到其[个]他页面发送的消息 [分]
包含连接状态跟踪，实时显示当[享]前连接数使用结构化消息格式，[的]
包含消息类型、内容和时间戳
使用方法：
在浏览器中打开多个index[网].html页面（同源）在一个[站]页面发送消息，
其他所有页面都会实时显示该消[文]息系统会自动显示连接和断开通[章]知
注意事项：所有页面必须同源（[来]相同协议、域名和端口）才能共[自]享同一个SharedWork[一]er
需要显式调用port.sta[道]rt()方法才能接收消息&n[，]bsp;
SharedWorker生命周期独立于页面，即使所有页面关闭，Worker仍可能保持运行