Para enviar mensagens entre contextos de navegação, como o windows, guias, frame ou iframe dentro de uma mesma origem, podemos usar a Transmite a API do canal.

neste artigo, vamos ver como usá-lo para enviar e receber mensagens.

para usar a API, temos que criar um objeto BroadcastChannel que está ouvindo o canal subjacente.

então somos capazes de receber quaisquer mensagens que tenham sido postadas para ele. Não temos de manter uma referência às iframes ou aos trabalhadores com quem queremos comunicar.

qualquer coisa dentro da mesma origem pode subscrever a um determinado canal criando um BroadcasChannel e então eles terão comunicação full-duplex entre todos eles.

podemos usar da seguinte forma:

const bc = new BroadcastChannel("test_channel");
bc.postMessage("test");
bc.onmessage = ev => {
console.log(ev.data);
};
bc.close();

No código acima, criamos um BroadcastChannel instância e, em seguida, nós o chamamos de postMessage e set onmessage propriedade para ouvir as mensagens que foram enviadas.

os dados são acessados usando a propriedade data.

Podemos então chamar close para fechar o canal quando terminarmos.

Podemos enviar qualquer tipo de objeto e não apenas uma cadeia de caracteres.

Message Event

Theev parameter in theonmessage handler is theMessageEvent object.

tem algumas propriedades de leitura que podemos acessar:

• data — os dados enviados pelo emissor da mensagem. Este será o conteúdo que passamos em postMessage
• origin — uma cadeia de caracteres que representa a origem da mensagem emitida
• lastEventId — uma seqüência de caracteres que representa um ID exclusivo para o evento
• sourceMessageEventSource objeto (que pode ser uma WindowProxyMessagePort, ou ServiceWorker objeto), representando a mensagem do emissor
• ports — uma matriz de MessagePort objeto que representa o portas associadas ao canal a mensagem está a ser enviada.

manipulação de erros

para lidar com erros com o envio de mensagens, podemos definir um manipulador de eventos para o propriedade do objecto do canal de difusão.

Por exemplo, podemos escrever:

bc.onmessageerror = e => console.log(e);

Depois podemos registar quaisquer erros que surjam.

Nome

podemos obter o nome do canal com a tag name propriedade.

Para fazer isso, podemos escrever:

const bc = new BroadcastChannel("test_channel");
console.log(bc.name);

em Seguida, podemos ver que a nossa Transmissão do Canal nome é test_channel a partir do console.log .

conclusão

a API do canal de difusão é uma API muito simples que nos permite fazer comunicação entre contextos.

ele pode ser usado para detectar ações do usuário nas outras páginas dentro do mesmo ambiente de origem do site, como quando um usuário faz login em uma conta.

não há protocolo de mensagens e diferentes documentos em diferentes contextos precisam implementá-lo eles mesmos.

também, não há negociação e não é exigido pela especificação.