前端中的广播通信

2023-12-09 05:25| 来源: 网络整理| 查看: 265

我们经常会用postMessage来实现页面间的通信，但这种方式更像是点对点的通信。但是当我们使用广播通信时我们只要在一个页面发送信息，其他所有的页面都能接收到这条信息，但是前提是同源页面。下面的方式就可以创建一个标识为kevin的频道：

const bc = new BroadcastChannel('kevin');

各个页面可以通过onmessage来监听被广播的消息：

bc.onmessage = function (e) { const data = e.data; const text = '[receive] ' + data.msg + ' —— tab ' + data.from; console.log('[BroadcastChannel] receive message:', text); };

要发送消息时只需要调用实例上的postMessage方法即可：

bc.postMessage(mydata);

看个实例：第一个页面：

Document 点击 let button=document.getElementById('button') button.onclick=function(){ let cast = new BroadcastChannel('mychannel'); //创建一个名字是mychannel的对象。记住这个名字，下面会用到 myObj = { from: "children1", content: "add" }; cast.postMessage(myObj); }

第二个页面：

Document let cast1 = new BroadcastChannel('mychannel');//创建一个和刚才的名字一样的对象 cast1.onmessage = function (e) { //e.data就是刚才的信息; console.log(e.data); };

用liver-server运行，在第一个页面点击按钮，在第二个页面的控制台上即可查看第一个页面发送过来的信息。在这里插入图片描述

【本文地址】

前端中的广播通信

前端中的广播通信

今日新闻

推荐新闻