في تطبيقات الويب اليوم، يمكن أن يؤدي الحفاظ على تحديث المعلومات عبر علامات تبويب أو نوافذ متعددة إلى تحسين تجربة المستخدم بشكل كبير. على سبيل المثال، إذا قام مستخدم بتسجيل الخروج في علامة تبويب واحدة، فأنت تريد أن ينعكس هذا الإجراء في جميع علامات التبويب الأخرى. تعمل واجهة برمجة تطبيقات قناة البث على تسهيل ذلك من خلال السماح بالاتصال بين سياقات التصفح المختلفة من نفس المصدر. سترشدك هذه المقالة حول كيفية استخدام واجهة برمجة التطبيقات هذه في تطبيق React.

ما هي واجهة برمجة تطبيقات قناة البث؟

تعد واجهة برمجة تطبيقات قناة البث

طريقة بسيطة لتمكين الاتصال بين علامات التبويب أو النوافذ أو إطارات iframe المختلفة لنفس موقع الويب. فهو يسمح لك ببث الرسائل إلى جميع السياقات الأخرى التي تستمع إليها على نفس القناة، مما يجعلها مثالية للتحديثات والمزامنة في الوقت الفعلي.

لماذا نستخدمها؟

•

تحديثات في الوقت الفعلي

: مزامنة البيانات مثل جلسات المستخدم عبر علامات تبويب مختلفة. •

سهولة التكامل

: من السهل إضافتها إلى تطبيق React الموجود لديك. •

لا توجد مكتبات إضافية

: تعمل أصلاً في المتصفحات الحديثة دون تبعيات إضافية.

إعداد واجهة برمجة تطبيقات قناة البث في React

فلنتعرف على كيفية استخدام Broadcast Channel API في تطبيق React عن طريق إنشاء رابط مخصص لإدارة الاتصال.

إنشاء خطاف مخصص

أولاً، قم بإنشاء رابط مخصص باسم useBroadcastChannel لتغليف منطق قناة البث.

استيراد { useEffect, useState } من 'react'; const useBroadcastChannel = (channelName) => { const [message, setMessage] = useState(null); قناة const = new BroadcastChannel(channelName); استخدام التأثير (() => { const HandleMessage = (الحدث) => { setMessage(event.data); }; Channel.onmessage = HandleMessage; // تنظيف القناة عند إلغاء تحميل المكون العودة () => { قناة. إغلاق ()؛ }; }, [قناة]); const sendMessage = (msg) => { channel.postMessage(msg); }; إرجاع { رسالة، إرسال رسالة }؛ }; تصدير 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;

استخدم الخطاف في مكون React

دعونا نستخدم خطافنا المخصص في مكون React لإدارة جلسات تسجيل الدخول عبر علامات تبويب مختلفة.

استيراد React، { useEffect } من 'react'؛ استيراد useBroadcastChannel من './useBroadcastChannel'؛ const AuthManager = () => { const { message, sendMessage } = useBroadcastChannel('auth_channel'); مقبض ثابت = () => { // إعلام كافة علامات التبويب التي قام المستخدم بتسجيل الدخول إليها sendMessage({ type: 'login', user: 'JohnDoe' }); }; const HandleLogout = () => { // إعلام جميع علامات التبويب التي قام المستخدم بتسجيل الخروج منها sendMessage({ النوع: 'تسجيل الخروج' }); }; استخدام التأثير (() => { إذا (رسالة) { إذا (message.type === 'تسجيل الخروج') { تنبيه ("لقد تم تسجيل خروجك في علامة تبويب أخرى!")؛ } } }، [رسالة])؛ يعود (

مدير المصادقة

تسجيل الدخول تسجيل الخروج ); }; تصدير AuthManager الافتراضي؛

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;

خاتمة

توفر واجهة برمجة تطبيقات قناة البث طريقة مباشرة لمزامنة البيانات عبر علامات تبويب أو نوافذ متعددة في تطبيقات الويب الخاصة بك. باستخدام رابط React مخصص، يمكنك بسهولة إدارة الرسائل في الوقت الفعلي وتحسين تجربة المستخدم. سواء كنت تتعامل مع حالات تسجيل الدخول أو تقوم بمزامنة أنواع أخرى من البيانات، تعمل واجهة برمجة تطبيقات قناة البث على تبسيط الاتصال عبر علامات التبويب.

مزيد من القراءة

• MDN Web Docs على واجهة برمجة تطبيقات قناة البث

تواصل معي

لينكد إن
تغريد
جيثب