javascript - 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