figcaption > foto av Ricardo Gomez Angel på Unsplash

för att skicka meddelanden mellan bläddringssammanhang som Windows, flikar, ram eller Iframes inom samma ursprung kan vi använda Broadcast kanal API.

i den här artikeln tittar vi på hur du använder den för att skicka och ta emot meddelanden.

för att använda API måste vi skapa ettBroadcastChannel objekt som lyssnar på den underliggande kanalen.

då kan vi ta emot alla meddelanden som har skickats till den. Vi behöver inte upprätthålla en hänvisning till Iframes eller arbetstagare som vi vill kommunicera med.

allt inom samma ursprung kan prenumerera på en viss kanal genom att skapa ett BroadcasChannel och sedan har de full duplex kommunikation mellan dem alla.

Vi kan använda det på följande sätt:

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

i koden ovan skapade vi en BroadcastChannel instans och sedan kallade vi postMessage och ställ in onmessage egenskap till lyssna på meddelanden som skickades.

data nås genom att använda egenskapen data.

Vi kan sedan ringa close för att stänga kanalen när vi är klara.

Vi kan skicka alla typer av objekt och inte bara en sträng.

Meddelandehändelse

parameternev Ionmessage hanteraren ärMessageEvent objektet.

det har några skrivskyddade egenskaper som vi kan komma åt:

• data — data som skickas av meddelandesändaren. Detta kommer att vara innehållet som vi passerade in i postMessage
• origin — en sträng som representerar ursprunget för meddelandet som avges
• lastEventId — en sträng som representerar ett unikt ID för händelsen
• source — a MessageEventSource objekt, (som kan vara ett WindowProxyMessagePort, eller ServiceWorker objekt), som representerar meddelandesändaren
• ports — en array av MessagePort objekt som representerar portar som är associerade med kanalen meddelandet skickas genom.

hanteringsfel

för att hantera fel med att skicka meddelanden kan vi ställa in en händelsehanterare till egenskapen onmessageerror för Broadcast Channel-objektet.

till exempel kan vi skriva:

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

då kan vi logga eventuella fel som kommer upp.