В современных веб-приложениях обновление информации на нескольких вкладках или окнах может значительно улучшить взаимодействие с пользователем. Например, если пользователь выходит из системы на одной вкладке, вы хотите, чтобы это действие отражалось на всех остальных вкладках. API широковещательного канала упрощает эту задачу, обеспечивая связь между различными контекстами просмотра одного и того же источника. Эта статья расскажет вам, как использовать этот API в приложении React.

Что такое API широковещательного канала?

API широковещательного канала — это простой метод, обеспечивающий связь между различными вкладками, окнами или iframe одного и того же веб-сайта. Он позволяет транслировать сообщения всем остальным контекстам, прослушивающим тот же канал, что делает его идеальным для обновлений и синхронизации в реальном времени.

Зачем это использовать?

• Обновления в реальном времени: синхронизируйте данные, такие как сеансы пользователей, на разных вкладках.

• Простота интеграции: просто добавить в существующее приложение React.

• Нет дополнительных библиотек: изначально работает в современных браузерах без дополнительных зависимостей.

Настройка API широковещательного канала в React

Давайте рассмотрим, как использовать API широковещательного канала в приложении React, создав собственный крючок для управления связью.

Создать собственный хук

Сначала создайте собственный хук с именем useBroadcastChannel, чтобы инкапсулировать логику широковещательного канала.

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;

Этот хук создает новый BroadcastChannel, прослушивает входящие сообщения и предоставляет функцию для отправки сообщений.

Используйте хук в компоненте React

Давайте воспользуемся нашим специальным хуком в компоненте React для управления сеансами входа на разных вкладках.

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;

Этот компонент AuthManager использует перехватчик useBroadcastChannel для обработки состояния аутентификации пользователя на вкладках. Когда пользователь входит в систему или выходит из нее, сообщение отправляется на все остальные вкладки канала auth_channel. Если сообщение о выходе из системы получено на какой-либо вкладке, оно вызывает предупреждение для уведомления пользователя.

Заключение

API Broadcast Channel предоставляет простой способ синхронизации данных на нескольких вкладках или окнах ваших веб-приложений. Используя специальный хук React, вы можете легко управлять обменом сообщениями в реальном времени и улучшать взаимодействие с пользователем. Независимо от того, обрабатываете ли вы состояния входа или синхронизируете другие типы данных, API широковещательного канала упрощает взаимодействие между таблицами.

Дополнительная литература

• Веб-документы MDN по API широковещательного канала

Свяжитесь со мной

• LinkedIn

• Твиттер

• GitHub