BroadcastChannel API - वेब के लिए मैसेज बस

BroadcastChannel API की मदद से, एक ही ऑरिजिन वाली स्क्रिप्ट, दूसरे ब्राउज़िंग कॉन्टेक्स्ट पर मैसेज भेज सकती हैं. इसे एक आसान मैसेज बस के तौर पर देखा जा सकता है, जो विंडो/टैब, iframe, वेब वर्कर, और सर्विस वर्कर के बीच पब्लिश/सदस्यता से जुड़े सेंटेंस की अनुमति देता है.

एपीआई के बारे में बुनियादी जानकारी

ब्रॉडकास्ट चैनल एपीआई एक आसान एपीआई है. इसकी मदद से, ब्राउज़िंग कॉन्टेक्स्ट के बीच आसानी से कम्यूनिकेट किया जा सकता है. इसका मतलब है कि विंडो/टैब, iframe, वेब वर्कर्स, और सर्विस वर्कर्स के बीच डेटा शेयर करना. किसी चैनल पर पोस्ट किए गए मैसेज, उस चैनल के सभी दर्शकों को डिलीवर किए जाते हैं.

BroadcastChannel कंस्ट्रक्टर, एक पैरामीटर का इस्तेमाल करता है: चैनल का नाम. इस नाम से चैनल की पहचान होती है और यह ब्राउज़िंग के सभी संदर्भों में दिखता है.

// Connect to the channel named "my_bus".
const channel = new BroadcastChannel('my_bus');

// Send a message on "my_bus".
channel.postMessage('This is a test message.');

// Listen for messages on "my_bus".
channel.onmessage = function(e) {
    console.log('Received', e.data);
};

// Close the channel when you're done.
channel.close();

मैसेज भेजें

मैसेज, स्ट्रिंग या स्ट्रक्चर्ड क्लोन एल्गोरिदम (स्ट्रिंग, ऑब्जेक्ट, ऐरे, ब्लॉब, ArrayBuffer, मैप) के साथ काम करने वाली कोई भी चीज़ हो सकती है.

उदाहरण - ब्लॉब या फ़ाइल भेजना

channel.postMessage(new Blob(['foo', 'bar'], {type: 'plain/text'}));

चैनल अपने-आप ब्रॉडकास्ट नहीं होगा. इसलिए, अगर आपके चैनल पर एक ही पेज पर onmessage और postMessage() दर्शक हैं, तो message इवेंट ट्रिगर नहीं होगा.

अन्य तकनीकों से अंतर

इस समय, आपको शायद यह जानना हो कि मैसेज पास करने के लिए, WebSockets, SharedWorkers, MessageChannel API, और window.postMessage() जैसी अन्य तकनीकों से यह कैसे जुड़ी है. Broadcast Channel API, इन एपीआई की जगह नहीं लेता. हर विज़ुअलाइज़ेशन का एक मकसद होता है. ब्रॉडकास्ट चैनल एपीआई का मकसद, एक ही ऑरिजिन पर मौजूद स्क्रिप्ट के बीच आसानी से एक-से-कई कम्यूनिकेशन करना है.

ब्रॉडकास्ट चैनलों के इस्तेमाल के कुछ उदाहरण:

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

उदाहरण - वह पेज जिसे उपयोगकर्ता के लॉग आउट करने पर जानकारी मिलती है, यहां तक कि उसी साइट पर किसी दूसरे खुले हुए टैब से भी:

<button id="logout">Logout</button>

<script>
function doLogout() {
    // update the UI login state for this page.
}

const authChannel = new BroadcastChannel('auth');

const button = document.querySelector('#logout');
button.addEventListener('click', e => {
    // A channel won't broadcast to itself so we invoke doLogout()
    // manually on this page.
    doLogout();
    authChannel.postMessage({cmd: 'logout', user: 'Eric Bidelman'});
});

authChannel.onmessage = function(e) {
    if (e.data.cmd === 'logout') {
    doLogout();
    }
};
</script>

एक और उदाहरण के लिए, मान लें कि आपको उपयोगकर्ता के आपके ऐप्लिकेशन में "ऑफ़लाइन स्टोरेज सेटिंग" बदलने के बाद, कैश मेमोरी में सेव किया गया कॉन्टेंट हटाने के लिए, सर्विस वर्कर को निर्देश देना है. इसके लिए, window.caches का इस्तेमाल करके कैश मेमोरी में सेव किया गया कॉन्टेंट मिटाया जा सकता है. हालांकि, हो सकता है कि सर्विस वर्कर में पहले से ही ऐसा करने के लिए कोई सुविधा मौजूद हो. इस कोड को दोबारा इस्तेमाल करने के लिए, हम Broadcast Channel API का इस्तेमाल कर सकते हैं! Broadcast Channel API के बिना, आपको self.clients.matchAll() के नतीजों पर लूप करना होगा और हर क्लाइंट पर postMessage() को कॉल करना होगा, ताकि सेवा वर्कर से उसके सभी क्लाइंट (असल कोड जो ऐसा करता है) तक कम्यूनिकेशन हो सके. ब्रॉडकास्ट चैनल का इस्तेमाल करने पर, यह O(N) के बजाय O(1) हो जाता है.

