Per inviare messaggi tra l’esplorazione di contesti, come windows, schede, frame o iframe all’interno di una stessa origine, siamo in grado di utilizzare il Canale di trasmissione API.

In questo articolo, vedremo come usarlo per inviare e ricevere messaggi.

Per utilizzare l’API, dobbiamo creare un oggetto BroadcastChannel che sta ascoltando il canale sottostante.

Allora siamo in grado di ricevere tutti i messaggi che sono stati inviati ad esso. Non dobbiamo mantenere un riferimento a iframe o lavoratori con cui vogliamo comunicare.

Qualsiasi cosa all’interno della stessa origine può iscriversi a un particolare canale creando unBroadcasChannel e quindi avranno una comunicazione full-duplex tra tutti loro.

si può usare come segue:

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

Nel codice di cui sopra, abbiamo creato un BroadcastChannel istanza e quindi abbiamo chiamato postMessage e impostare il onmessage proprietà per ascoltare i messaggi che sono stati inviati.

Si accede ai dati utilizzando la proprietà data.

Possiamo quindi chiamareclose per chiudere il canale quando abbiamo finito.

Possiamo inviare qualsiasi tipo di oggetto e non solo una stringa.

Evento messaggio

Il parametroev nel gestoreonmessage è l’oggettoMessageEvent.

Ha alcune proprietà di sola lettura a cui possiamo accedere:

• data-i dati inviati dall’emettitore di messaggi. Questo sarà il contenuto che siamo passati in postMessage
• origin — una stringa che rappresenta l’origine del messaggio emesso
• lastEventId — una stringa che rappresenta un ID univoco per l’evento
• sourceMessageEventSource oggetto (che può essere un WindowProxyMessagePort o ServiceWorker oggetto), rappresenta il messaggio emettitore
• ports — un array di MessagePort oggetto che rappresenta il porte associate al canale attraverso il quale viene inviato il messaggio.

Gestione degli errori

Per gestire gli errori con l’invio di messaggi, possiamo impostare un gestore di eventi sulla proprietàonmessageerror dell’oggetto Broadcast Channel.

Ad esempio, possiamo scrivere:

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

Quindi possiamo registrare eventuali errori che si presentano.

Nome

Siamo in grado di ottenere il nome del canale con il name proprietà.

Per fare ciò, possiamo scrivere:

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

Quindi possiamo vedere che il nome del nostro canale di trasmissione è test_channeldal console.log.

Conclusione

L’API Broadcast Channel è un’API molto semplice che ci consente di effettuare comunicazioni cross-context.

Può essere utilizzato per rilevare le azioni dell’utente nelle altre schede all’interno dello stesso ambiente di origine del sito, come quando un utente accede a un account.

Non esiste un protocollo di messaggistica e documenti diversi in contesti diversi devono implementarlo da soli.

Inoltre, non c’è nemmeno negoziazione e non è richiesto dalle specifiche.