введение
Как внешний интерфейс реализует широковещательную связь?
Что такое широковещательный канал?
На переднем конце мы часто используемpostMessageДля достижения связи между страницами, но этот способ больше похож на двухточечную связь. Для некоторых сообщений, которые необходимо транслировать (сообщить всем страницам), используйтеpostMessageНе очень естественно. Широковещательный канал используется для компенсации этого дефекта.
Как следует из названия, широковещательный канал создает (широковещательный) канал, который могут использовать все страницы одного и того же источника, поэтому сообщения, отправленные одной из них, могут быть прослушаны другими страницами.
Давайте кратко рассмотрим, как его использовать.
как использовать?
API широковещательного канала очень прост и удобен в использовании.
Создайте
Сначала мы создадим экземпляр с помощью конструктора:
const bc = new BroadcastChannel('alienzhou');
может принять одинDOMStringКак имя для идентификации этого канала. На других страницах вы можете использовать тот же широковещательный канал, передав то же имя. По словам MDN, это объясняется следующим образом:
There is one single channel with this name for all browsing contexts with the same origin.
Значение имени может быть передано через экземпляр экземпляра.nameприобретение собственности
console.log(bc.name);
// alienzhou
слушать сообщения
После того, как Broadcast Channel создан, вы можете прослушать широковещательные сообщения на странице:
bc.onmessage = function(e) {
console.log('receive:', e.data);
};
Вы также можете связать прослушиватели ошибок:
bc.onmessageerror = function(e) {
console.warn('error:', e);
};
за исключением
.onmessageНазначение таким образом, вы также можете использоватьaddEventListenerдобавить'message'монитор.
отправлять сообщения
Экземпляры Broadcast Channel также имеют соответствующийpostMessageДля отправки сообщений:
bc.postMessage('hello')
закрытие
Видно, что широковещательная связь между несколькими страницами может быть реализована всего в несколько строк кода, что очень удобно. А иногда мы хотим отменить широковещательное прослушивание текущей страницы:
- Один из способов — отменить или изменить соответствующий
'message'прослушиватель событий - Еще один простой способ — использовать предоставленный нам экземпляр Broadcast Channel.
closeметод.
bc.close();
Между ними есть разница:
Отмена'message'Прослушивание просто не позволяет странице отвечать на широковещательные сообщения, а широковещательный канал все еще существует; при вызовеcloseметод Это отключит соединение с широковещательным каналом, чтобы браузер мог попытаться переработать объект, потому что тогда браузер будет знать, что пользователю больше не нужно использовать широковещательный канал.
вызывается после выключенияpostMessageПоявится следующая ошибка
Если вам нужно будет снова начать трансляцию позже, вы можете воссоздать широковещательный канал с тем же именем.
Демонстрационный эффект
Вы можете нажать здесь, чтобы просмотреть онлайн-демонстрацию >>
Ниже показан демонстрационный эффект Broadcast Channel Demo:
Как совместимость?
Broadcast Channel — очень полезный API для синхронизации многостраничных сообщений, но совместимостьне очень оптимистично.
К счастью, у нас есть несколько других решений, которые можно использовать в качестве дополнений (или полифиллов), а прочая межстраничная коммуникация может относиться к другой моей статье.«Метод фронтальной межстраничной коммуникации».
Студенты, заинтересованные в статье, могут обратить вниманиеМой блог >> https://github.com/alienzhou/blog