Cara Menggunakan API Saluran Penyiaran dalam React

Dalam aplikasi web hari ini, memastikan maklumat dikemas kini merentas berbilang tab atau tetingkap boleh meningkatkan pengalaman pengguna. Sebagai contoh, jika pengguna log keluar dalam satu tab, anda mahu tindakan itu ditunjukkan dalam semua tab lain. API Saluran Siaran memudahkan perkara ini dengan membenarkan komunikasi antara konteks penyemakan imbas yang berbeza dari asal yang sama. Artikel ini akan membimbing anda tentang cara menggunakan API ini dalam aplikasi React.

Apakah itu API Saluran Penyiaran?

API Saluran Siaran ialah kaedah mudah untuk membolehkan komunikasi antara tab, tetingkap atau iframe yang berbeza bagi tapak web yang sama. Ia membolehkan anda menyiarkan mesej ke semua konteks lain yang mendengar pada saluran yang sama, menjadikannya sesuai untuk kemas kini dan penyegerakan masa nyata.

Mengapa Menggunakannya?

• Kemas Kini Masa Nyata: Segerakkan data seperti sesi pengguna merentas tab yang berbeza.

• Kemudahan Penyepaduan: Mudah untuk ditambahkan pada apl React sedia ada anda.

• Tiada Perpustakaan Tambahan: Berfungsi secara asli dalam penyemak imbas moden tanpa kebergantungan tambahan.

Menyediakan API Saluran Penyiaran dalam React

Mari kita lihat cara menggunakan API Saluran Penyiaran dalam aplikasi React dengan membuat cangkuk tersuai untuk mengurus komunikasi.

Buat Cangkuk Tersuai

Mula-mula, buat cangkuk tersuai bernama useBroadcastChannel untuk merangkum logik Saluran Penyiaran.

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;

Cakuk ini mencipta Saluran Penyiaran baharu, mendengar mesej masuk dan menyediakan fungsi untuk menghantar mesej.

Gunakan Cangkuk dalam Komponen Reaksi

Mari gunakan cangkuk tersuai kami dalam komponen React untuk mengurus sesi log masuk merentas tab yang berbeza.

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 (
        <div>
            <h1>Authentication Manager</h1>
            <button onClick={handleLogin}>Log In</button>
            <button onClick={handleLogout}>Log Out</button>
        </div>
    );
};

export default AuthManager;

Komponen AuthManager ini menggunakan cangkuk useBroadcastChannel untuk mengendalikan keadaan pengesahan pengguna merentas tab. Apabila pengguna log masuk atau keluar, mesej dihantar ke semua tab lain pada saluran auth_channel. Jika mesej log keluar diterima dalam mana-mana tab, ia akan mencetuskan makluman untuk memberitahu pengguna.

Kesimpulan

API Saluran Penyiaran menyediakan cara yang mudah untuk menyegerakkan data merentas berbilang tab atau tetingkap dalam aplikasi web anda. Dengan menggunakan cangkuk React tersuai, anda boleh mengurus pemesejan masa nyata dengan mudah dan meningkatkan pengalaman pengguna. Sama ada anda mengendalikan keadaan log masuk atau menyegerakkan jenis data lain, API Saluran Penyiaran memudahkan komunikasi silang tab.

Bacaan Lanjut

• Dokumen Web MDN pada API Saluran Penyiaran

Hubungi saya

• LinkedIn

• Twitter

• GitHub

Atas ialah kandungan terperinci Cara Menggunakan API Saluran Penyiaran dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!