Stack Overflow
Stack Overflow

Questions tagged [broadcast-channel]

The Broadcast Channel API allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).

By creating a BroadcastChannel object, which is listening to the underlying channel, you are able to receive any message that has been posted to it. An interesting point is that you no longer have to maintain a reference to iframes or workers that you wish to communicate with. They can simply “subscribe” to particular channels by constructing a BroadcastChannel, and have full-duplex (bi-directional) communication between all of them.

See MDN Web API Reference - Broadcast Channel

Related APIs

43 questions
288
votes
9 answers

Communication between tabs or windows

I was searching for a way how to communicate between multiple tabs or windows in a browser (on the same domain, not CORS) without leaving traces. There were several solutions: using the window object postMessage cookies localStorage The first is…
Tomas M
  • 6,919
  • 6
  • 27
  • 33
18
votes
1 answer

How can I use the BroadcastChannel API or something similar in Safari 10+?

Problem: I need a client-side Javascript solution (jQuery is fine) where an event in one browser window/tab can be broadcast to other windows/tabs on the same domain. For example, if a cart is updated in tab A, tabs B and C get notified so we can…
Roobot
  • 860
  • 1
  • 10
  • 20
7
votes
0 answers

How do I view existing opened BroadcastChannels using JavaScript?

HTML5 BroadcastChannel API is a great solution to sending data between tabs/windows. They are opened with new BroadcastChannel(name) and closed by calling the .close() function. However, it provides no explanation on how to view existing opened…
CaptainA33
  • 71
  • 3
6
votes
1 answer

How do I inspect a BroadcastChannel with Chrome DevTools?

Is there a way, with Chrome DevTools, to see what’s going on in a BroadcastChannel other than attaching a message event listener to it, so that I could see who’s postMessage-ing what?
Константин Ван
  • 12,550
  • 7
  • 61
  • 73
5
votes
1 answer

BroadcastChannel testing in chrome developer tools console isn't working

I am testing the BroadcastChannel functionality and I'am having trouble. I open two Chrome windows and the dev tools for each. On the console I write: const z = new BroadcastChannel('blarg') z.onmessage = function (ev) {console.log(ev)} I can…
Chris P
  • 96
  • 10
4
votes
0 answers

BroadcastChannel inside a cross origin iframe doesn't work in Safari & Firefox

I have two sites with different origins. Let it be foo.com and bar.com. Site foo.com fires messages through BroadcastChannel with 'payment-info' name. I also have an iframe, hosted on foo.com which is built in bar.com. Here's iframe…
alejandro
  • 41
  • 2
4
votes
1 answer

Angular: Binding to a observable property of service -> value doesn't update

I'm trying to communicate between two browser tabs/windows using BroadcastChannel API. The communication seems to work between two instances of angular service, but changes to the values of the observable are not shown. I'm trying to achieve this…
Jyrki Keinänen
  • 43
  • 6
3
votes
0 answers

Can i open / focus a different tab within the same domain that i didn't open myself?

I have two instances of my Angular App running in two different tabs, I would like to be able to let the user switch between them by pressing a button on the site. I can communicate between the instances using the Broadcast Channel API, however…
Marian Kreiser
  • 31
  • 1
3
votes
0 answers

Is it possible to broadcast a SharedArrayBuffer to Web Workers via the Broadcast Channel API?

The Broadcast Channel API seems like an alternative to postMessage or the Channel Messaging API (aka MessageChannel.) I've used both successfully in recent versions of Google Chrome to send Shared Array Buffers; however, I am having trouble sending…
chriswa
  • 128
  • 2
  • 7
3
votes
2 answers

Is there a way to reply to only the sender, after receiving a BroadcastChannel message?

Suppose I have a bunch of same-origin windows or tabs A, B, C, D, and E, that don't hold references to each other. (e.g. a user opened them independently). Suppose A sends a BroadcastChannel message to the others, and as a result, D needs to send…
Doin
  • 7,545
  • 4
  • 35
  • 37
2
votes
1 answer

Refresh token, wait for refresh on frontend with axios

Is there a way to block all api calls while I wait for the refresh endpoint to return? I know axios has interceptors, but how would I delay all subsequent calls after the access token has expired? Otherwise the user would just get some error…
George
  • 181
  • 5
2
votes
0 answers

How to identify if the current tab is the source of message in Broadcast Channel API?

I want to use Broadcast Channel API in my Angular application to maintain logged in state across tabs. But the tab from which the user is logging in needs to run a little different code than the other tabs. I am setting the handler for MessageEvent…
Urooj
  • 151
  • 7
2
votes
2 answers

Force one tab only on web app (e.g. similar to WhatsApp and Google Messenger)

I have a strict requirement to only allow a logged in user to open my web app in one tab. I've noticed that WhatsApp and Google Messenger's web apps have implemented this. For example, trying to open those apps in more than one tab (be it on the…
Johnny Oshika
  • 54,741
  • 40
  • 181
  • 275
2
votes
2 answers

Angular BroadcastChannel not working on Safari

BroadcastChannel is a native function in Angular. It doesn't require importing an additional library. You just declare it like this... const broadcastChannel = new BroadcastChannel('demo-broadcast-channel'); You send messages like…
AppDreamer
  • 1,266
  • 3
  • 16
  • 34
2
votes
1 answer

Get an event on backend side once a user has joined a broadcast channel with Redis in Laravel

I'm trying to understand how to catch an event backend side once a user joined the channel. I mean right after the authentication has been done for a Private or a Presence channel. For instance, after that: Broadcast::channel('chat.{roomId}',…
Giuseppe87
  • 406
  • 4
  • 14
1
2 3