Em navegadores modernos a API Broadcast Channel permite a comunicação bidirecional entre contextos de navegação em uma mesma origem. Dois contextos de navegação são considerados tendo a mesma origem se e somente quando o esquema, host, e porta coincidirem.
A API pode ser usada para detectar ações do usuário em outras guias dentro de uma mesma origem.
O construtor BroadcastChannel
cria um novo objeto BroadcastChannel
e o conecta ao canal subjacente.
Como parâmetro do constructor é passado uma string representando o nome do canal onde existirá um único canal com este nome para todos os contextos de navegação com a mesma origem.
Ao criar um canal de comunicação, através objeto BroadcastChannel
:
Importante:
O exemplo abaixo não pode ser reproduzido usando Stack Snippets pois o
site bloqueia terminantemente a abertura de janelas secundárias. Um
exemplo funcional está disponível no Repl.it onde será necessário
para o teste do exemplo a permissão de abertura de popups pelo navegador.
O exemplo é simples, são duas páginas de HTML a index.html
e página2.html
.
É carregada a página principal index.html
e essa inicia abrindo um canal de comunicação chamado Canal1
.
Em uma nova guia á aberta a página2.html
.
A página index.html
registra dois eventos click
cujo ao serem disparados enviam uma mensagem através do Canal1
identificando qual o botão foi pressionado.
A página página2.html
se inscreve no Canal1
e regista um evento BroadcastChannel.onmessage
que fica escutado Canal1
e informa qual o botão de index.html
foi pressionado.
index.html
const bc = new BroadcastChannel('Canal1'); //Cria um canal de comunicação chamado 'Canal1'.
window.open("pagina2.html", '_blank').focus(); //Abre uma nova guia.
//Registra um evento click para o botão cujo o id é "btn1"...
document.getElementById("btn1")
.addEventListener("click", () => {
bc.postMessage("Botão 1 clicado."); //...Envia uma mensagem através do canal de comunicação.
});
//Registra um evento click para o botão cujo o id é "btn2"...
document.getElementById("btn2")
.addEventListener("click", () => {
bc.postMessage("Botão 2 clicado."); //...Envia uma mensagem através do canal de comunicação.
});
<button id="btn1">Botão B1</button>
<button id="btn2">Botão B2</button>
página2.html
const bc = new BroadcastChannel('Canal1'); //Se inscreve no canal de comunicação 'Canal1'.
//Registra uma escuta de evento...
bc.onmessage = (e) => {
document.body.innerHTML += `<p>${e.data}</p>`; //Atualiza o texto da página com a mensagem recebida.
}
Botões pressionados: