SharedWorker 通讯的原理

最新推荐文章于 2024-07-01 20:01:01 发布
最新推荐文章于 2024-07-01 20:01:01 发布
阅读量2.5k 收藏 25
点赞数 43
分类专栏： 前端 文章标签： 人工智能 AI写作 生活 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_Kamen/article/details/139944329
版权

SharedWorker 是一种允许多个浏览器上下文（如标签页、iframe）共享一个 Worker 实例的技术，能够实现跨多个上下文的通讯和数据共享。通过 SharedWorker，我们可以在同一来源（同一协议、主机名和端口号）下的不同浏览器上下文之间进行高效的通讯。

SharedWorker 的基本概念

  1. SharedWorker 实例：多个上下文共享一个 Worker 实例，所有上下文可以通过这个 Worker 实例进行通讯。
  2. 连接和通讯：每个上下文通过 port 对象与 SharedWorker 通讯，port 是 MessagePort 的实例。
  3. 消息传递：通过 postMessage 方法发送消息，通过 onmessage 事件处理器接收消息。

基本用法

1. 创建和连接 SharedWorker

在 JavaScript 文件中定义 SharedWorker 脚本。

// sharedWorker.js
self.onconnect = function(event) {
    const port = event.ports[0];
    port.onmessage = function(event) {
        // 处理来自页面的消息
        console.log('Received from page:', event.data);
        
        // 可以将消息发送给其他连接的端口
        port.postMessage('Reply from SharedWorker');
    };
};

在 HTML 页面中创建并连接 SharedWorker。

// 页面 A 和页面 B 中的代码
const sharedWorker = new SharedWorker('sharedWorker.js');
const port = sharedWorker.port;

// 发送消息
port.postMessage('Hello from Page');

// 接收消息
port.onmessage = (event) => {
    console.log('Received from SharedWorker:', event.data);
};

工作流程图

以下是 SharedWorker 实现不同标签页之间通讯的工作流程图：

┌──────────────────────┐                ┌──────────────────────┐
│      Page A          │                │      Page B          │
│                      │                │                      │
│ SharedWorker         │                │ SharedWorker         │
│   'sharedWorker.js'  │                │   'sharedWorker.js'  │
│          │           │                │          │           │
│          ▼           │                │          ▼           │
│  port.postMessage    │                │  port.postMessage    │
│  ('Hello from A')    │                │  ('Hello from B')    │
│          │           │                │          │           │
│          ▼           │                │          ▼           │
│  port.onmessage      │                │  port.onmessage      │
│  event.data ===      │                │  event.data ===      │
│  'Reply from Worker' │                │  'Reply from Worker' │
└──────────────────────┘                └──────────────────────┘

示例代码

SharedWorker 脚本

sharedWorker.js：

let connections = [];

self.onconnect = function(event) {
    const port = event.ports[0];
    connections.push(port);

    port.onmessage = function(event) {
        console.log('Received from page:', event.data);
        
        // 广播消息给所有连接的端口
        connections.forEach(conn => {
            if (conn !== port) {
                conn.postMessage(event.data);
            }
        });
    };
    
    port.start();
};
标签页 A 的代码
<!DOCTYPE html>
<html>
<head>
    <title>Page A</title>
</head>
<body>
    <button onclick="sendMessage()">Send Message</button>

    <script>
        const sharedWorker = new SharedWorker('sharedWorker.js');
        const port = sharedWorker.port;

        port.start();

        function sendMessage() {
            port.postMessage('Hello from Page A');
        }

        port.onmessage = (event) => {
            console.log('Received from SharedWorker:', event.data);
        };
    </script>
</body>
</html>
标签页 B 的代码
<!DOCTYPE html>
<html>
<head>
    <title>Page B</title>
</head>
<body>
    <script>
        const sharedWorker = new SharedWorker('sharedWorker.js');
        const port = sharedWorker.port;

        port.start();

        port.onmessage = (event) => {
            console.log('Received from SharedWorker:', event.data);
        };
    </script>
</body>
</html>

SharedWorker 的特点和优缺点

特点
  1. 共享实例：多个上下文共享一个 Worker 实例，节省资源。
  2. 双向通讯：通过 MessagePort 实现双向通讯。
  3. 同源策略：确保安全性，只有同源的上下文才能相互通讯。
优点
  1. 高效资源利用：共享一个 Worker 实例，减少内存和 CPU 占用。
  2. 灵活的消息处理：可以在 Worker 中集中处理和分发消息，适用于复杂的通讯需求。
  3. 持久连接：连接建立后可以长时间保持，不需要频繁建立和销毁连接。
