pentru a trimite mesaje între contexte de navigare precum ferestre, file, cadru sau iframe în aceeași origine, putem folosi Canal de difuzare API.

în acest articol, vom analiza modul de utilizare a acestuia pentru a trimite și primi mesaje.

pentru a utiliza API-ul, trebuie să creăm un obiectBroadcastChannel care ascultă canalul de bază.

atunci suntem capabili de a primi orice mesaje care au fost postate să-l. Nu trebuie să menținem o referință la iframe-uri sau lucrători cu care dorim să comunicăm.

orice din aceeași origine se poate abona la un anumit canal prin crearea unuiBroadcasChannel și apoi vor avea comunicare full-duplex între toate.

îl putem folosi după cum urmează:

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

în codul de mai sus, am creat o instanță BroadcastChannel și apoi am apelat postMessage și am setat proprietatea onmessage ascultați mesajele trimise.

datele sunt accesate utilizând proprietateadata.

putem apela close pentru a închide canalul când am terminat.

putem trimite orice fel de obiect și nu doar un șir.

mesaj eveniment

ev parametru înonmessage handler esteMessageEvent obiect.

are câteva proprietăți read-only pe care le putem accesa:

• data — datele trimise de emițătorul de mesaje. Acesta va fi conținutul pe care l — am trecut în postMessage
• origin — un șir care reprezintă originea mesajului emis
• lastEventId — un șir care reprezintă un ID unic pentru eveniment
• source — a MessageEventSource obiect, (care poate fi un WindowProxyMessagePort, sau ServiceWorker obiect), reprezentând emițătorul de mesaje
• ports – o matrice de MessagePort obiect reprezentând porturi asociate canalului prin care este trimis mesajul.

erori de manipulare

pentru a gestiona erorile cu trimiterea de mesaje, putem seta un handler de evenimente laonmessageerror proprietatea obiectului canalului de difuzare.

de exemplu, putem scrie:

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

apoi putem înregistra orice erori care apar.

fotografie de Pawel kadysz pe Unsplash

nume

putem obține numele canalului cu name proprietate.

pentru a face acest lucru, putem scrie:

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

atunci putem vedea că numele canalului nostru de difuzare este test_channel din console.log .

concluzie

API-ul canalului de difuzare este un API foarte simplu care ne permite să comunicăm în context încrucișat.

poate fi folosit pentru a detecta acțiunile utilizatorului în celelalte file din mediul de origine al aceluiași site, ca atunci când un utilizator se conectează la un cont.

nu există protocol de mesagerie și diferite documente în contexte diferite trebuie să-l implementeze singure.

De asemenea, nu există nici o negociere și nu este cerută de specificație.