Entendendo o Pub/Sub com Javascript

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.