Entendendo o Pub/Sub com Javascript
Tags: javascript, pubsub, patterns, braziliandevs
Published: 2024-02-16 23:29:15

---
title: Entendendo o Pub/Sub com Javascript
published: true
description: Uma breve explicação do conceito Pub/Sub utilizando nosso querido Javascript.
tags: javascript, pubsub, patterns, braziliandevs
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-02-16 22:41 +0000
---

## 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:

```js
// 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.

```js
/**
  * 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.

```js
/**
  * 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.

```js
/**
  * 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:

```js
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__.