JavaScript-based PubSub Hub

All Source Code can be found in my GitHub repo and a sample can be found on-line courtesy of CodePen.


This article describes the process, design rationale and final product resulting from my attempt to develop as simple a Publish and Subscribe (PubSub) capability possible using JavaScript.

The PubSub pattern (my understanding so please correct me if I am wrong) is a mechanism by which information can be centralised and re-distributed, to interested parties, data grouped by topic.

Data producers collect data, create a topic (if it does not already exist), and submit data to the topic, courtesy of a central Hub manager.

Data consumers register their interest in data of a specific (subscribe to a) topic. When new data is submitted to the Hub for a topic, it is distributed to all registered consumers to do with as they wish.

The source code has no dependencies on server- or client-side facilities so can be employed equally well either side (node.js or in browser), although it has only ever been testing in a web browser and on CodePen.

PubSubHub – my implementation

My GitHub repo contains 3 source code files;

  • PubSubHubUI.html: GUI-based harness, also provided in CodePen, to demonstrate the basic capability
  • PubSubHub.html: Text-bases test harness used to exercise the full range of capability
  • PubSubHub.js: The code library containing the PubSubHub object. It is this file that needs to be referenced in your project.

The PubSubHub object is created at start-up using an immediately-invoked function expression (iife) that uses a closure to return references to three methods, as a form of API. This approach enables the implementation, and any maintained data, to be kept (relatively) private.

The three methods include:

  • subscribe: registers a data consumer’s interest in one or more topics
  • unsubscribe: enables the specified consumer to end their registration for data from one or more topics
  • publish: This method serves potentially two purposes, to avoid potential sequencing issues.
    • The given topic is created if it does not already exist
    • Any supplied data, of the stated topic, is submitted for re-distribution by the Hub to all registered subscribers.

Within the Hub itself the topics are stored as a object with the name of the topic used as a key to a record. The topic record comprises of a single data field (see limitation 1 below) and an object containing a list of subscribers. The subscriber’s list is keyed on a subscriber Id, which could be a name, number, anything as long as it is a legal property name and unique.

When subscribing, a topic’s subscribers list entry will be a callback function, provided by the consumer, through which data will be distributed. When subscribing to an extant topic the callback will be used to return any currently held data.

Update: 6th January 2016

  1. Improvement in the exception handling.
  2. Parameter data type checks.
  3. Revoked the Subscriber’s ability to create new Topics.

Limitations and Observations

  1. The Hub can only retain a single data set although it would be possible to enhance the capability to retain some history. [C]
  2. Another potential enhancement is the support for data caching between pages (using sessionStorage) and/or between browser sessions (using localStorage). [C]
  3. Although this code should operate just as well server-side as client-side, it does not support cross-http boundary operation. It is designed with the expectation that all data consumers and producers are within the same application page (SPA – Single Page Application). That said, there should be no reason this could not be enhanced along these lines. [W]

Future editions of PubSubHub will address some of the above issues in MoSCoW priority order [as indicated].

All Source Code can be found in my GitHub repo and a sample can be found on-line courtesy of CodePen.

The source code is self-contained, requires no additional frameworks or libraries and adopts as near a Vanilla JS approach as possible. The code has not been extensively tested but is made available under the same terms as this site (CC-BY-NC-SA) should you feel inclined to use it in your project.

The source code is offered without warranty or support, but should you consider using this my source code (or a variation), please notify me and I will be pleased to provide any assistance I can.