Обмеження postMessage

У 2012 році, так, у 2012 році! Це було більше десяти років тому — я написав статтю про комунікацію між сторінками за допомогою postMessage.

Швидко переміщаємось у сьогоднішній день, і тепер ми маємо API Broadcast Channel, ще один інструмент для забезпечення комунікації між сторінками.

Основна різниця між цими двома інтерфейсами полягає в їхніх моделях комунікації. API Broadcast Channel використовує модель мовлення, на відміну від моделі точка-точка, яку використовує postMessage.

Мовлення означає, що будь-яка сторінка в межах одного домену може слухати повідомлення. Якщо сторінка A надсилає повідомлення, всі інші сторінки на тому ж домені можуть отримати його одночасно. Це робить API Broadcast Channel особливо корисним у сценаріях, де потрібна синхронізація даних в реальному часі.

Ось порівняння між postMessage та API Broadcast Channel:

Використання API Broadcast Channel надзвичайно просте

На перший погляд API Broadcast Channel може здатися складним, але насправді використання цього інтерфейсу є досить простим. Чесно кажучи, найскладнішою частиною може бути правильне написання імені API!

Ось основна ідея: кожна сторінка, яка потребує комунікації, створює новий екземпляр того самого каналу мовлення, ось так:

const bc = new BroadcastChannel('melin');

А потім інші сторінки можуть отримати це повідомлення:

bc.postMessage('hello world');

І потім інші сторінки можуть отримати повідомлення таким чином:

const bc = new BroadcastChannel('melin');  
bc.onmessage = function (event) {  
 console.log(event.data);  
};

І це все.

Коли використовувати API Broadcast Channel

1. Синхронізація стану між кількома вкладками або вікнами
2. Сповіщення в реальному часі між вкладками
3. Спільні дані в різних контекстах (вкладки, iframe, Workers)
4. Управління станом сесії або активністю між вкладками
5. Координація завдань у пулі Worker
6. Збереження синхронізації між кількома iframe
7. Управління подіями життєвого циклу веб-застосунку
8. Обробка завдань фонової синхронізації

Сумісність та інші міркування

Сумісність поточного API Broadcast Communication досить хороша. Ось скріншот з даними сумісності на caniuse.com:

BroadcastChannel можна використовувати не тільки в контексті вікна, а й у Web Workers.

Це не обмежується комунікацією між iframe; він також підтримує комунікацію між різними вкладками браузера. Я не буду повторювати демонстрацію тут, але це, безумовно, підтримується.

Отримання та закриття каналу

Ім'я каналу можна отримати за допомогою атрибута name, наприклад:

console.log(bc.name);

Щоб закрити канал, можна використовувати метод close():

bc.close();

Якщо канал закритий, спроба використати postMessage() для відправлення даних викличе помилку. Точно так само, використання події message для отримання даних не вдасться, і буде спрацьовувати подія messageerror.

У наведеній демонстрації повідомлення комунікації отримуються за допомогою методу onmessage. Альтернативно, ви можете прив'язати події за допомогою addEventListener, наприклад:

bc.addEventListener("message", (event) => {  
 console.log(event.data);  
})




Перекладено з: [Introduction to the Broadcast Channel API: Enabling Broadcast Communication Across Web Page](https://javascript.plainenglish.io/introduction-to-the-broadcast-channel-api-enabling-broadcast-communication-across-web-page-4e7ac5d7d8b9)