BroadcastChannel API - ওয়েবের জন্য একটি বার্তা বাস

BroadcastChannel API একই-অরিজিন স্ক্রিপ্টগুলিকে অন্যান্য ব্রাউজিং প্রসঙ্গে বার্তা পাঠাতে অনুমতি দেয়। এটিকে একটি সাধারণ বার্তা বাস হিসাবে ভাবা যেতে পারে যা উইন্ডোজ/ট্যাব, আইফ্রেম, ওয়েব কর্মী এবং পরিষেবা কর্মীদের মধ্যে পাব/সাব শব্দার্থবিদ্যাকে অনুমতি দেয়।

API বেসিক

ব্রডকাস্ট চ্যানেল API হল একটি সাধারণ API যা ব্রাউজিং প্রসঙ্গগুলির মধ্যে যোগাযোগকে সহজ করে তোলে৷ অর্থাৎ, উইন্ডোজ/ট্যাব, আইফ্রেম, ওয়েব কর্মী এবং পরিষেবা কর্মীদের মধ্যে যোগাযোগ করা। একটি প্রদত্ত চ্যানেলে পোস্ট করা বার্তাগুলি সেই চ্যানেলের সমস্ত শ্রোতাদের কাছে পৌঁছে দেওয়া হয়।

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();

বার্তা পাঠানো হচ্ছে

বার্তাগুলি স্ট্রিং বা কাঠামোগত ক্লোন অ্যালগরিদম (স্ট্রিংস, অবজেক্ট, অ্যারে, ব্লবস, অ্যারেবাফার, ম্যাপ) দ্বারা সমর্থিত যেকোনো কিছু হতে পারে।

উদাহরণ - একটি ব্লব বা ফাইল পাঠানো

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

একটি চ্যানেল নিজেই সম্প্রচার করবে না। তাই আপনার যদি একই পৃষ্ঠায় একই চ্যানেলে একটি postMessage() হিসাবে একটি onmessage শ্রোতা থাকে, তাহলে সেই message ইভেন্টটি চালু হয় না।

অন্যান্য কৌশলের সাথে পার্থক্য

এই মুহুর্তে আপনি ভাবছেন যে এটি WebSockets, SharedWorkers, MessageChannel API , এবং window.postMessage() মতো বার্তা পাস করার অন্যান্য কৌশলগুলির সাথে কীভাবে সম্পর্কিত। ব্রডকাস্ট চ্যানেল API এই 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 ব্যবহার করে তাদের ক্যাশে মুছে ফেলতে পারেন, কিন্তু পরিষেবা কর্মী ইতিমধ্যে এটি করার জন্য একটি ইউটিলিটি থাকতে পারে। আমরা সেই কোডটি পুনরায় ব্যবহার করতে ব্রডকাস্ট চ্যানেল API ব্যবহার করতে পারি! ব্রডকাস্ট চ্যানেল 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() এর বিপরীতে, এর সাথে যোগাযোগ করার জন্য আপনাকে আর একটি আইফ্রেম বা কর্মীর রেফারেন্স বজায় রাখতে হবে না:

// 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() আপনাকে উৎস জুড়ে যোগাযোগ করতে দেয়। ব্রডকাস্ট চ্যানেল 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 ব্যবহার করুন।

লক ম্যানেজ করা, শেয়ার্ড স্টেট, সার্ভার এবং একাধিক ক্লায়েন্টের মধ্যে রিসোর্স সিঙ্ক্রোনাইজ করা বা রিমোট হোস্টের সাথে ওয়েবসকেট কানেকশন শেয়ার করার মতো শৌখিন ব্যবহারের ক্ষেত্রে, শেয়ার্ড ওয়ার্কার্স হল সবচেয়ে উপযুক্ত সমাধান।

MessageChannel API এর সাথে পার্থক্য

চ্যানেল মেসেজিং এপিআই এবং BroadcastChannel মধ্যে প্রধান পার্থক্য হল পরেরটি হল একাধিক শ্রোতাদের (এক থেকে অনেক) বার্তা পাঠানোর একটি মাধ্যম। MessageChannel সরাসরি স্ক্রিপ্টের মধ্যে এক-এক যোগাযোগের জন্য বোঝানো হয়। এটি আরও জড়িত, প্রতিটি প্রান্তে একটি পোর্ট সহ আপনাকে চ্যানেল সেটআপ করতে হবে।

বৈশিষ্ট্য সনাক্তকরণ এবং ব্রাউজার সমর্থন

বর্তমানে, Chrome 54, Firefox 38, এবং Opera 41 ব্রডকাস্ট চ্যানেল API সমর্থন করে।

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

পলিফিলের জন্য, সেখানে কয়েকটি রয়েছে:

আমি এগুলি চেষ্টা করিনি, তাই আপনার মাইলেজ পরিবর্তিত হতে পারে।

সম্পদ