odesílání zpráv mezi prohlížení kontextech, jako je windows, jazýčky, frame nebo iframe do stejného původu, můžeme použít Vysílací kanál API.

v tomto článku se podíváme na to, jak jej použít k odesílání a přijímání zpráv.

Chcete – li použít API, musíme vytvořit BroadcastChannel objekt, který poslouchá podkladový kanál.

pak jsme schopni přijímat všechny zprávy, které byly zveřejněny na něm. Nemusíme udržovat odkaz na iframe nebo pracovníky, se kterými chceme komunikovat.

cokoli ze stejného původu se může přihlásit k odběru určitého kanálu vytvořením BroadcasChannel a pak bude mít plně duplexní komunikaci mezi všemi.

můžeme použít následovně:

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

V kódu výše, jsme vytvořili BroadcastChannel instance a pak jsme volali postMessageonmessage nemovitosti poslouchat zprávy, které byly odeslány.

data jsou přístupná pomocí vlastnosti data.

pak můžeme zavolat close a zavřít kanál, až budeme hotovi.

můžeme poslat jakýkoli druh objektu a ne jen řetězec.

Zpráva > Událost

ev parametr v onmessage handler MessageEvent objekt.

má několik vlastností pouze pro čtení, ke kterým máme přístup:

• data – data odeslaná emitorem zpráv — To bude obsah, který jsme prošli do postMessage
• origin — řetězec, který představuje původ zprávy vysílané
• lastEventId — řetězec reprezentující unikátní ID události
• sourceMessageEventSource objekt (který může být WindowProxyMessagePort nebo ServiceWorker objekt), zastupující zprávu vysílač
• ports — pole MessagePort objekt, který představuje porty spojené s kanálem, kterým je zpráva odesílána.

Zpracování Chyb

zpracovávat chyby s odesíláním zpráv, můžeme nastavit obslužné rutiny události do onmessageerror vlastnost Vysílání Kanálu objekt.

například můžeme napsat:

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

pak můžeme zaznamenat všechny chyby, které se objeví.

Jméno

můžeme získat jméno kanálu name majetku.

K tomu, můžeme napsat:

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

Pak můžeme vidět, že naše Vysílání Kanálu je test_channelconsole.log .

Závěr

Vysílání Kanálu API je velmi jednoduché API, které nám umožňuje dělat cross-kontext komunikace.

lze jej použít k detekci akcí uživatele na ostatních kartách v prostředí původu stejného webu, jako když se uživatel přihlásí k účtu.

neexistuje žádný protokol pro zasílání zpráv a různé dokumenty v různých kontextech je třeba implementovat sami.

také neexistuje žádné vyjednávání a specifikace to nevyžaduje.