आज के वेब एप्लिकेशन में, कई टैब या विंडो में जानकारी अपडेट रखने से उपयोगकर्ता अनुभव में काफी वृद्धि हो सकती है। उदाहरण के लिए, यदि कोई उपयोगकर्ता एक टैब में लॉग आउट करता है, तो आप चाहते हैं कि वह कार्रवाई अन्य सभी टैब में दिखाई दे। ब्रॉडकास्ट चैनल एपीआई एक ही मूल के विभिन्न ब्राउज़िंग संदर्भों के बीच संचार की अनुमति देकर इसे आसान बनाता है। यह आलेख आपको रिएक्ट एप्लिकेशन में इस एपीआई का उपयोग करने के तरीके के बारे में मार्गदर्शन करेगा।

ब्रॉडकास्ट चैनल एपीआई क्या है?

ब्रॉडकास्ट चैनल एपीआई एक ही वेबसाइट के विभिन्न टैब, विंडो या आईफ्रेम के बीच संचार को सक्षम करने की एक सरल विधि है। यह आपको एक ही चैनल पर सुनने वाले अन्य सभी संदर्भों में संदेश प्रसारित करने की अनुमति देता है, जो इसे वास्तविक समय अपडेट और सिंक्रनाइज़ेशन के लिए आदर्श बनाता है।

इसका उपयोग क्यों करें?

• वास्तविक समय अपडेट: विभिन्न टैब में उपयोगकर्ता सत्रों की तरह डेटा सिंक करें।

• एकीकरण में आसानी: अपने मौजूदा रिएक्ट ऐप में जोड़ना आसान।

• कोई अतिरिक्त लाइब्रेरी नहीं: अतिरिक्त निर्भरता के बिना आधुनिक ब्राउज़र में मूल रूप से कार्य करता है।

रिएक्ट में ब्रॉडकास्ट चैनल एपीआई सेट करना

आइए संचार को प्रबंधित करने के लिए एक कस्टम हुक बनाकर रिएक्ट एप्लिकेशन में ब्रॉडकास्ट चैनल एपीआई का उपयोग कैसे करें, इसके बारे में जानें।

एक कस्टम हुक बनाएं

सबसे पहले, ब्रॉडकास्ट चैनल लॉजिक को एनकैप्सुलेट करने के लिए यूज़ब्रॉडकास्टचैनल नामक एक कस्टम हुक बनाएं।

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;

यह हुक एक नया ब्रॉडकास्ट चैनल बनाता है, आने वाले संदेशों को सुनता है, और संदेश भेजने के लिए एक फ़ंक्शन प्रदान करता है।

प्रतिक्रिया घटक में हुक का उपयोग करें

आइए विभिन्न टैब में लॉगिन सत्र प्रबंधित करने के लिए रिएक्ट घटक में हमारे कस्टम हुक का उपयोग करें।

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;

यह ऑथमैनेजर घटक टैब में उपयोगकर्ता प्रमाणीकरण स्थिति को संभालने के लिए यूज़ब्रॉडकास्टचैनल हुक का उपयोग करता है। जब कोई उपयोगकर्ता लॉग इन या आउट करता है, तो auth_channel चैनल पर अन्य सभी टैब पर एक संदेश भेजा जाता है। यदि किसी टैब में लॉगआउट संदेश प्राप्त होता है, तो यह उपयोगकर्ता को सूचित करने के लिए अलर्ट ट्रिगर करता है।

निष्कर्ष

ब्रॉडकास्ट चैनल एपीआई आपके वेब एप्लिकेशन में कई टैब या विंडो में डेटा को सिंक्रनाइज़ करने का एक सीधा तरीका प्रदान करता है। कस्टम रिएक्ट हुक का उपयोग करके, आप आसानी से रीयल-टाइम मैसेजिंग प्रबंधित कर सकते हैं और उपयोगकर्ता अनुभव में सुधार कर सकते हैं। चाहे आप लॉगिन स्थिति संभाल रहे हों या अन्य प्रकार के डेटा को सिंक कर रहे हों, ब्रॉडकास्ट चैनल एपीआई क्रॉस-टैब संचार को सरल बनाता है।

अग्रिम पठन

• ब्रॉडकास्ट चैनल एपीआई पर एमडीएन वेब डॉक्स

मुझसे जुड़ें

• लिंक्डइन

• ट्विटर

• गिटहब