JavaScript Publish/Subscribe Pattern Example

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

In this article, I show you how to create and use public/subscribe pattern in Javascript.

The Publisher/Subscriber pattern, or “PubSub” for short, is a pattern that allows us to create modules that can communicate with each other without depending directly on each other. It’s a great pattern for decoupling our application and is quite common in JavaScript.

For the best learning experience, I highly recommended that you open a console (which, in Chrome and Firefox, can be done by pressing Ctrl+Shift+I), navigate to the "console" tab, copy-and-paste each JavaScript code example from this article, and run it by pressing the Enter/Return key.

Let's first write a code to design the Publish/Subscribe Pattern.

Publish/Subscribe Pattern Implementation

var events = { events: {}, subscribe: function (eventName, fn) { this.events[eventName] = this.events[eventName] || []; this.events[eventName].push(fn); }, unsubscribe: function (eventName, fn) { if (this.events[eventName]) { for (var i = 0; i < this.events[eventName].length; i++) { if (this.events[eventName][i] === fn) { this.events[eventName].splice(i, 1); break; } }; } }, publish: function (eventName, data) { if (this.events[eventName]) { this.events[eventName].forEach(function (fn) { fn(data); }); } } }

Usage

Here, multiple subscribers are subscribing to a single event named as "event1".

function test(){ events.subscribe("event1", function(data){ console.log("subscriber1 subscribe to event1 -> " + data); }); events.subscribe("event1", function(data){ console.log("subscriber2 subscribe to event1 -> " + data); }); events.subscribe("event1", function(data){ console.log("subscriber3 subscribe to event1 -> " + data); }); events.subscribe("event1", function(data){ console.log("subscriber4 subscribe to event1 -> " + data); }); // publish some data to all subscribers whose were registered to event1 events.publish("event1", "some data"); } test();

Output

subscriber1 subscribe to event1 -> some data subscriber2 subscribe to event1 -> some data subscriber3 subscribe to event1 -> some data subscriber4 subscribe to event1 -> some data

Using JavaScript class Keyword (after es2015)

Let's demonstrate the Pub/Sub pattern using JavaScript class keyword:

class Event{ constructor(){ this.events = {}; } subscribe(eventName, fn) { this.events[eventName] = this.events[eventName] || []; this.events[eventName].push(fn); } unsubscribe(eventName, fn) { if (this.events[eventName]) { for (var i = 0; i < this.events[eventName].length; i++) { if (this.events[eventName][i] === fn) { this.events[eventName].splice(i, 1); break; } }; } } publish(eventName, data) { if (this.events[eventName]) { this.events[eventName].forEach(function(fn) { fn(data); }); } } } function test1(){ var event = new Event(); event.subscribe("event1", function(data){ console.log("subscriber1 subscribe to event1 -> " + data); }); event.subscribe("event1", function(data){ console.log("subscriber2 subscribe to event1 -> " + data); }); event.subscribe("event1", function(data){ console.log("subscriber3 subscribe to event1 -> " + data); }); event.subscribe("event1", function(data){ console.log("subscriber4 subscribe to event1 -> " + data); }); // publish some data to all subscribers whose were registered to event1 event.publish("event1", "some data"); } test1();