npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hamradio

v1.3.0

Published

A pubsub module that uses BroadcastChannel to communicate across browser tabs.

Downloads

6

Readme

hamradio

hamradio was designed based off the great ideas in many other pubsub modules. I would not have made it but I had one little requirement that I couldn't find elsewhere: I needed to publish events to other browser tabs. In hamradio, this is accomplished through BroadcastChannel which along with Promises and => are the only "dependencies" of the module.

hamradio provides the following flavors of pubsub:

  • asynchronous - hamradio does not execute subscribed functions synchronously. This has the advantage of not breaking code that publishes unexpectedly, but the disadvantage of losing track of call stacks to where the publishing event happened
  • subchannels - hamradio allows for breaking communications into subchannels and relaying any published events up the chain to parent channels. That means that listening on parent channels allows you to receive any events published on its subchannels.
  • multi-tab - the signature feature of hamradio is that it can communicate across browser contexts. Assuming both sets of code in each context use hamradio, events are sent and received between the hamradio instances seamlessly.

hamradio is intended to be used as an npm module.

Installing

npm install hamradio

Usage

A simple example follows:

import hamradio from 'hamradio'

const subscription = hamradio.subscribe(
  'ham/radio',
  (name, data) => console.log(name, data)
)

hamradio.publish('ham/radio', 'foo')
// expect to see "ham/radio foo" in the console

hamradio.publish('ham/radio/test', {bar: baz})
// expect to see "ham/radio/test {bar: baz}" in the console

hamradio.publish('ham', 'is a sweet meat')
// expect to see nothing in the console because no one's listening to the parent

subscription.unsubscribe()

hamradio.publish('ham/radio', 'again')
// expect to see nothing in the console because we unsubscribed

console.log('A word on timing')

A word on timing, hamradio runs the subscribed handlers asynchronously. In the example above, none of the console.log events would happen until after "A word on timing" had been logged. Ordering of which subscribed handlers execute first is arbitrary.

To help with synchronicity, the publish function returns a promise that will be accepted after all handler functions have completed. This promise only cares about the local context. It has no reference to when other hamradio or other handlers execute in other contexts. The promise will pass through any exceptions raised by the handler functions.

Channels and Handlers

Channels are interfaced with primarily by using a string name. When publishing and subscribing, the string name should be fully qualified with all parent channels represented. For example "ham/radio" represents the "radio" subchannel inside the "ham" channel. There is a small overhead for using deeply nested channels as parent channels are created as necessary on subscription or publishing.

When subscribing to a channel, a handler function must be provided. Handler functions receive two parameters when called, the name of the channel, and data published to the channel. The channel name is included to distinguish whether the data was published on the subscribed channel or one of its subchannels.

Publishing to a channel will trigger calls to the handlers of a particular channel as well as all of its parents.

Other Contexts

Because hamradio uses BroadcastChannel, other contexts do not need to use hamradio to intercept events published by hamradio. They can simply create a BroadcastChannel instance using the name of the channel and communicate with hamradio using the postMessage and onmessage protocols as usual.

hamradio is most useful when a pubsub model is needed AND there is a requirement to communicate with other browser contexts.