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.