A API BroadcastChannel permite que scripts de mesma origem enviem mensagens para outros contextos de navegação. Ele pode ser considerado um barramento de mensagens simples que permite semânticas do Pub/Sub entre janelas/guias, iframes, web workers e service workers.
Princípios básicos da API
A API Broadcast Channel é uma API simples que facilita a comunicação entre contextos de navegação. Ou seja, a comunicação entre janelas/guias, iframes, web workers e service workers. As mensagens postadas em um determinado canal são entregues a todos os ouvintes do canal.
O construtor BroadcastChannel
usa um único parâmetro: o nome de um canal.
O nome identifica o canal e aparece em todos os contextos de navegação.
// Connect to the channel named "my_bus".
const channel = new BroadcastChannel('my_bus');
// Send a message on "my_bus".
channel.postMessage('This is a test message.');
// Listen for messages on "my_bus".
channel.onmessage = function(e) {
console.log('Received', e.data);
};
// Close the channel when you're done.
channel.close();
Como enviar mensagens
As mensagens podem ser strings ou qualquer item suportado pelo algoritmo de clonagem estruturada (strings, objetos, matrizes, blobs, ArrayBuffer, Map).
Exemplo: como enviar um Blob ou File
channel.postMessage(new Blob(['foo', 'bar'], {type: 'plain/text'}));
Um canal não transmite para si mesmo. Portanto, se você tiver um listener onmessage
na mesma página que um postMessage()
para o mesmo canal, esse evento message
não disparar.
Diferenças em relação a outras técnicas
Você pode estar se perguntando como isso se relaciona com outras técnicas de transmissão de mensagens, como WebSockets, SharedWorkers, a API MessageChannel
e window.postMessage()
. A API Broadcast Channel não substitui essas APIs. Cada um serve a um propósito. A API Broadcast Channel serve para facilitar a comunicação de um para muitos entre scripts na mesma origem.
Alguns casos de uso para canais de transmissão:
- Detectar ações de usuários em outras guias
- Saiba quando um usuário faz login em uma conta em outra janela/guia.
- Instruir um worker a realizar trabalhos em segundo plano
- Saiba quando um serviço terminar de executar alguma ação.
- Quando o usuário carregar uma foto em uma janela, passe-a para outras páginas abertas.
Exemplo: página que sabe quando o usuário sai, mesmo de outra guia aberta no mesmo site:
<button id="logout">Logout</button>
<script>
function doLogout() {
// update the UI login state for this page.
}
const authChannel = new BroadcastChannel('auth');
const button = document.querySelector('#logout');
button.addEventListener('click', e => {
// A channel won't broadcast to itself so we invoke doLogout()
// manually on this page.
doLogout();
authChannel.postMessage({cmd: 'logout', user: 'Eric Bidelman'});
});
authChannel.onmessage = function(e) {
if (e.data.cmd === 'logout') {
doLogout();
}
};
</script>
Em outro exemplo, digamos que você queira instruir um service worker a remover
conteúdo armazenado em cache após o usuário alterar a "configuração do armazenamento off-line" no seu app.
É possível excluir os caches usando window.caches
, mas o service worker pode
já contêm um utilitário para fazer isso. Podemos usar a API Broadcast Channel para
reutilizar o código. Sem a API Broadcast Channel, você teria que repetir os resultados de self.clients.matchAll()
e chamar postMessage()
em cada cliente para conseguir a comunicação de um service worker para todos os seus clientes (código real que faz isso). Usar um canal de transmissão torna este O(1)
em vez de O(N)
.
Exemplo: instrua um service worker a remover um cache reutilizando métodos utilitários internos.
Em index.html
const channel = new BroadcastChannel('app-channel');
channel.onmessage = function(e) {
if (e.data.action === 'clearcache') {
console.log('Cache removed:', e.data.removed);
}
};
const messageChannel = new MessageChannel();
// Send the service worker a message to clear the cache.
// We can't use a BroadcastChannel for this because the
// service worker may need to be woken up. MessageChannels do that.
navigator.serviceWorker.controller.postMessage({
action: 'clearcache',
cacheName: 'v1-cache'
}, [messageChannel.port2]);
Em sw.js
function nukeCache(cacheName) {
return caches.delete(cacheName).then(removed => {
// ...do more stuff (internal) to this service worker...
return removed;
});
}
self.onmessage = function(e) {
const action = e.data.action;
const cacheName = e.data.cacheName;
if (action === 'clearcache') {
nukeCache(cacheName).then(removed => {
// Send the main page a response via the BroadcastChannel API.
// We could also use e.ports[0].postMessage(), but the benefit
// of responding with the BroadcastChannel API is that other
// subscribers may be listening.
const channel = new BroadcastChannel('app-channel');
channel.postMessage({action, removed});
});
}
};
Diferença com postMessage()
Ao contrário de postMessage()
, não é mais necessário manter uma referência a um iframe ou worker para se comunicar com ele:
// Don't have to save references to window objects.
const popup = window.open('https://another-origin.com', ...);
popup.postMessage('Sup popup!', 'https://another-origin.com');
O window.postMessage()
também permite a comunicação entre origens. A API Broadcast Channel tem a mesma origem. Como as mensagens têm a mesma origem, não é necessário validá-las como fazíamos com o window.postMessage()
:
// Don't have to validate the origin of a message.
const iframe = document.querySelector('iframe');
iframe.contentWindow.onmessage = function(e) {
if (e.origin !== 'https://expected-origin.com') {
return;
}
e.source.postMessage('Ack!', e.origin);
};
Basta "inscrever-se" para determinado canal e ter comunicação bidirecional segura.
Diferença com SharedWorkers
Use BroadcastChannel
em casos simples em que você precisa enviar uma mensagem para várias janelas/guias ou workers.
Para casos de uso mais elaborados, como gerenciamento de bloqueios, estado compartilhado, sincronização de recursos entre um servidor e vários clientes ou compartilhamento de uma conexão WebSocket com um host remoto, os workers compartilhados são a solução mais apropriada.
Diferença com a API MessageChannel
A principal diferença entre a API Channel Messaging e a BroadcastChannel
é que esta é uma forma de enviar mensagens para vários listeners (um para muitos). O MessageChannel
se destina à comunicação um para um diretamente entre os scripts. Esse processo também é mais complexo, exigindo que você configure canais com uma porta em cada extremidade.
Detecção de recursos e compatibilidade com navegadores
Atualmente, Chrome 54, Firefox 38 e Opera 41 são compatíveis com a API Broadcast Channel.
if ('BroadcastChannel' in self) {
// BroadcastChannel API supported!
}
Existem alguns tipos de polyfills:
- https://gist.github.com/alexis89x/041a8e20a9193f3c47fb
- https://gist.github.com/inexorabletash/52f437d1451d12145264
Não testei isso, então sua quilometragem pode variar.