How to communicate/broadcast between Electron renderers EASILY

·

1 min read

I was searching online for a way to broadcast a message to all my renderers, but didn't find a simple solution. Then I stumbled upon a native browser API called BroadcastChannel that let's you easily communicate between windows/tabs of the same origin.

And since Electron is based of Chrome, I tried it in my Electron app and it worked!

renderer1.js

const myChannel = new BroadcastChannel("myChannel");
myChannel.postMessage("Hello");

renderer2.js

const myChannel = new BroadcastChannel("myChannel");
myChannel.onmessage = (msg) => console.log("I got a msg", msg);

You can use this to easily broadcast a message to all your renderers, even the main process! And you can send any type of message, not just strings!