Skip to main content

Command Palette

Search for a command to run...

Learn Pub-Sub with ChatGPT

Updated
2 min read
Learn Pub-Sub with ChatGPT
T

JS Enthusiast

Publish-Subscribe (Pub/Sub) is a design pattern where objects (subscribers) subscribe to an event or topic and get notified when that event or topic occurs (published) by a publisher. Here's a simple implementation of Pub/Sub in JavaScript:

// PubSub object to manage subscriptions and notifications
var PubSub = (function() {
    var topics = {};

    return {
        // Subscribe to a topic
        subscribe: function(topic, listener) {
            // Create the topic if it's not yet created
            if (!topics[topic]) {
                topics[topic] = [];
            }
            // Add the listener to the topic
            topics[topic].push(listener);
        },

        // Publish a message to a topic
        publish: function(topic, data) {
            // If the topic doesn't exist, or there's no listeners in it, just return
            if (!topics[topic] || topics[topic].length === 0) {
                return;
            }
            // Invoke all the listeners in the topic
            topics[topic].forEach(function(listener) {
                listener(data !== undefined ? data : {});
            });
        },

        // Remove a listener from a topic
        unsubscribe: function(topic, listener) {
            if (!topics[topic]) return;
            var index = topics[topic].indexOf(listener);
            if (index !== -1) {
                topics[topic].splice(index, 1);
            }
        }
    };
})();

// Example usage
function onMessageReceived(data) {
    console.log('Message received:', data);
}

PubSub.subscribe('message', onMessageReceived);
PubSub.publish('message', { text: 'Hello, world!' });

// Unsubscribe
PubSub.unsubscribe('message', onMessageReceived);

In this implementation:

  • The PubSub object manages topics and listeners.

  • subscribe(topic, listener) is used to subscribe a listener to a topic.

  • publish(topic, data) is used to publish a message to a topic. All listeners subscribed to that topic will be notified.

  • unsubscribe(topic, listener) is used to remove a listener from a topic.

You can use this Pub/Sub implementation to decouple components in your application, allowing them to communicate without having direct references to each other.

More from this blog

Tushar Khanna's Blog

18 posts