DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Building a Simple PubSub System in JavaScript

Building a Simple PubSub System in JavaScript

Ever wanted to build a pub-sub system in JavaScript? Sure you have! In this post, we take a look at how to build a simple one, complete with code. Read on to find out more.

Paul Kinlan user avatar by
Paul Kinlan
·
Dec. 12, 16 · Web Dev Zone · Tutorial
Like (7)
Save
Tweet
11.74K Views

Join the DZone community and get the full member experience.

Join For Free

In a recent project building a web push service I wanted to have my UI respond to application level events (semantically if you will) because there were a couple of components that require information from the system but are not dependent with each other and I wanted them to be able to manage themselves independently of the ‘business logic’.

I looked around at lots of different tools to help me, but because I frequently have a heavy case of NIH syndrome and the fact that I think people can implement their own infrastructural elements pretty quickly, I decided to quickly knock-up a simple client-side PubSub service — it worked pretty well for my needs.

I debated whether I should use a custom DOM Event and use the existing infrastructure that the DOM already provides to developers — the ability to events and consuming events using addEventListener — but the only problem was that you have to hang the event handler off a DOM Element or the window because you can’t have a model that inherits or mixes in EventTarget.

Thought: Having EventTarget as an object would help obviate the need for creating custom PubSub systems.

With this constraint in mind, a will to code something up, and a propensity for not minding bugs that I create myself, I sketched out a rough plan:

/* When a user is added, do something useful (like update UI) */
EventManager.subscribe('useradded', function(user) {
  console.log(user)
});

/* The UI submits the data, lets publish the event. */
form.onsubmit(function(e) {
  e.preventDefault();

  // do something with user fields

  EventManager.publish('useradded', user);
})

All of this isn’t new. Redux and many other systems already do this and in many cases, they also help you manage state. In my head, I don’t really have state that needs a model that is septate to the state already in the browser.

The implementation is pretty simple to implement and the abstraction is quite useful for me at least.

var EventManager = new (function() {
  var events = {};

  this.publish = function(name, data) {
    return new Promise(function(resolve, reject) {
      var handlers = events[name];
      if(!!handlers === false) return;
      handlers.forEach(function(handler) {
        handler.call(this, data);
      });
      resolve();
    });
  };

  this.subscribe = function(name, handler) {
    var handlers = events[name];
    if(!!handlers === false) {
      handlers = events[name] = [];
    }
    handlers.push(handler);
  };

  this.unsubscribe = function(name, handler) {
    var handlers = events[name];
    if(!!handlers === false) return;

    var handlerIdx = handlers.indexOf(handler);
    handlers.splice(handlerIdx);
  };
});

And there we are — a simple pubsub system that is likely full of bugs, but I like it. :) I’ve put it on GitHub if you are intersted in it.

JavaScript

Published at DZone with permission of Paul Kinlan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Understand Source Code — Deep Into the Codebase, Locally and in Production
  • Applying Domain-Driven Design Principles to Microservice Architectures
  • Major PostgreSQL Features You Should Know About
  • Exhaustive JUNIT5 Testing with Combinations, Permutations, and Products

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo