üzenetek küldéséhez böngészési kontextusok között, például ablakok, fülek, keret vagy iframe-ek ugyanazon eredeten belül, használhatjuk a Broadcast csatorna API.

ebben a cikkben megnézzük, hogyan kell használni az üzenetek küldésére és fogadására.

az API használatához létre kell hoznunk egy BroadcastChannel objektumot, amely a mögöttes csatornát hallgatja.

akkor képesek vagyunk fogadni minden üzenetet, hogy már írt rá. Nem kell hivatkoznunk az iframe-ekre vagy a munkavállalókra, akikkel kommunikálni akarunk.

bármi, ami ugyanazon az eredeten belül van, feliratkozhat egy adott csatornára egyBroadcasChannel létrehozásával, majd teljes duplex kommunikációt folytathatnak közöttük.

a következőképpen használhatjuk:

const bc = new BroadcastChannel("test_channel");
bc.postMessage("test");
bc.onmessage = ev => {
console.log(ev.data);
};
bc.close();

a fenti kódban létrehoztunk egy BroadcastChannel példányt, majd hívtuk postMessage és beállítottuk a onmessage tulajdonságot az elküldött üzenetek meghallgatása.

az adatokhoz a data tulajdonság használatával lehet hozzáférni.

ezután felhívhatjuk a close – t, hogy bezárjuk a csatornát, ha végeztünk.

bármilyen objektumot küldhetünk, nem csak egy karakterláncot.

üzenet Esemény

aevparaméter aonmessagekezelő aMessageEvent objektum.

néhány csak olvasható tulajdonsággal rendelkezik, amelyekhez hozzáférhetünk:

• data-az üzenetkibocsátó által küldött adatok. Ez lesz az A tartalom, amelyet átadtunk postMessage
• origin — egy karakterlánc, amely a kibocsátott üzenet eredetét képviseli
• lastEventId — egy karakterlánc, amely az esemény egyedi azonosítóját képviseli
• source — a MessageEventSource objektum, (amely lehet egy WindowProxyMessagePort, vagy ServiceWorker objektum), amely az üzenet kibocsátóját képviseli
• ports — egy sor MessagePort objektum, amely a portok, amelyek ahhoz a csatornához vannak társítva, amelyen keresztül az üzenet Küldésre kerül.

hibák kezelése

az üzenetek küldésével kapcsolatos hibák kezeléséhez beállíthatunk egy eseménykezelőt a Broadcast Channel objektumonmessageerror tulajdonságára.

például írhatunk:

bc.onmessageerror = e => console.log(e);

akkor naplózhatunk minden felmerülő hibát.

fotó: Pawel kadysz on Unsplash

név

a csatorna nevét a name tulajdonsággal kaphatjuk meg.

ehhez írhatunk:

const bc = new BroadcastChannel("test_channel");
console.log(bc.name);

akkor láthatjuk, hogy a sugárzott csatornánk neve test_channela console.log.

következtetés

a Broadcast Channel API egy nagyon egyszerű API, amely lehetővé teszi számunkra, hogy több kontextusban kommunikáljunk.

ezt fel lehet használni, hogy érzékeli a felhasználói műveletek a többi fülön belül ugyanazon a helyszínen origin környezetben, mint amikor a felhasználó bejelentkezik egy fiókot.

nincs üzenetkezelési protokoll, és a különböző kontextusokban lévő különböző dokumentumoknak maguknak kell megvalósítaniuk.

szintén nincs tárgyalás, és ez nem szükséges a specifikáció.