उदाहरण - सर्विस वर्कर को कैश मेमोरी हटाने के लिए निर्देश देता है. साथ ही, इसके लिए अंदरूनी इस्तेमाल के तरीकों का फिर से इस्तेमाल करता है.

index.html में

const channel = new BroadcastChannel('app-channel');
channel.onmessage = function(e) {
    if (e.data.action === 'clearcache') {
    console.log('Cache removed:', e.data.removed);
    }
};

const messageChannel = new MessageChannel();

// Send the service worker a message to clear the cache.
// We can't use a BroadcastChannel for this because the
// service worker may need to be woken up. MessageChannels do that.
navigator.serviceWorker.controller.postMessage({
    action: 'clearcache',
    cacheName: 'v1-cache'
}, [messageChannel.port2]);

sw.js में

function nukeCache(cacheName) {
    return caches.delete(cacheName).then(removed => {
    // ...do more stuff (internal) to this service worker...
    return removed;
    });
}

self.onmessage = function(e) {
    const action = e.data.action;
    const cacheName = e.data.cacheName;

    if (action === 'clearcache') {
    nukeCache(cacheName).then(removed => {
        // Send the main page a response via the BroadcastChannel API.
        // We could also use e.ports[0].postMessage(), but the benefit
        // of responding with the BroadcastChannel API is that other
        // subscribers may be listening.
        const channel = new BroadcastChannel('app-channel');
        channel.postMessage({action, removed});
    });
    }
};

postMessage() से अंतर

postMessage() के उलट, किसी iframe या वर्कर से कम्यूनिकेट करने के लिए, अब आपको उसका रेफ़रंस बनाए रखने की ज़रूरत नहीं है:

// Don't have to save references to window objects.
const popup = window.open('https://another-origin.com', ...);
popup.postMessage('Sup popup!', 'https://another-origin.com');

window.postMessage() की मदद से, अलग-अलग ऑरिजिन के बीच भी कम्यूनिकेट किया जा सकता है. Broadcast Channel API, एक ही ऑरिजिन का है. यह पक्का है कि मैसेज एक ही ऑरिजिन से आते हैं. इसलिए, window.postMessage() के साथ की जाने वाली पुष्टि की ज़रूरत नहीं है:

// Don't have to validate the origin of a message.
const iframe = document.querySelector('iframe');
iframe.contentWindow.onmessage = function(e) {
    if (e.origin !== 'https://expected-origin.com') {
    return;
    }
    e.source.postMessage('Ack!', e.origin);
};

किसी खास चैनल की "सदस्यता लें" और सुरक्षित और दोनों पक्षों से बातचीत करें!

SharedWorkers से अंतर

BroadcastChannel का इस्तेमाल उन आसान मामलों में करें जहां आपको कई विंडो/टैब या वर्कर्स को मैसेज भेजना हो.

शेयर किए गए वर्कर्स का इस्तेमाल, लॉक मैनेज करने, शेयर की गई स्थिति को मैनेज करने, सर्वर और एक से ज़्यादा क्लाइंट के बीच संसाधनों को सिंक करने या किसी रिमोट होस्ट के साथ WebSocket कनेक्शन शेयर करने जैसे बेहतर इस्तेमाल के उदाहरणों के लिए किया जा सकता है.

MessageChannel API में अंतर

Channel Messaging API और BroadcastChannel के बीच मुख्य अंतर यह है कि BroadcastChannel का इस्तेमाल, एक से ज़्यादा दर्शकों को मैसेज भेजने के लिए किया जाता है. MessageChannel का इस्तेमाल, स्क्रिप्ट के बीच सीधे तौर पर एक-से-एक बातचीत करने के लिए किया जाता है. यह तरीका ज़्यादा जटिल है. इसमें आपको हर छोर पर एक पोर्ट के साथ चैनल सेट अप करने होंगे.

सुविधा की पहचान और ब्राउज़र के साथ काम करने की सुविधा

फ़िलहाल, Chrome 54, Firefox 38, और Opera 41 पर ब्रॉडकास्ट चैनल एपीआई काम करता है.

if ('BroadcastChannel' in self) {
    // BroadcastChannel API supported!
}

पॉलीफ़िल के लिए, कुछ विकल्प उपलब्ध हैं:

मैंने इनका इस्तेमाल नहीं किया है, इसलिए आपके लिए इनका अनुभव अलग हो सकता है.

संसाधन