DZone
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
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • How Node.js Works Behind the Scenes (HTTP, Libuv, and Event Emitters)
  • How to Create a Custom React Component in Vaadin Flow
  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • The Cypress Edge: Next-Level Testing Strategies for React Developers

Trending

  • Multi-Cluster Networking With Kubernetes and Docker: Connecting Your Containerized Environment
  • AI-Native Platforms: The Unstoppable Alliance of GenAI and Platform Engineering
  • Java Enterprise Matters: Why It All Comes Back to Jakarta EE
  • Master SQL Performance Optimization: Step-by-Step Techniques With Case Studies
  1. DZone
  2. Coding
  3. JavaScript
  4. 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.

By 
Paul Kinlan user avatar
Paul Kinlan
·
Dec. 12, 16 · Tutorial
Likes (7)
Comment
Save
Tweet
Share
13.0K 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.

Related

  • How Node.js Works Behind the Scenes (HTTP, Libuv, and Event Emitters)
  • How to Create a Custom React Component in Vaadin Flow
  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • The Cypress Edge: Next-Level Testing Strategies for React Developers

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

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

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: