BroadcastChannel 是否在同一页面上工作？

Question

我的网页有

var bc = new BroadcastChannel('Consumer');

bc.onmessage = function(event) {
  alert("a");
}

bc.postMessage("hello");

它广播一条消息，页面也需要接收相同的消息。

但是它不起作用。我错过了什么吗？

Answer 1

您可以在页面上创建两个BroadcastChannel实例。一个可以充当消息的广播者，另一个可以充当消息的接收者。

var broadcaster = new BroadcastChannel('Consumer');
var messageReceiver= new BroadcastChannel('Consumer');

messageReceiver.onmessage = function(event) {
  alert(event.data);
}

broadcaster.postMessage("hello");

看看这个：https : //jsfiddle.net/h56d3y27/

或者封装在一个可重用的类中：（注意：并非所有浏览器都支持类。请参阅：https : //caniuse.com/#search=class浏览器兼容性）

class AllInclusiveBroadcaster {  
    constructor(listener, channelName) {
    if (!channelName) channelName = "channel";
    this.broadcaster = new BroadcastChannel(channelName);
    this.messageReceiver = new BroadcastChannel(channelName);

    this.messageReceiver.onmessage = (event) => {
        listener(event.data);
    }
    }

  postmessage(data) {
    this.broadcaster.postMessage(data);
  }
}


var broadcaster = new AllInclusiveBroadcaster((data) => alert(data));

broadcaster.postmessage("Hello BroadcastChannel");

在JSFiddle 中也可以看到这个

Answer 2

您可以将一个事件（您喜欢的名称）分派给文档，使用相同的data...然后有一个处理程序来侦听 BroadcastChannel 消息和您在上面创建的事件名称

下面，代码创建并监听fakeBroadcastMessage

创建了一个函数来发送 bc 消息和“本地”消息

var bc = new BroadcastChannel('Consumer');
function handleBroadcastMessage(event) {
    // do things here
}
bc.addEventHandler('message', handleBroadcastMessage);
document.addEventListener('fakeBroadcastMessage', handleBroadcastMessage);

function sendMessage(data) {
    bc.postMessage(data);
    var ev = new Event('fakeBroadcastMessage');
    ev.data = data;
    document.dispatchEvent(ev);
}

sendMessage('hello');