Publisher–Subscriber Pattern in JavaScript (Simple Implementation)

Bobby Sadhwani — Thu, 25 Dec 2025 08:23:58 +0000

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.

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 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 functions
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.