跨标签页通信(四):SharedWorker

跨标签页通信(四):SharedWorker

在现代 Web 开发中,跨标签页通信的需求越来越普遍。无论是实现多标签页之间的数据同步,还是构建实时协作功能,跨标签页通信都能极大地提升用户体验。今天,我们将探讨一种高效且易于实现的方案:SharedWorker

一、什么是 SharedWorker?

SharedWorker 是一种可以在多个浏览器上下文(如多个窗口、iframe 或其他 worker)之间共享的特定类型的 worker。它与普通的 worker 不同,具有独立的全局作用域,并且可以跨多个页面共享数据。如果要使 SharedWorker 连接到多个不同的页面,这些页面必须是同源的(即协议、主机和端口相同)。

(一)特点

  • 跨上下文共享:可以在多个浏览器上下文之间共享数据。
  • 独立作用域 :每个 SharedWorker 都有自己的全局作用域,与其他页面或 worker 隔离。
  • 事件驱动 :通过 postMessage 方法发送消息,并通过监听 message 事件接收消息。

(二)适用场景

  • 多标签页数据同步:在多个标签页之间共享数据,如用户状态、实时消息等。
  • 实时协作:多个用户在不同标签页上协作编辑文档或进行实时交互。
  • 性能优化:减少重复的网络请求,通过共享数据提升性能。

二、SharedWorker 实现跨标签页通信

(一)创建 SharedWorker

在页面中创建一个 SharedWorker 实例,并通过 port 属性与 worker 进行通信。

页面一:发送消息
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面一</title>
</head>
<body>
    <input type="text" id="content" placeholder="请输入消息">
    <button id="btn">发送消息</button>
    <script>
        const content = document.querySelector('#content');
        const btn = document.querySelector('#btn');

        // 创建一个 SharedWorker
        const worker = new SharedWorker('worker.js');

        btn.onclick = function () {
            worker.port.postMessage(content.value);
        };
    </script>
</body>
</html>
页面二:接收消息
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面二</title>
</head>
<body>
    <script>
        const worker = new SharedWorker('worker.js');
        worker.port.start();

        worker.port.onmessage = function (e) {
            if (e.data) {
                console.log(`来自 worker 的数据:`, e.data);
            }
        };

        setInterval(function () {
            worker.port.postMessage("get");
        }, 1000);
    </script>
</body>
</html>

(二)SharedWorker 脚本

SharedWorker 脚本中,通过监听 connect 事件来接收页面的连接请求,并通过 port 属性与页面进行通信。

javascript 复制代码
// worker.js
var data = ""; // 存储用户发送过来的信息

onconnect = function (e) {
    var port = e.ports[0];

    port.onmessage = function (e) {
        // 说明要将接收到数据返回给客户端
        if (e.data === "get") {
            port.postMessage(data);
            data = "";
        } else {
            data = e.data;
        }
    };
};

(三)效果

  1. 打开两个标签页,分别加载页面一和页面二。
  2. 在页面一中输入消息并点击"发送消息"按钮。
  3. 页面二的控制台会立即打印出接收到的消息。

三、注意事项

(一)同源限制

SharedWorker 只能在同源页面之间使用。如果页面的协议、域名或端口不同,通信将无法进行。

(二)浏览器支持

虽然现代浏览器(如 Chrome、Firefox、Safari)都支持 SharedWorker,但在使用前最好进行兼容性检查。

javascript 复制代码
if (!window.SharedWorker) {
    console.warn("SharedWorker 不被支持");
}

(三)性能影响

虽然 SharedWorker 的性能开销较小,但在高频率发送消息时,仍需注意对性能的影响。

相关推荐
Baihai_IDP9 分钟前
LLM 应用评估综合指南(多轮对话系统、RAG、AI Agent)
人工智能·面试·llm
tiantian_cool16 分钟前
HarmonyOS 开发环境配置指南 - macOS 版
前端
写不来代码的草莓熊35 分钟前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
tiantian_cool42 分钟前
正确的 .gitignore 配置
前端·github
三小河43 分钟前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字1 小时前
ESLint 导入语句的分组排序
前端·javascript
踩着两条虫1 小时前
VTJ.PRO低代码快速入门指南
前端·低代码
Lazy_zheng1 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆1 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
Asort1 小时前
JavaScript设计模式(十七)——中介者模式 (Mediator):解耦复杂交互的艺术与实践
前端·javascript·设计模式