lähettää viestejä välillä lukemassa yhteyksissä, kuten ikkunat, välilehdet, kehyksen tai iframe sisällä samaa alkuperää, voimme käyttää Broadcast Channel API.

tässä artikkelissa pohditaan, miten sitä voi käyttää viestien lähettämiseen ja vastaanottamiseen.

API: n käyttämiseksi on luotavaBroadcastChannel olio, joka kuuntelee taustalla olevaa kanavaa.

silloin pystymme vastaanottamaan kaikki sinne lähetetyt viestit. Meidän ei tarvitse ylläpitää viittausta iframeihin tai työntekijöihin, joiden kanssa haluamme kommunikoida.

kaikki saman alkuperän sisällä olevat voivat tilata tietyn kanavan luomalla BroadcasChannel ja silloin niiden kaikkien välille tulee täysimittainen tiedonsiirto.

Voimme käyttää sitä seuraavasti:

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

yllä olevassa koodissa loimme BroadcastChannel instanssin ja sitten kutsuimme postMessage ja asetimme onmessage ominaisuuden kuuntele lähetettyjä viestejä.

tietoihin pääsee käsiksi käyttämällä data ominaisuutta.

voimme sitten soittaa close sulkemaan kanavan, kun olemme valmiita.

voimme lähettää minkä tahansa objektin eikä vain merkkijonon.

viestin tapahtuma

ev parametri onmessage käsittelijä on MessageEvent objekti.

sillä on muutamia vain lukuominaisuuksia, joita voimme käyttää:

• data-viestin lähettäjän lähettämät tiedot. Tämä on se sisältö, jonka siirrimme postMessage

origin — merkkijono, joka edustaa lähetetyn viestin alkuperää

• lastEventId — merkkijono, joka edustaa tapahtuman yksilöllistä tunnistetta
• source — a MessageEventSourceobject, (joka voi olla WindowProxyMessagePort, tai ServiceWorkerObject), joka edustaa viestin lähettäjää
• ports — joukko MessagePortobjekti, joka edustaa portit, jotka liittyvät kanavaan, jonka kautta viesti lähetetään.

käsittelyvirheet

virheiden käsittelemiseksi viestien lähettämisellä voidaan asettaa tapahtumankäsittelijä onmessageerror yleislähetyskanavaobjektin ominaisuus.

esimerkiksi voidaan kirjoittaa:

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

sitten voidaan kirjata esiin tulevat virheet.

nimi

saamme kanavan nimen nameominaisuus.

tätä varten voimme kirjoittaa:

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

silloin voimme nähdä, että Lähetyskanavamme nimi on test_channelconsole.log .

johtopäätös

yleislähetyskanavan API on hyvin yksinkertainen API, jonka avulla voimme tehdä ristiyhteyden viestintää.

sitä voidaan käyttää käyttäjän toimien havaitsemiseen muissa välilehdissä saman sivuston origin-ympäristössä, kuten silloin, kun käyttäjä kirjautuu tilille.

viestiprotokollaa ei ole ja eri asiayhteyksissä olevat dokumentit joutuvat toteuttamaan sen itse.

myös, siellä ei myöskään neuvotella eikä sitä vaadita spesifikaatiossa.