In the previous section, I talked about Factory Pattern , a pattern that helps us easily create objects while abstracting their implementation details. In this article, we will become familiar with a behavioral pattern: Publisher / Subscriber pattern.
Publisher / Subscriber pattern , or shorter name ” PubSub ” is a pattern that helps us create modules that can communicate with other modules but do not need them to be interdependent. It is a great pattern for decoupling application components and is fairly common in JavaScript.
One note – Use this model wisely because it is vulnerable to abuse. A number of coupling is required to read and maintain the code. One of the most common mistakes made by less experienced people is the decoupling problem, which can be great when you start coding but the bigger the source, the more modules it will make reading and maintaining the code very difficult.
Let’s try an example using PubSub .
First create a pubsub folder and create a pubsub.js file with the following code:
1 2 3 4 5 6 7 8 9 10 | let subscribers = {}; module.exports = { publish() { // method to publish an update }, subscribe() { // method to subscribe to an update } }; |
We then call subscribers to keep registering the subscriber callbacks. In this object, we will store events using key / value pairs. Each event will have a key corresponding to the name of the event and a value is an array. In this array, we will register / store subscriber callbacks. These callbacks are called when events receive a trigger.
Next, the pubsub module has 2 functions. One is ‘publish’ to call an update and one is ‘subscribe’ to subscribe for an update.
This is the main framework of a publisher / subscriber module.
Focus on the subscribe function first, this function will help us register a subscriber callback. It accepts 2 parameters. The first is that the event name is subscribed and the callback is called when the event is triggered.
This is the subscribe function
1 2 3 4 5 6 7 | subscribe(event, callback) { if (!subscribers[event]) { subscribers[event] = []; } subscribers[event].push(callback); } |
Next to the publish function:
1 2 3 4 5 6 | publish(event, data) { if (!subscribers[event]) return; subscribers[event].forEach(subscriberCallback => subscriberCallback(data)); } |
First, we check if there are any subscribers who have registered for the event. If not, we will return from the publish function and no subscribers will be called. If there is a subscriber, we call all callback functions of that subscriber. We can pass any data that can be provided to each callbacks function.
Now we continue to create other modules to apply the newly created pubsub application. Add 2 files called moduleA.js and moduleB.js
In this example, moduleA will be the publisher and moduleB will be the subscriber. As we can see, both modules have no relation to the other module and they only communicate with each other via the pubsub module.
moduleA.js:
1 2 3 4 5 6 7 8 9 10 11 | const pubSub = require("./pubsub"); module.exports = { publishEvent() { const data = { msg: "TOP SECRET DATA" }; pubSub.publish("anEvent", data); } }; |
Here we require pubSub module and export an object with a publishEvent function. This function takes a data parameter and calls the pubSub’s publish function to pass the event name and data parameter.
moduleB.js:
1 2 3 4 5 6 7 | const pubSub = require("./pubsub"); pubSub.subscribe("anEvent", data => { console.log( `"anEvent", was published with this data: "${data.msg}"` ); }); |
Subscriber code is more concise. Here we also require the pubSub module and call subscribe to register an event. We pass the event name and a callback function to handle that event.
Now for the lightest part, connecting it all together so we have a basic look at which pubSub. Create an index.js file
1 2 3 4 5 6 | const moduleA = require("./moduleA"); const moduleB = require("./moduleB"); // We use moduleA's publishEvent() method moduleA.publishEvent(); moduleA.publishEvent(); |
compile and run the newly created index.js file
1 2 | $ node ./pubsub/index.js |
We will see the console screen print as follows:
1 2 3 | "anEvent", was published with this data: "TOP SECRET DATA" "anEvent", was published with this data: "TOP SECRET DATA" |
We already know what a pubSub is basically. Now, let’s edit pubsub.js a little bit.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | subscribe(event, callback) { let index; if (!subscribers[event]) { subscribers[event] = []; } index = subscribers[event].push(callback) - 1; return { unsubscribe() { subscribers[event].splice(index, 1); } }; } |
We add a new variable called index and this index variable is assigned by the index of the newly added subscriber. We then return an object that contains the unsubscribe function, which is used to remove events from subscribers.
We use the unsubscribe function in the subscriber in moduleB.js as follows
1 2 3 4 5 6 7 8 9 | const pubSub = require("./pubsub"); let subscription; subscription = pubSub.subscribe("anEvent", data => { console.log( `"anEvent", was published with this data: "${data.msg}"` ); subscription.unsubscribe(); }); |
If we try to run index.js again, the console screen will show only one console.log once we have unsubscribe it after being activated for the first time.
And all of the above is about Publisher / Subscriber pattern .
As we have seen, the Publisher / Subscriber pattern makes it easy to separate modules and remove dependencies between them. However, as noted above, we must be careful not to overdo it because it can lead to obscure code that is difficult to maintain later.