O padrão Pub/Sub
O padrão Publisher/Subscriber, também conhecido como Pub/Sub, é um conceito que basicamente permite que você anuncie eventos e quem estiver interessado neste determinado evento se inscreva para receber novidades sobre ele.
Analogia simples
Imagine que você está organizando uma festa e que diferentes grupos de amigos querem saber sobre os tipos de música que serão tocadas. Quando a banda decide tocar um novo estilo de música, todos os amigos interessados naquele estilo são informados para que possam dançar e se divertir.
Onde a festa é o sistema de Pub/Sub, os grupos de amigos são os subscribers e a banda o publisher.
Destrinchando no código
Para entender melhor como isso funcionaria, veja o código de como o sistema de Pub/Sub pode ser implementado com Javascript:
// pub-sub.js
class PubSub {
constructor() {
this.subscribers = {};
}
// Inscrever para ouvir um tipo de música
subscribe(eventType, callback) {
if (!this.subscribers[eventType]) {
this.subscribers[eventType] = [];
}
this.subscribers[eventType].push(callback);
}
// Publicar uma nova música, informando todos os interessados
publish(eventType, data) {
if (!this.subscribers[eventType]) return;
this.subscribers[eventType].forEach(callback => callback(data));
}
// Cancelar a inscrição de um tipo específico de música
unsubscribe(eventType, callback) {
if (!this.subscribers[eventType]) return;
const callbackIndex = this.subscribers[eventType].indexOf(callback);
if (callbackIndex > -1) {
this.subscribers[eventType].splice(callbackIndex, 1);
}
}
}
export { PubSub }
Agora vamos detalhar cada método da nossa classe PubSub passo a passo:
Método subscribe
O método subscribe permite que um "amigo" informe seu interesse em um tipo específico de "música" (evento). Assim que essa "música" tocar, o "amigo" será notificado.
/**
* eventType: O tipo de evento (ou "música") que o "amigo" quer ouvir.
* callback: A ação que o "amigo" quer executar quando a "música" tocar.
*/
subscribe(eventType, callback) {
if (!this.subscribers[eventType]) {
this.subscribers[eventType] = [];
}
this.subscribers[eventType].push(callback);
}
Como funciona? Primeiro, verifica se já existe uma lista de callbacks para o tipo de evento específico (eventType). Se não, cria uma nova lista vazia. Depois, adiciona o callback fornecido à lista de callbacks para aquele tipo de evento.
Método publish
O método publish atua como a "banda" informando que uma nova "música" está sendo tocada. Todos os "amigos" interessados naquela "música" são notificados.
/**
* eventType: O tipo de "música" (evento) que está sendo tocada.
* data: Informações sobre a "música" (evento), como o nome da música, por exemplo.
*/
publish(eventType, data) {
if (!this.subscribers[eventType]) return;
this.subscribers[eventType].forEach(callback => callback(data));
}
Como funciona? Verifica se existem "amigos" inscritos para aquele tipo de evento. Se não, nada acontece. Se existirem, executa todos os callbacks associados a esse tipo de evento, passando a data como argumento.
Método unsubscribe
O método unsubscribe permite que um "amigo" cancele seu interesse em um tipo específico de "música" (evento). Ele não será mais notificado quando a "música" tocar.
/**
* eventType: O tipo de "música" (evento) do qual o "amigo" não quer mais ser notificado.
* callback: A ação específica que o "amigo" não quer mais executar quando a "música" tocar.
*/
unsubscribe(eventType, callback) {
if (!this.subscribers[eventType]) return;
const callbackIndex = this.subscribers[eventType].indexOf(callback);
if (callbackIndex > -1) {
this.subscribers[eventType].splice(callbackIndex, 1);
}
}
Como funciona? Verifica se existem "amigos" inscritos para aquele tipo de evento. Se não, nada é feito. Se o callback existir na lista, ele é removido. Isso é feito encontrando o índice do callback na lista e, se encontrado, removendo-o da lista.
Resumo
Então podemos dizer que o subscribe é como se você dissesse à organizadora da festa: "Me avise quando tocarem rock, por favor" e então você será avisado quando a banda tocar Rock. Já o publish é como se a banda dissesse à organizadora da festa: "Hey, vamos tocar rock agora" e a organizadora avisasse a todos os interessados. E o unsubscribe como se você dissesse à organizadora: "Não preciso mais saber quando tocarem rock".
Uso do Pub/Sub
Podemos dizer que neste caso a classe Pub/Sub é a organizadora da festa. Ela mantém uma lista de quais amigos (subscribers) estão interessados em cada tipo de música (eventType). Quando a banda (publish) decide tocar uma nova música (eventType), todos os amigos interessados naquela música são notificados (callback) com os detalhes (a música que está tocando).
Veja o exemplo abaixo para ajudar a entender melhor a ideia:
import { PubSub } from "./pub-sub.js"
// Uso da biblioteca Pub/Sub
const party = new PubSub();
// Amigo se inscrevendo para ouvir Rock
party.subscribe("rock", data => console.log(`Está tocando Rock: ${data}`));
// Amigo se inscrevendo para ouvir Pop
party.subscribe("pop", data => console.log(`Está tocando Pop: ${data}`));
// A banda decide tocar uma música Rock
party.publish("rock", "Sweet Child O' Mine");
// A banda decide tocar uma música Pop
party.publish("pop", "Cool for the Summer");
Os amigos(subscribers) dizem à organizadora em quais tipos de música estão interessados. A banda(publish) avisa à organizadora que vai tocar um novo tipo de música, e a organizadora informa aos amigos interessados. Um amigo decide que não quer mais ser notificado(unsubscribe) sobre um tipo de música para não receber mais notificações.
Com esse sistema, a comunicação entre a banda e os amigos é feita de forma organizada e eficiente, sem que a banda saiba diretamente quem está interessado em sua música, assim como numa festa de verdade.
Conclusão
O padrão Pub/Sub pode ser incrivelmente útil no frontend para vários cenários, especialmente aqueles que exigem comunicação entre componentes, módulos ou até mesmo microfrontends de forma desacoplada e eficiente.
O padrão Pub/Sub ajuda a manter a aplicação escalável, manutenível e fácil de expandir, pois novos publishers ou subscribers podem ser adicionados sem necessidade de reconfigurar ou alterar o código existente significativamente.
Espero que essa explicação ajude a entender melhor o funcionamento e a utilidade do Pub/Sub.
Top comments (0)