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

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

एपीआई की बुनियादी बातें

Broadcast Channel API, एक आसान एपीआई है. इसकी मदद से, अलग-अलग प्लैटफ़ॉर्म को ब्राउज़ करते समय आसानी से कम्यूनिकेट किया जा सकता है. इसका मतलब है कि विंडो/टैब, 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();

मैसेज भेजें

मैसेज, ऐसी स्ट्रिंग या कुछ भी हो सकते हैं जो स्ट्रक्चर्ड क्लोन एल्गोरिदम (स्ट्रिंग, ऑब्जेक्ट, सरणियों, Blobs, ArrayBuffer, Maps) के साथ काम करते हों.

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

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

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

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

इस समय आप सोच रहे होंगे कि यह मैसेज भेजने की दूसरी तकनीकों से कैसे जुड़ा है, जैसे कि WebSockets, SharedWorkers, MessageChannel API, और window.postMessage(). Broadcast Channel API, इन एपीआई की जगह नहीं लेता. हर एक का एक उद्देश्य होता है. 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 की मदद से, आपको 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 के बीच मुख्य अंतर यह है कि बाद वाला मोड, एक से ज़्यादा लिसनर (वन-टू-मेनी) को मैसेज भेजने का एक तरीका है. MessageChannel को स्क्रिप्ट के बीच सीधे वन-टू-वन कम्यूनिकेशन के लिए बनाया गया है. यह तरीका ज़्यादा काम का है, जिसमें आपको चैनल के दोनों ओर पोर्ट सेटअप करने की ज़रूरत होती है.

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

फ़िलहाल, Chrome 54, Firefox 38, और Opera 41, Broadcast Channel API के साथ काम करते हैं.

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

पॉलीफ़िल के लिए कुछ विकल्प ऐसे होते हैं:

मैंने ये नहीं आज़माए, इसलिए माइलेज अलग हो सकता है.

संसाधन