Nos aplicativos da web atuais, manter as informações atualizadas em várias guias ou janelas pode melhorar muito a experiência do usuário. Por exemplo, se um usuário fizer logout em uma guia, você deseja que essa ação seja refletida em todas as outras guias. A Broadcast Channel API facilita isso ao permitir a comunicação entre diferentes contextos de navegação da mesma origem. Este artigo irá guiá-lo sobre como usar esta API em um aplicativo React.

O que é a API do canal de transmissão?

A Broadcast Channel API é um método simples para permitir a comunicação entre diferentes guias, janelas ou iframes do mesmo site. Ele permite que você transmita mensagens para todos os outros contextos ouvindo no mesmo canal, tornando-o ideal para atualizações e sincronização em tempo real.

Por que usá-lo?

• Atualizações em tempo real: sincronize dados como sessões de usuário em diferentes guias.

• Facilidade de integração: Simples de adicionar ao seu aplicativo React existente.

• Sem bibliotecas adicionais: Funciona nativamente em navegadores modernos sem dependências extras.

Configurando a API do canal de transmissão no React

Vamos ver como usar a API Broadcast Channel em um aplicativo React criando um gancho personalizado para gerenciar a comunicação.

Crie um gancho personalizado

Primeiro, crie um gancho personalizado chamado useBroadcastChannel para encapsular a lógica do canal de transmissão.

import { useEffect, useState } from 'react';

const useBroadcastChannel = (channelName) => {
    const [message, setMessage] = useState(null);
    const channel = new BroadcastChannel(channelName);

    useEffect(() => {
        const handleMessage = (event) => {
            setMessage(event.data);
        };

        channel.onmessage = handleMessage;

        // Clean up the channel when the component unmounts
        return () => {
            channel.close();
        };
    }, [channel]);

    const sendMessage = (msg) => {
        channel.postMessage(msg);
    };

    return { message, sendMessage };
};

export default useBroadcastChannel;

Este gancho cria um novo BroadcastChannel, escuta mensagens recebidas e fornece uma função para enviar mensagens.

Use o gancho em um componente React

Vamos usar nosso gancho personalizado em um componente React para gerenciar sessões de login em diferentes guias.

import React, { useEffect } from 'react';
import useBroadcastChannel from './useBroadcastChannel';

const AuthManager = () => {
    const { message, sendMessage } = useBroadcastChannel('auth_channel');

    const handleLogin = () => {
        // Notify all tabs that the user has logged in
        sendMessage({ type: 'login', user: 'JohnDoe' });
    };

    const handleLogout = () => {
        // Notify all tabs that the user has logged out
        sendMessage({ type: 'logout' });
    };

    useEffect(() => {
        if (message) {
            if (message.type === 'logout') {
                alert('You have been logged out in another tab!');
            }
        }
    }, [message]);

    return (
        

            
Authentication Manager
            Log In
            Log Out
        
    );
};

export default AuthManager;

Este componente AuthManager usa o gancho useBroadcastChannel para lidar com o estado de autenticação do usuário nas guias. Quando um usuário efetua login ou logout, uma mensagem é enviada para todas as outras guias do canal auth_channel. Se uma mensagem de logout for recebida em qualquer guia, ela acionará um alerta para notificar o usuário.

Conclusão

A API Broadcast Channel fornece uma maneira direta de sincronizar dados em várias guias ou janelas em seus aplicativos da web. Ao usar um gancho React personalizado, você pode gerenciar facilmente mensagens em tempo real e melhorar a experiência do usuário. Esteja você lidando com estados de login ou sincronizando outros tipos de dados, a API Broadcast Channel simplifica a comunicação entre guias.

Leitura adicional

• MDN Web Docs sobre API de canal de transmissão

Conecte-se comigo

• LinkedIn

• Twitter

• GitHub