Publisher–Subscriber Pattern in JavaScript (Simple Implementation)

The Publisher–Subscriber (Pub-Sub) pattern is a messaging pattern where senders (publishers) do not directly communicate with receivers (subscribers). Instead, subscribers register their interest, and the publisher notifies them when something happens.

Below is a clean, minimal JavaScript implementation using classes.

---

Core Idea

We need two main components:

1. Publisher (Host)

The entity that maintains a list of subscribers and notifies them of events.

Responsibilities:

• subscribe(observer) → Add a new subscriber to the list.

• unsubscribe(observer) → Remove a subscriber from the list.

• fire() → Call all subscribed functions, optionally forcing what this should be inside those functions, and pass them some data.

2. Subscriber (Observer)

The entities that want to be notified when certain events occur.

Implementation

class Host {
  constructor() {
    this.observers = [];
  }

  // subscribe an observer
  subscribe(observer) {
    this.observers.push(observer);
  }

  // unsubscribe an observer. observer is a function so its reference is used to identify it
  unsunscribe(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  // fire an event to all observers
  // call is method is used to set the scope of the observer function call
  // In browser scope would be window, in Node.js it would be global
  fire(scope, data) {
    const context = scope || global;
    this.observers.forEach((obs) => obs.call(context, data));
  }
}

// Host / Publisher instance
const host = new Host();

// Observer / Subscriber function
function subscriberOne(data){
    console.log("Subscriber One received data:", data);
}

function subscriberTwo(data){
    console.log("Subscriber Two received data:", data);
}

// Subscribe observers to the host
host.subscribe(subscriberOne)
host.subscribe(subscriberTwo)

// fire event to all subscribers
host.fire(null, "Your first message");

// unsubscribe subscriberOne
host.unsunscribe(subscriberOne);

Final Words

And that’s it for this blog.

I hope you’ve found this blog a good referencing resource and thank you for reading.

If this blog was helpful, please do like, comment and share. Thanks, see you in the next blog.✌️