缺点
  1. 实现复杂：相比 BroadcastChannel，实现起来稍微复杂一些。
  2. 同源限制：只能在同源上下文之间通讯，不同来源无法相互通讯。
  3. 浏览器支持：部分旧版浏览器可能不支持 SharedWorker。

实际应用场景

1. 用户登录状态同步

当用户在一个标签页中登录或注销，其他打开同一应用的标签页需要同步登录状态。

// SharedWorker 脚本
self.onconnect = function(event) {
    const port = event.ports[0];
    port.onmessage = function(event) {
        if (event.data === 'User logged in') {
            port.postMessage('User logged in');
        } else if (event.data === 'User logged out') {
            port.postMessage('User logged out');
        }
    };
    port.start();
};

// 标签页中使用
const sharedWorker = new SharedWorker('sharedWorker.js');
const port = sharedWorker.port;
port.start();

port.postMessage('User logged in');

port.onmessage = (event) => {
    if (event.data === 'User logged in') {
        // 同步用户登录状态
    } else if (event.data === 'User logged out') {
        // 同步用户注销状态
    }
};
2. 实时数据更新

在一个标签页中更新数据，其他标签页需要实时显示更新结果，例如股票行情、实时聊天消息等。

// SharedWorker 脚本
let connections = [];

self.onconnect = function(event) {
    const port = event.ports[0];
    connections.push(port);

    port.onmessage = function(event) {
        connections.forEach(conn => {
            if (conn !== port) {
                conn.postMessage(event.data);
            }
        });
    };

    port.start();
};

// 标签页中使用
const sharedWorker = new SharedWorker('sharedWorker.js');
const port = sharedWorker.port;
port.start();

port.postMessage('New data available');

port.onmessage = (event) => {
    console.log('Received data update:', event.data);
    // 更新界面显示
};
3. 多标签页协同工作

用户在多个标签页中打开同一个应用，需要各标签页协同工作。例如，在一个标签页中填写表单，另一个标签页显示表单预览。

// SharedWorker 脚本
let connections = [];

self.onconnect = function(event) {
    const port = event.ports[0];
    connections.push(port);

    port.onmessage = function(event) {
        connections.forEach(conn => {
            if (conn !== port) {
                conn.postMessage(event.data);
            }
        });
    };

    port.start();
};

// 标签页中使用
const sharedWorker = new SharedWorker('sharedWorker.js');
const port = sharedWorker.port;
port.start();

document.getElementById('formInput').addEventListener('input', (event) => {
    port.postMessage({ type: 'form_update', value: event.target.value });
});

port.onmessage = (event) => {
    if (event.data.type === 'form_update') {
        document.getElementById('formPreview').innerText = event.data.value;
    }
};

总结

SharedWorker 提供了一种强大的方法，用于在同源的不同浏览器上下文之间进行高效的通讯和数据共享。它特别适合需要共享资源和长时间保持连接的应用场景，如用户登录状态同步、实时数据更新和多标签页协同工作。通过掌握 SharedWorker 的使用方法，开发者可以大大提升 web 应用的用户体验和功能。

