SharedWorker 演示

默认文件1624799779625.png

作用: 通过SharedWorker可以在同源内的不同窗口之间传递信息

构建worker脚本

 let pool = [];
onconnect = function (e) {
  let port = e.ports[0];
  pool.push(port);
  port.onmessage = function (e) {
    pool.forEach((v) => {
      v != port && v.postMessage(e.data);
    });
  };
};

构建数据共享通道

 export class SharedDataChannel {
  constructor(url, cb) {
    this.sharedWorker = new SharedWorker(url);
    this.sharedWorker.port.onmessage = (e) => {
      cb && cb(e.data);
    };
  }
 
  post(data) {
    this.sharedWorker.port.postMessage(data);
  }
}

在多个页面进行初始化

 <script type="module">
    import { SharedDataChannel } from "./index.js";
    const channel = new SharedDataChannel("./worker.js", (res) => {
    document.querySelector("#content").innerHTML += `${res} </br>`;
    });
    document.querySelector("#send").addEventListener("click", () => {
    channel.post("登录页面发送的数据");
    });
</script>
 
<body>
    登录页面
 
 
    <button id="send">发送</button>
    <p id="content"></p>
</body>

调试

chrome://inspect/#workers 导航到 chrome://inspect/#workers 并找到共享的 worker，然后单击"inspect"，然后你可以拉起 SharedWorker 的控制台。

效果

posted @ 2021-06-27 21:19 前端小鑫同学阅读(7) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Handlebars初次了解

· 实现简易版本的MVVM框架(Vue)

· Web Worker: Shared Worker的使用

· Web Worker 和 SharedWorker

· JavaScript-高性能实用指南-全-

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

昵称：前端小鑫同学
园龄： 2年11个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端小鑫同学

擅长使用 Vue、 Angular、 Typescript 和 Node 构建 Web 应用程序

SharedWorker 演示

构建worker脚本

构建数据共享通道

在多个页面进行初始化

调试

效果

公告

搜索

常用链接

随笔档案

阅读排行榜

	let pool = [];
	onconnect = function (e) {
	let port = e.ports[0];
	pool.push(port);
	port.onmessage = function (e) {
	pool.forEach((v) => {
	v != port && v.postMessage(e.data);
	});
	};
	};

	export class SharedDataChannel {
	constructor(url, cb) {
	this.sharedWorker = new SharedWorker(url);
	this.sharedWorker.port.onmessage = (e) => {
	cb && cb(e.data);
	};
	}

	post(data) {
	this.sharedWorker.port.postMessage(data);
	}
	}

	<script type="module">
	import { SharedDataChannel } from "./index.js";
	const channel = new SharedDataChannel("./worker.js", (res) => {
	document.querySelector("#content").innerHTML += `${res} </br>`;
	});
	document.querySelector("#send").addEventListener("click", () => {
	channel.post("登录页面发送的数据");
	});
	</script>

	<body>
	登录页面


	<button id="send">发送</button>
	<p id="content"></p>
	</body>