div>

figcaption > bilde Av Ricardo gomez ENGEL på unsplash

for å sende meldinger mellom surfing sammenhenger som vinduer, faner, Ramme eller Iframes innenfor samme opprinnelse, kan vi bruke Broadcast Kanal API.

i denne artikkelen ser vi på hvordan du bruker den til å sende og motta meldinger.

for å bruke API, må vi opprette et BroadcastChannel objekt som lytter til den underliggende kanalen.

da kan vi motta alle meldinger som har blitt lagt ut på den. Vi trenger ikke å opprettholde en referanse til iframes eller arbeidere som vi ønsker å kommunisere med.

alt innenfor samme opprinnelse kan abonnere på en bestemt kanal ved å opprette en BroadcasChannel og så vil de ha full dupleks kommunikasjon mellom dem alle.

vi kan bruke det som følger:

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

i koden ovenfor opprettet vi en BroadcastChannel forekomst og så kalte vi postMessage og sett onmessage eiendom til lytt til meldinger som ble sendt.

dataene er tilgjengelig ved hjelp av egenskapendata.

vi kan da ringe close for å lukke kanalen når vi er ferdige.

Vi kan sende noen form for objekt og Ikke bare en streng.

Meldingshendelse

ev parameteren ionmessage behandler erMessageEvent objektet.

Den har noen skrivebeskyttede egenskaper som vi kan få tilgang til:

• data — dataene som sendes av meldingsemitteren. Dette vil være innholdet som vi passerte inn postMessage

origin — en streng som representerer opprinnelsen til meldingen som sendes

• lastEventId — en streng som representerer en unik ID for hendelsen
• source — aMessageEventSourceobjekt, (som kan være enWindowProxyMessagePortellerServiceWorkerobjekt), som representerer meldingsemitteren
• ports — en matrise avMessagePortobjekt som representerer porter knyttet til kanalen meldingen sendes gjennom.

Håndteringsfeil

for å håndtere feil ved sending av meldinger, kan vi sette en hendelsesbehandler tilonmessageerror egenskapen Til Kringkastingskanalobjektet.

for eksempel kan vi skrive:

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

da kan vi logge eventuelle feil som kommer opp.

Bilde av pawel kadysz på unsplash

navn

vi kan få navnet på kanalen mednameeiendom.

for å gjøre dette, kan vi skrive:

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

så kan vi se at Vår Kringkastingskanal navn er test_channel fra console.log.

Konklusjon

Kringkastingskanalen API er en veldig enkel API som lar oss gjøre krysskontekstkommunikasjon.

Det kan brukes til å oppdage brukerhandlinger i de andre fanene i samme opprinnelsesmiljø som når en bruker logger på en konto.

det er ingen meldingsprotokoll og ulike dokumenter i ulike sammenhenger må implementere det selv.

Det er Heller ingen forhandling, og det kreves ikke av spesifikasjonen.