om berichten Te versturen tussen de bladeren contexten, zoals windows, tabbladen, een frame of iframe ‘ binnen de dezelfde oorsprong, kunnen we gebruik maken van de Broadcast Channel API.

in dit artikel zullen we bekijken hoe het te gebruiken om berichten te verzenden en te ontvangen.

om de API te gebruiken, moeten we een BroadcastChannel object aanmaken dat naar het onderliggende kanaal luistert.

dan kunnen we alle berichten ontvangen die erop gepost zijn. We hoeven geen verwijzing te houden naar iframes of werknemers waarmee we willen communiceren.

alles binnen dezelfde oorsprong kan zich abonneren op een bepaald kanaal door een BroadcasChannel aan te maken en dan hebben ze full-duplex communicatie tussen hen allemaal.

We kunnen het als volgt gebruiken:

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

in de bovenstaande code hebben we een BroadcastChannel instantie aangemaakt en vervolgens hebben we postMessage aangeroepen en de eigenschap onmessage ingesteld om berichten te beluisteren die zijn verzonden.

de gegevens worden benaderd met behulp van de eigenschap data.

we kunnen dan close aanroepen om het kanaal te sluiten als we klaar zijn.

We kunnen elk object verzenden en niet alleen een string.

Message Event

deev parameter in deonmessage handler is hetMessageEvent object.

Het heeft een paar alleen-lezen eigenschappen die we kunnen benaderen:

• data — de gegevens verzonden door de berichtenzender. Dit zal de inhoud die we passeerden in postMessage
• origin — een tekenreeks dat is de oorsprong van het bericht uitgezonden
• lastEventId — een tekenreeks die een unieke ID voor het event
• sourceMessageEventSource object (dat kan een WindowProxyMessagePort of ServiceWorker objecten) het vertegenwoordigen van het bericht emitter
• ports — een array van MessagePort object die de poorten die zijn gekoppeld aan het kanaal waar het bericht doorheen wordt verzonden.

Handling Errors

om fouten bij het verzenden van berichten af te handelen, kunnen we een event handler instellen op de onmessageerror eigenschap van het Broadcast Channel object.

bijvoorbeeld, we kunnen schrijven:

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

dan kunnen we alle fouten die zich voordoen loggen.

Naam

We kunnen de naam van de zender in met de name eigendom.

om dit te doen, kunnen we schrijven:

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

dan kunnen we zien dat de naam van ons uitzendkanaal test_channel van de console.log is .

conclusie

De Broadcast Channel API is een zeer eenvoudige API waarmee we cross-context communicatie kunnen doen.

het kan worden gebruikt om acties van gebruikers te detecteren in de andere tabbladen binnen dezelfde site oorsprong omgeving, zoals wanneer een gebruiker zich aanmeldt bij een account.

Er is geen messaging protocol en verschillende documenten in verschillende contexten moeten het zelf implementeren.

ook, Er is ook geen onderhandeling en het is niet vereist door de specificatie.