浏览器/html/css面试题----1
MingL520的博客
05-24 472
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
SharedWorker 让你多个页面相互通信
郊眠寺
01-29 1673
根据前几篇的了解，大家应该对Worker有了一定的了解，是Worker的一种，它允许你在多个页面之间共享一个Worker。对比于要简单很多，同样也是继承与Worker，但是它的生命周期是独立于页面的。和其他Worker的相同，都是需要同源的，它是通过url来区分是否是同一个。本文主要介绍了的基本使用，并使用实现了一个简单的聊天室。的使用还是比较简单的，不同于Worker那么单纯，是一个长连接，所以我们可以在多个页面中，共享一个，这样就可以实现跨页面通信了。不同于有那么多的限制，
sharedWorker 共享Worker
weixin_43294560的博客
03-19 2167
内容待补充
实现多标签页通信 sharedworker
fk129
03-20 210
https://www.jianshu.com/p/31facd4934d7
共享线程 SharedWorker
Forx Js
08-25 6571
SharedWorker的实质在于share，不同的线程可以共享一个线程，他们的数据也是共享的。
worker和sharedworker
大灰狼的小绵羊哥哥的博客
03-24 1443
1、介绍 h5的新功能，主要作用，开辟新线程，充分利用计算机算力，防止“假死”（单线程，js引擎和UI线程互斥） worker：专属线程，只针对当前运行环境 sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。 2、worker使用 1、查看文档 阮一峰worker网络日子 2、线程js文件 self.addEventListener('message', function (event) { setTimeout(() =&.
浏览器跨Tab窗口通信原理及应用实践：探索Web应用的协同工作之道
assjokhh的博客
03-06 2094
嗨，各位朋友！艾斯视觉团队向您问好！我们拥有丰富的UI设计和前端开发经验，希望能通过我们的分享为您提供有价值的参考。如有任何疑问或需要帮助，请随时联系我们，让我们一起探索和学习！感恩遇见！
2021 HTML面试题（最新）不定时更新
一只蒻蒻的博客
02-02 4730
HTML面试题 DOCTYPE有什么作用？ DOCTYPE声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。 标准模式（又称严格模式）与兼容模式（又称混杂模式）各有什么区别？ 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以
牛客网-精华专题-前端校招面试题目合集
qq_41254204的博客
02-01 3097
前端校招面试题目合集 501HTML HTML 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层(structural layer)、表示层(presentation layer)、行为层 (behavior layer) 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务 H...
SharedWorkerSample:一个SharedWorker的简单示例
05-19
SharedWorkerSample 发挥我在工作中遇到的新技术。 这是一个关于SharedWorker的小项目。 当单击sumit按钮时，输入中的数字将过帐到SharedWorker，然后SharedWorker将进行计算并将新的总和过帐到所有选项卡。
HTML5新特性 多线程（Worker SharedWorker）
09-27
主要介绍了HTML5新特性 多线程（Worker SharedWorker）的相关资料,需要的朋友可以参考下
SharedWorker 共享工作者线程 websocket 及 vue中使用
jinke0010的博客
04-18 4511
SharedWorker 共享工作者线程 最近搞了个websocket通讯，但是发现在多开浏览器页签的时候ws也会多开一个，但是基于浏览器机制情况下 chrome会干掉新开的页签导致新页签查看GG了， 只能开一个页签这就很蛋疼了。 然后百度了很久发现都是一些介绍通过websocket解决多页签通讯的文章（还要服务端配合），无奈之下啃了一下高程。 发现了这个-----SharedWorker 前言 SharedWorker 在当前客户端下创建一个共享线程，每一个页签的通讯通过其中的port来传递和接收。
SharedWorker和用户隐私
hax的技术部落格
10-29 482
最近做实时聊天，用到SharedWorker。目前为止，IE和Safari一直没有支持SharedWorker。过去可以认为是微软人品有问题，不过现在IE10、IE11在支持标准方面做得其实也不差。那么为什么IE不支持SharedWorker？我查了一下，发现这个2011年的讨论：[url]http://lists.w3.org/Archives/Public/public-webapps/201...
Shared Worker的快速理解与简单应用
zxcvb0825的博客
12-18 1562
SharedWorker 是 HTML5 中引入的一种 WebWorkers 类型，用于在浏览器中创建可在多个浏览器窗口或标签页之间共享的后台线程。Web Workers 是在主线程之外运行的脚本，允许执行一些耗时的任务而不会阻塞用户界面。执行完毕会出现以下结果：在不同的浏览器中执行，并不会从头开始输出，而是从之前执行结果继续执行。无论是在同一个文件下执行还是复制一份html文件时，这两个文件运行执行的结果也是以下的内容。那么能否对两个浏览器的操作内容进行一个异同的响应操作呢？
Web Worker 与 SharedWorker 的介绍和使用
Eliaukoyx
02-17 3295
Web Worker 与 SharedWorker 的介绍和使用。
Shared Worker 多页面通信
asxw00的博客
11-24 1238
是这样的，今天玩github，先是在没有登录浏览了一些页面，然后在某一页面进行了登录。这时再切换的其他页面时就看到了下面的提示： 那么这是怎么做到的呢？我们可以想到，一种办法是 localStorage，在某一个页面登录时，修改localStorage 状态，其他页面在显示的时候，读取最新的状态，然后显示提示： // 登录的页面 localStorage.setItem('login', true)； // 其他页面 document.addEventListener("visibilitych
跨浏览器窗口数据共享之SharedWorker
最新发布
m0_56416159的博客
07-01 1308
SharedWorker在Web开发中扮演着跨页面通信的重要角色，特别是在需要在多个浏览器窗口或标签页之间共享数据或执行后台任务时使用居多。
SharedWorker 共享worker数据
阿豪
06-24 475
原文链接: SharedWorker 共享worker数据 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值