Communicatie tussen tabbladen

Crowl.broadcast.js

Met de broadcast-class kan je communiceren met andere tabbladen en iframes. 

Methodes

  1. Constructor: De constructor maakt een nieuw BroadcastChannel object aan met de opgegeven kanaalnaam en stelt de debugmodus in op basis van de parameter.
  2. sendMessage: Controleert of het bericht een string, array of blob is. Indien de debugmodus aan staat, wordt een consolemelding geschreven wanneer een bericht wordt verzonden.
  3. onMessage: Methode om een callback in te stellen die wordt aangeroepen wanneer een bericht wordt ontvangen.
  4. updateDebug: Methode om de debugmodus in te stellen op true of false.
  5. close: Sluit het BroadcastChannel. Indien de debugmodus aan staat, wordt een consolemelding geschreven.

Met deze aanpassingen kun je de debugmodus naar behoefte in- of uitschakelen, waardoor consolemeldingen alleen zichtbaar zijn als dat nodig is.

Voorbeeldcode

// Maak een nieuwe broadcaster aan met debugmodus uit
const broadcaster = new Broadcaster('mijn_kanaal');

// Stel een listener in voor inkomende berichten
broadcaster.onMessage((data) => {
    console.log("Gegevens ontvangen van een andere tab of iframe:", data);
});

// Verstuur een string bericht
broadcaster.sendMessage("Hallo, wereld!");

// Verstuur een array
broadcaster.sendMessage([1, 2, 3, 4, 5]);

// Verstuur een blob
const blob = new Blob(["Dit is een blob bericht"], { type: 'text/plain' });
broadcaster.sendMessage(blob);

// Schakel debugmodus in
broadcaster.updateDebug(true);

// Verstuur nog een bericht om de debug output te zien
broadcaster.sendMessage("Debugmodus is nu aan");

// Sluit het kanaal wanneer klaar
// broadcaster.close();  

Je kan op die manier ook imageblobs tussen tabbladen verzenden.

// Maak een nieuwe broadcaster aan met debugmodus uit
const broadcaster = new Broadcaster('mijn_kanaal', true);

// Stel een listener in voor inkomende berichten
broadcaster.onMessage((data) => {
   if (data instanceof Blob) {
        const url = URL.createObjectURL(data);
        const img = document.createElement('img');
        img.src = url;
        document.body.appendChild(img);
   } else {
        console.log("Gegevens ontvangen van een andere tab of iframe:", data);
   }
});

// Laad de afbeelding en stuur deze als een Blob
document.getElementById("imageInput").addEventListener("change", (event) => {
   const file = event.target.files[0];
   broadcaster.sendMessage(file);
});
Volgende pagina