Skip to main content

Broadcast Channel API | Javascript

  • Broadcast Channel API | Javascript

Broadcast Channel API

A Broadcast Channel API é uma interface da Web que permite a comunicação entre diferentes contextos de navegação (abas, janelas, iframes ou workers) dentro do mesmo navegador e origem. Essa API facilita o compartilhamento de mensagens entre esses contextos sem a necessidade de backend ou armazenamento intermediário.

Como Funciona​

A API funciona criando um canal de transmissão que pode ser acessado por qualquer script dentro da mesma origem (mesmo domínio, protocolo e porta). Quando uma mensagem é enviada para esse canal, todos os ouvintes registrados recebem essa mensagem simultaneamente.

Criando e Usando um Canal​

Criando um Canal​

Para criar um canal de transmissão, basta instanciar a classe BroadcastChannel e dar um nome ao canal:

const channel = new BroadcastChannel('meu_canal');

Enviando Mensagens​

Para enviar mensagens para todos os ouvintes conectados ao canal, use o método postMessage:

channel.postMessage({ tipo: 'atualização', conteudo: 'Nova notificação!' });

Recebendo Mensagens​

Cada instância do canal pode escutar mensagens com o evento onmessage:

channel.onmessage = (event) => {
    console.log('Mensagem recebida:', event.data);
};

Fechando o Canal​

Quando um canal não for mais necessário, ele pode ser fechado para liberar recursos:

channel.close();

Exemplo Completo​

Aqui está um exemplo completo de como duas abas/janelas podem se comunicar usando a Broadcast Channel API:

Em uma aba:​

const canal = new BroadcastChannel('chat');
canal.onmessage = (event) => {
    console.log('Mensagem recebida na primeira aba:', event.data);
};

Em outra aba:​

const canal = new BroadcastChannel('chat');
canal.postMessage('Olá, outra aba!');

Sempre que uma mensagem for enviada em qualquer uma das abas conectadas ao canal "chat", a outra receberá automaticamente a mensagem.

Casos de Uso​

A Broadcast Channel API é útil para diversos cenários, incluindo:

  • Sincronização de estado: manter várias instâncias da aplicação sincronizadas.
  • Compartilhamento de informação: distribuir mensagens ou notificações entre abas.
  • Comunicação entre Workers e Páginas: conectar Web Workers com a interface do usuário sem recorrer ao postMessage entre contextos diferentes.

Considerações​

  • A API só funciona dentro da mesma origem.
  • Se o usuário atualizar a página, a conexão será perdida e precisará ser restabelecida.
  • Alternativas incluem WebSockets, Local Storage com eventos de storage, e postMessage para comunicação entre iframe e window.

Conclusão​

A Broadcast Channel API é uma solução eficiente para comunicar diferentes contextos dentro da mesma origem, tornando mais fácil sincronizar informações sem depender de servidores ou armazenamento local. Seu uso é simples, eficaz e pode ser uma alternativa poderosa para melhorar a experiência do usuário em aplicações web modernas.