在现代Web开发中，跨页面通信是一个常见的需求，尤其是在构建复杂的单页应用（SPA）或需要多个页面共享状态的大型应用时。SharedWorker 提供了一种在多个浏览上下文（如多个窗口、iframe或其他worker）之间共享数据的机制。本文将通过一个简单的示例，展示如何使用 SharedWorker 实现跨页面通信，并利用 setInterval 进行定时器轮询。
SharedWorker 简介
SharedWorker 是一种特殊的 worker，允许多个浏览上下文共享同一个后台线程。这意味着，你可以在一个 SharedWorker 中处理来自不同页面的消息，并根据需要向这些页面发送消息。不过，需要注意的是，所有连接到 SharedWorker 的页面必须同源（即具有相同的协议、主机名和端口号）。
示例代码
index.html
这个页面包含了一个输入框和一个按钮，用户可以在输入框中输入信息，并通过点击按钮将信息发送给 SharedWorker。
<body>
<input type="text" name="" id="content" placeholder="请输入要发送的信息">
<button id="btn">发送</button>
<script>
const content = document.querySelector("#content");
const btn = document.querySelector("#btn");
const worker = new SharedWorker('worker.js');
btn.onclick = function () {
worker.port.postMessage(content.value);
}
</script>
</body>
index2.html
这个页面用于接收 SharedWorker 发送的数据，并每隔一秒向 SharedWorker 请求最新数据。
<body>
<script>
const btn = document.querySelector("#btn");
var worker = new SharedWorker('worker.js');
worker.port.start()
worker.port.addEventListener('message', (e) => {
if(e.data){
console.log('来自worker的数据：', e.data)
}
}, false);
setInterval(function(){
// 获取和发送消息都是调用 postMessage 方法，这里约定传递 'get' 表示获取数据。
worker.port.postMessage('get')
},1000);
</script>
</body>
worker.js
SharedWorker 的脚本文件，负责接收来自页面的消息，并根据消息内容决定是保存数据还是发送数据。
var data = '';
onconnect = function (e) {
var port = e.ports[0]
port.onmessage = function (e) {
// 如果是 'get' 则返回数据给客户端
if (e.data === 'get') {
port.postMessage(data);
data = "";
} else {
// 否则把数据保存
data = e.data
}
}
}
工作原理
- 当用户在
index.html页面输入信息并点击发送按钮时，该信息通过postMessage方法发送给SharedWorker。 SharedWorker接收到消息后，根据消息内容决定是保存数据还是向所有连接的页面发送数据。index2.html页面每隔一秒通过setInterval向SharedWorker发送一个 'get' 消息，请求最新数据。SharedWorker接收到 'get' 消息后，将保存的数据发送回index2.html页面。
通过这种方式，我们可以实现跨页面的数据共享和定时更新，这对于需要实时数据更新的Web应用非常有用。
