BroadcastChannel / MessageChannel în JavaScript

Cereri HTTP și comunicare Browserele moderne, Node.js 18+

Trimite mesaje între file, ferestre și workers deschise pe același site (BroadcastChannel) sau între două capete legate (MessageChannel).

Sintaxă
const canal = new BroadcastChannel("nume");
canal.postMessage(date)
canal.close()
const { port1, port2 } = new MessageChannel();

Ce face BroadcastChannel / MessageChannel

Toate obiectele BroadcastChannel cu același nume, de pe același site, primesc mesajele trimise cu postMessage de oricare dintre ele (în afară de cel care trimite). Exemplu tipic: deconectarea dintr-o filă îi deconectează pe toate celelalte. close() oprește canalul.

MessageChannel creează o pereche de porturi legate: ce trimiți pe port1 ajunge pe port2 și invers. Un port poate fi trimis unui worker sau unui iframe, pentru o legătură directă.

Parametri

Parametru Descriere
nume Pentru BroadcastChannel: numele canalului.

Ce returnează

Un canal sau o pereche de porturi.

Exemple

Exemplul 1: Două „file” pe același canal

const fila1 = new BroadcastChannel("sesiune");
const fila2 = new BroadcastChannel("sesiune");

fila2.addEventListener("message", (e) => {
  console.log("fila 2 a primit:", e.data);
  fila1.close();
  fila2.close();
});
fila1.postMessage({ tip: "deconectare", utilizator: "ana" });

Rezultat

fila 2 a primit: { tip: 'deconectare', utilizator: 'ana' }

Exemplul 2: Două porturi legate

const { port1, port2 } = new MessageChannel();

port2.addEventListener("message", (e) => {
  console.log("port2:", e.data);
  port1.close();
});
port2.start();
port1.postMessage("ping");

Rezultat

port2: ping

Greșeli frecvente

  • Uiți close() pe canale și porturi. În Node.js programul nu se mai termină, iar în browser canalul ține resurse ocupate.

Comenzi înrudite

  • Worker (Web Workers): Rulează cod JavaScript pe un fir separat, ca operațiile grele să nu blocheze pagina.
  • localStorage: Salvează date în browserul vizitatorului, care rămân și după închiderea paginii.
  • window.postMessage: Trimite mesaje în siguranță între ferestre sau iframe-uri de pe domenii diferite.