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();

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF