html5中sharedWorker实现多页面通信的示例代码

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 09:59:33

HTML5 SharedWorker 实现多页面通信示例代码

SharedWorker 简介

SharedWorker 是 HTML5 引入的一种多线程机制，它允许多个同源页面共享一个 worker 线程。这使得不同页面之间可以进行通信，实现诸如共享数据、同步状态等功能。

示例场景：多个页面共享一个计数器

1. 创建 SharedWorker (worker.js)

JavaScript

// worker.js
let count = 0;

self.addEventListener('connect', (e) => {
    const port = e.ports[0];
    port.onmessage = (e) => {
        if (e.data === 'increment') {
            count++;
            port.postMessage(count);
        } else if (e.data === 'decrement') {
            count--;
            port.postMessage(count);
        }
    };
});

2. 页面1 (page1.html)

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <button onclick="increment()">+1</button>
    <div id="count"></div>
    <script>
        const worker = new SharedWorker('worker.js');
        worker.port.onmessage = (e) => {
            document.getElementById('count').textContent = e.data;
        };

        function increment() {
            worker.port.postMessage('increment');
        }
    </script>
</body>
</html>

3. 页面2 (page2.html)

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Page 2</title>
</head>
<body>
    <button onclick="decrement()">-1</button>
    <div id="count"></div>
    <script>
        const worker = new SharedWorker('worker.js');
        worker.port.onmessage = (e) => {
            document.getElementById('count').textContent = e.data;
        };

        function decrement() {
            worker.port.postMessage('decrement');
        }
    </script>
</body>
</html>

代码解释

worker.js:
- 定义了一个计数器 count。
- 当有页面连接到这个 worker 时，监听 connect 事件，获取到 port 对象。
- port 对象用于与页面进行通信。当页面发送消息时，worker 根据消息类型对计数器进行增减操作，并把新的计数器值发送回页面。
page1.html 和 page2.html:
- 创建一个 SharedWorker 实例。
- 监听 worker 发送的消息，更新页面上的计数显示。
- 提供按钮，点击按钮时向 worker 发送消息，触发计数器的增减。