BroadcastChannel API is a new API used to communicate between same-origin tabs opened by the same user.
Let’s say you open two GitHub tabs, the rust repository and your stars page. You decide to star the awesome rust repository, but then you have to refresh your stars page to see your new star. That’s sad. There must be a way for GitHub to refresh your stars page in case you star something in another tab, right?
Show me something!
Okay, open another page of my blog in a new tab. Now open up your console and enter this:
I’ve put this code in my
<head>, pretty simple:
BroadcastChannels are pretty easy, here I’m going over the small details.
BroadcastChannels are constructed with a single argument, their name. Browsing contexts should use this name to communicate over a specified channel. There’s no limit to how many channels you can create.
In the first sentence of article I said it’s used to communicate between tabs, but it’s actually “browsing contexts”.
Browsing contexts are any environments owning a
Document, e.g. tabs, windows, iframes, etc.
Channels have only one property,
Channels have two methods:
This is the method used to broadcast a message to everyone subscribed to this channel.
data can be any kind of Object.
This method is used to leave a channel, in case you don’t want to hear from the channel anymore.
channel from my blog pages, and posting messages with others.
Channels inherit from
EventTarget, so you can use
Channels have only one event:
The event object passed to this event is a
MessageEvent with the
data property set to the actual message sent using
Let’s Fix GitHub —————-
You have to add two scripts, one for repository pages, and one for the stars page.
Click “New User Script”, and fill the inputs like this:
In the Script Editor, enter this:
Now create another script and fill the form like this:
Use this code:
Save, refresh your pages and Voila! You can now Star/Unstar any repository while your stars page is open, and your stars page will refresh immediately.
That’s it, I really like this API as it’s best of both worlds, simple and useful.
There are a lot of things which can be done with help of BroadcastChannels, I would love to hear your feedback on this API.