4 ms·

I hate to suggest a solution before testing it myself so apologies in advance but I have a hunch that Broadcast Channel API can help you detect browser tab open

I hate to suggest a solution before testing it myself so apologies in advance but I have a hunch that Broadcast Channel API can help you detect browser tab opens on client side. New tabs won't connect to event source and instead listen for localStorage updates that the first loaded tab makes. https://www.google.com/search?q=can+I+use+BroadcastChannel+API+to+detect+how+many+tabs+a+client+has+open%3F&rlz=1C5CHFA_enUS917US918&oq=can+I+use+BroadcastChannel+API+to+detect+how+many+tabs+a+client+has+open%3F&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRhA0gEJMTc0MTdqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8 https://www.google.com/search?q=can+I+use+BroadcastChannel+A... The problem in this case is how to handle the first tab closing and re-assign which tab then becomes the new "first" tab that connects to the event source but it may be a LOE to solve. Again apologies for suggesting unproven solutions but at the same time I'm interested in feedback it gets to see if its near the right track

b4ckup 2y ago
This sounds like a good use case for using a service worker. All tabs talk to the service worker and the worker is the single instance that talks to the backend and can use only one connection. Maybe there are some trade offs for using SSE in web workers, I'm not sure.
- Keithamus 2y ago
  BroadcastChannel is a better solution for a couple of reasons. Service Workers are better at intercepting network requests and returning items from a cache, there’s some amount of additional effort to do work outside of that. The other thing is they’re a little more difficult to set up. A broadcast channel can be handled in a couple lines of code, easily debuggable as they run on the main thread, and they’re more suited to the purpose.
  - fitsumbelay 2y ago
    agreed. Workers was one of my first thoughts but I think BroadcastChannel delivers with much lower LOE
  - nchmy 2y ago
    Weblocks (https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_A...) are an even better way to do this than Broadcast Channel
  - b4ckup 2y ago
    I disagree. You can just postMessage to communicate with the service worker and therefore I imagine the code using broadcast channel to be actually quite similar. About debugging, service workers are easily debuggable, though not on the main thread as you already mentioned.
nchmy 2y ago
Rather than Broadcast Channel, you can use the Web Locks API (https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_A...). This handles the leader election pretty seamlessly because all tabs try to become the leader and only one actually can. This library (https://github.com/pubkey/broadcast-channel https://github.com/pubkey/broadcast-channel) from the fantastic RxDB javascript DB library uses WebLocks with a fallback to Broadcast Channel. But, WebLocks are supported on 96% of browsers, so probably safe to just use it exclusively now

b4ckup 2y ago

This sounds like a good use case for using a service worker. All tabs talk to the service worker and the worker is the single instance that talks to the backend and can use only one connection. Maybe there are some trade offs for using SSE in web workers, I'm not sure.

Keithamus 2y ago
BroadcastChannel is a better solution for a couple of reasons. Service Workers are better at intercepting network requests and returning items from a cache, there’s some amount of additional effort to do work outside of that. The other thing is they’re a little more difficult to set up. A broadcast channel can be handled in a couple lines of code, easily debuggable as they run on the main thread, and they’re more suited to the purpose.
- fitsumbelay 2y ago
  agreed. Workers was one of my first thoughts but I think BroadcastChannel delivers with much lower LOE
- nchmy 2y ago
  Weblocks (https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_A...) are an even better way to do this than Broadcast Channel
- b4ckup 2y ago
  I disagree. You can just postMessage to communicate with the service worker and therefore I imagine the code using broadcast channel to be actually quite similar. About debugging, service workers are easily debuggable, though not on the main thread as you already mentioned.

nchmy 2y ago

Rather than Broadcast Channel, you can use the Web Locks API (https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_A...). This handles the leader election pretty seamlessly because all tabs try to become the leader and only one actually can. This library (https://github.com/pubkey/broadcast-channel https://github.com/pubkey/broadcast-channel) from the fantastic RxDB javascript DB library uses WebLocks with a fallback to Broadcast Channel. But, WebLocks are supported on 96% of browsers, so probably safe to just use it exclusively now