مفهوم Broadcast در جاوااسکریپت، همه چیزی که نیاز دارید

Broadcast یکی از مفاهیم مهم در توسعه برنامه‌های وب مدرن جاوا اسکریپت است که امکان ارتباط بین قسمت‌های مختلف برنامه را فراهم می‌کند. این مفهوم مخصوصا در مواردی مانند الزام به انتقال اطلاعات میان کمپوننت‌های مختلف یا بافت‌های متفاوت در یک تابع واقعیت می‌یابد.

در این مقاله قصد داریم مفهوم broadcast را به شکلی کامل و جامع توضیح دهیم و یک مثال عملی از آن را نشان دهیم.

مفهوم Broadcast چیست؟

Broadcast در جاوااسکریپت به معنای انتقال یک پیام یا اطلاعات از یک منبع به تعداد مقصد متفاوت است. این مفهوم به معنای “پخش عمومی” است و در دنیای برنامه‌نویسی به ارسال اطلاعات یا پیام‌ها از یک منبع به چندین مقصد اشاره دارد. در جاوا اسکریپت، از این تکنیک برای برقراری ارتباط بین کامپوننت‌ها یا بخش‌های مختلف اپلیکیشن استفاده می‌شود، به خصوص زمانی که نیازی به وابستگی مستقیم بین بخش‌ها نداریم.

این فرآیند ممکن است بصورت خودکار (از طریق event-driven programming) یا مانوئل انجام شود. برخی از اصول مهم در Broadcast عبارتند از:

یک منبع (فرستنده): مدلی که اطلاعات را فراهم می‌کند.

مقصد‌ها (گیرنده‌ها): بخش‌هایی که اطلاعات را دریافت و مدیریت می‌کنند.

نوع اطلاعات: ممکن است اطلاعات به صورت متنی، عددی یا JSON باشد.

کاربرد Broadcast در موارد متفاوت

ارتباط بین کمپوننت‌ها: در برنامه‌های ریاکت، انگولار و ویو، کمپوننت‌ها می‌توانند از مفهوم برادکست برای تبادل داده استفاده کنند.
اطلاع‌رسانی در تغییر داده: اگر داده‌ای در یک نقطه تغییر یافته و نیاز است نقاط دیگر نیز از آن مطلع شوند.
ارسال و دریافت اطلاعات بافته‌ای (روی شبکه): ارسال اطلاعات بین کلاینت‌ها و سرورها، مثلا با WebSocket.

آیا میدانید مدرسه فرانت اند پرنیان، کلاس فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟!

معرفی BroadcastChannel API

BroadcastChannel API یکی از روش‌های جدید و قدرتمند برای پیاده‌سازی Broadcast در مرورگرها است. با استفاده از این API می‌توانید پیام‌ها را بین چندین صفحه (تب) یا iframe به اشتراک بگذارید.

مراحل استفاده از BroadcastChannel API:
ایجاد یک کانال با نام مشخص:

const channel = new BroadcastChannel('my_channel');

ارسال پیام:

channel.postMessage('Hello from Tab 1!');

دریافت پیام:

channel.onmessage = (event) => {
    console.log('Received:', event.data);
};

مثال کاربردی: اشتراک پیام بین دو تب

فرض کنید می‌خواهیم یک پیام را از یک تب ارسال کنیم و آن را در تب دیگری نمایش دهیم. کد زیر این فرآیند را نشان می‌دهد:

کد ارسال پیام (در تب اول):

const channel = new BroadcastChannel('chat_channel');

document.getElementById('sendBtn').addEventListener('click', () => {
    const message = document.getElementById('messageInput').value;
    channel.postMessage(message);
    console.log('Message sent:', message);
});

کد دریافت پیام (در تب دوم):

const channel = new BroadcastChannel('chat_channel');

channel.onmessage = (event) => {
    const receivedMessage = event.data;
    const messageContainer = document.getElementById('messageContainer');
    messageContainer.innerHTML += `<p>${receivedMessage}</p>`;
    console.log('Message received:', receivedMessage);
};

HTML مربوطه:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Broadcast Example</title>
</head>
<body>
    <h1>Broadcast Example</h1>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button id="sendBtn">Send</button>
    <div id="messageContainer"></div>

    <script src="script.js"></script>
</body>
</html>

نکات مهم
سازگاری مرورگرها: مطمئن شوید که مرورگر کاربران از BroadcastChannel API پشتیبانی می‌کند.
مدیریت حافظه: حتماً کانال‌های باز شده را در زمان مناسب ببندید:

channel.close();

مثالی عملی Broadcast با EventEmitter

در اینجا یک مثال عملی نشان می‌دهیم که در آن از ابزار EventEmitter استفاده می‌شود.

// وارد کردن EventEmitter
const EventEmitter = require('events');

// ایجاد یک EventEmitter
const broadcaster = new EventEmitter();

// تعریف گیرنده‌ها
broadcaster.on('message', (data) => {
    console.log(`گیرنده 1: فیشار موفق دریافت شد: ${data}`);
});

broadcaster.on('message', (data) => {
    console.log(`گیرنده 2: معلومات دریافت شد: ${data}`);
});

// فرستادن پیام
broadcaster.emit('message', 'سلام به دنیا!');

امیدواریم از این مقاله آموزش جامع IIFE در جاوا اسکریپت با مثال‌های کاربردی نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.