for at sende beskeder mellem gennemsøgningskontekster som vinduer, faner, ramme eller iFrames inden for samme oprindelse, kan vi bruge Broadcast kanal API.

i denne artikel vil vi se på, hvordan du bruger den til at sende og modtage meddelelser.

for at bruge API ‘ en skal vi oprette et BroadcastChannel objekt, der lytter til den underliggende kanal.

så er vi i stand til at modtage alle meddelelser, der er blevet sendt til den. Vi behøver ikke at opretholde en henvisning til iframes eller arbejdstagere, som vi ønsker at kommunikere med.

alt inden for samme oprindelse kan abonnere på en bestemt kanal ved at oprette enBroadcasChannel og så vil de have fuld duplekskommunikation mellem dem alle.

Vi kan bruge 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 oprettede vi en BroadcastChannel forekomst og derefter kaldte vi postMessage og indstil onmessage ejendom til at lyt til beskeder, der blev sendt.

dataene fås ved hjælp af egenskabendata.

Vi kan derefter ringeclose for at lukke kanalen, når vi er færdige.

Vi kan sende enhver form for objekt og ikke kun en streng.

Message Event

evparameter ionmessagehandler erMessageEvent objekt.

Det har et par skrivebeskyttede egenskaber, som vi kan få adgang til:

• data — de data, der sendes af meddelelsesemitteren. Dette vil være det indhold, vi gik ind i postMessage
• origin — en streng, der repræsenterer oprindelsen af den udsendte meddelelse
• lastEventId — en streng, der repræsenterer et unikt ID for begivenheden
• source — a MessageEventSource objekt, (som kan være en WindowProxyMessagePort, eller ServiceWorker objekt), der repræsenterer meddelelsesemitteren
• ports — et array af MessagePort objekt, der repræsenterer den porte, der er knyttet til den kanal, meddelelsen sendes igennem.

håndtering af fejl

for at håndtere fejl ved afsendelse af meddelelser kan vi indstille en hændelseshandler tilonmessageerror egenskaben for Udsendelseskanalobjektet.

for eksempel kan vi skrive:

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

så kan vi logge eventuelle fejl, der kommer op.