BroadcastChannel работает на той же странице?

2

Моя веб-страница

var bc = new BroadcastChannel('Consumer');

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

bc.postMessage("hello");

Он передает сообщение, и страница также требуется для получения того же сообщения.

Однако это не сработает. Я что-то пропустил?

  • 1
    В спецификации говорится Отправляет данное сообщение другим объектам BroadcastChannel, настроенным для этого канала.
  • 0
    @JaromandaX хмм ... Мне нужно транслировать на текущую страницу, а также на другие страницы. Какой метод я должен использовать?
Показать ещё 1 комментарий
Теги:

3 ответа

2

Вы можете создать два экземпляра 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

Поделиться
  • 0
    Обширные тесты нескольких BroadcastChannels в пределах одной вкладки, и он ведет себя как ожидалось даже рядом с несколькими вкладками, также содержащими несколько BroadcastChannels. Запуск при отправке и закрытии отдельных экземпляров при загрузке страницы, setTimeout, setInterval, async - кажется стабильным (все с использованием собственной реализации Chrome). Таким образом, ответ @ ThdK должен быть принят, поскольку ему не важно, в каком контексте выполняется конкретный скрипт, он все равно может отправлять / получать сообщение.
1

Вы можете отправить событие (назовите его как угодно), например, с документами, с теми же 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');
Поделиться
0

@Gqqnbig Я протестировал с вашим предложением создать 2 объекта, но я нашел 1 ограничение в вашем предложении. Когда мы открываем другую вкладку, она вызывает onmessage дважды на каждой вкладке.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню