@foundit/broadcasterjs

broadcasterjs

A simple yet powerful pub/sub javascript event bus

• easy to use
• framework agnostic
• minimal footprint
• optimised for SPA applications
• unintrusive as a dependency
• no own dependencies

Demo app available Demo app source code

---

Usage

No need to initialize separately. Import the 'broadcast' factory function and use to your hearts content.

START SUBSCRIPTION IN REACT

useEffect(() => {
  broadcast.on(['MYBROADCAST-ID', flagReceivedFunction])
  return () => broadcast.off(['MYBROADCAST-ID', flagReceivedFunction])
}, [flagReceivedFunction])

The return function is optional, BroadcasterJS is managing this anyway but React migth warn about memory leaks never the less.

START SUBSCRIPTION VANILLA JS

broacast.on([
  'MYBROADCAST-ID',
  ({ detail }) => {
    document.body.append(detail + ' ')
  },
])

broacast.once([
  'MYBROADCAST-ID',
  ({ detail }) => {
    document.body.append(detail + ' ')
  },
])

END SUBSCRIPTION

broacast.off([
  'MYBROADCAST-ID',
  ({ detail }) => {
    document.body.append(detail + ' ')
  },
])

PUBLISH IN REACT & VANILLLA JS

broadcast.emit('MYBROADCAST-ID', 'Hello world')

TO VISUALLY INSPECT

Click elements tab i chrome devtools, select event-listeners tab in second pane. Active listeners begin with 'broadcast-' + flag name. Expand each listener to see each unique subscriber.

TO DEBUG

Add ?debug=broadcasterjs to your url and open your devtools console.

ADVANCED

The broadcaster functions on,once,off takes an optional third value and emit takes an optional third argument in the form of a settings object.

{
  debug: boolean
  debugGlobal: boolean
  allowDoublettesSubscribers: boolean
}

Broadcasterjs does prevent doublettes with the same subscriber combination (flag + callback function). If you for some reason would want the same combination on another place in the code either just add a minor change, a comment etc or send in the settings object with allowDoublettesSubscribers set to true.