Communicatie tussen tabbladen
Crowl.broadcast.js
Met de broadcast-class kan je communiceren met andere tabbladen en iframes.
Methodes
- Constructor: De constructor maakt een nieuw BroadcastChannel object aan met de opgegeven kanaalnaam en stelt de debugmodus in op basis van de parameter.
- 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.
- onMessage: Methode om een callback in te stellen die wordt aangeroepen wanneer een bericht wordt ontvangen.
- updateDebug: Methode om de debugmodus in te stellen op true of false.
- 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);
});