در دنیای توسعه وب، تجربه کاربری یکپارچه و روان از اهمیت بالایی برخوردار است. فرض کنید کاربری چندین زبانه (Tab) از یک وب‌سایت را همزمان باز کرده و انتظار دارد که تغییرات اعمال‌شده در یک زبانه، مانند افزودن محصول به سبد خرید یا خروج از حساب کاربری، به‌سرعت در سایر زبانه‌ها منعکس شود. دستیابی به چنین هماهنگی‌ای بدون نیاز به ارتباط مداوم با سرور یا استفاده از ابزارهای پیچیده، چالشی است که توسعه‌دهندگان وب با آن مواجه هستند. اینجا است که BroadcastChannel API به‌عنوان یک ابزار بومی مرورگر وارد عمل می‌شود. این رابط برنامه‌نویسی کاربردی (API) امکان برقراری ارتباط مستقیم و بلادرنگ بین زبانه‌ها، فریم‌های داخلی (Iframe) و کارگرهای وب (Web Worker) را در یک دامنه مشترک (Same Origin) فراهم می‌کند. در این مقاله، به بررسی BroadcastChannel API، نحوه عملکرد آن، کاربردهای عملی در توسعه وب و یک نمونه واقعی با HTML و جاوااسکریپت خالص می‌پردازیم.
BroadcastChannel API چیست؟
BroadcastChannel API یک رابط برنامه‌نویسی بومی در مرورگرهای مدرن است که به زبانه‌ها، فریم‌های داخلی و کارگرهای وب اجازه می‌دهد پیام‌هایی را در یک کانال مشترک (Channel) منتشر کرده و از همان کانال پیام‌های دیگران را دریافت کنند. این فناوری مشابه یک سیستم رادیویی عمل می‌کند: هر زبانه یا فرآیند که به یک کانال خاص متصل باشد، می‌تواند پیام ارسال کند یا پیام‌های ارسالی دیگران را دریافت نماید. برای استفاده از این API، کافی است یک نمونه از کلاس BroadcastChannel با نامی مشخص ایجاد کنید، پیام‌ها را با متد postMessage ارسال کنید و با استفاده از رویداد onmessage به پیام‌های دریافتی واکنش نشان دهید. کد زیر نمونه‌ای ساده از این فرآیند را نشان می‌دهد:
const channel = new BroadcastChannel("notifications");
channel.postMessage({ type: "logout" });
channel.onmessage = (event) => {
console.log("Received:", event.data);
};این API برای سناریوهایی مانند همگام‌سازی وضعیت ورود/خروج کاربر، به‌روزرسانی تنظیمات زبان یا تم در تمامی زبانه‌ها و اطلاع‌رسانی به کارگرهای وب بدون نیاز به ارتباط با سرور ایده‌آل است. برخلاف روش‌های سنتی مانند WebSocket یا درخواست‌های مکرر به سرور (Polling)، این API نیازی به زیرساخت‌های اضافی ندارد و کاملاً در مرورگر اجرا می‌شود.
ارتباط بین‌فرآیندی (IPC) و نقش آن در BroadcastChannel
برای درک بهتر نحوه عملکرد BroadcastChannel API، لازم است با مفهوم ارتباط بین‌فرآیندی (Inter-Process Communication یا IPC) آشنا شویم. مرورگرهای مدرن مانند کروم، فایرفاکس و اج از معماری چندفرآیندی (Multi-Process Architecture) استفاده می‌کنند. در این معماری، هر زبانه به‌عنوان یک فرآیند جداگانه (Renderer Process) اجرا می‌شود که از فرآیند اصلی مرورگر (Main Process) مستقل است. این جداسازی باعث افزایش امنیت، پایداری و عملکرد مرورگر می‌شود، اما ارتباط بین زبانه‌ها را پیچیده‌تر می‌کند، زیرا فرآیندها نمی‌توانند مستقیماً به حافظه یکدیگر دسترسی داشته باشند.
ارتباط بین‌فرآیندی (IPC) راه‌حلی است که مرورگرها برای تبادل داده بین این فرآیندها به کار می‌برند. در مرورگرهای مبتنی بر کرومیوم (Chromium)، مانند کروم و اج، چارچوبی به نام Mojo برای مدیریت این ارتباطات استفاده می‌شود. پیام‌ها ابتدا به‌صورت بایت سریال‌سازی (Serialize) می‌شوند، از طریق لوله‌ها یا سوکت‌های سیستمی ارسال می‌گردند و سپس در فرآیند مقصد از حالت سریال خارج (Deserialize) شده و به گیرنده تحویل داده می‌شوند. BroadcastChannel API از این مکانیزم برای انتقال پیام‌ها بین زبانه‌ها و فرآیندهای مرتبط استفاده می‌کند.
نحوه عملکرد داخلی BroadcastChannel
وقتی یک پیام با استفاده از متد postMessage در یک کانال BroadcastChannel ارسال می‌شود، فرآیند زیر در مرورگر رخ می‌دهد: ابتدا، پیام با استفاده از الگوریتم کلون ساختاریافته (Structured Clone Algorithm) سریال‌سازی می‌شود تا امکان انتقال داده‌های پیچیده مانند آرایه‌ها یا اشیاء فراهم شود. سپس، فرآیند رندر (Renderer Process) زبانه پیام را از طریق IPC به فرآیند اصلی مرورگر ارسال می‌کند. فرآیند اصلی، که نقش یک گذرگاه پیام (Message Bus) را ایفا می‌کند، پیام را به تمام فرآیندهای رندر دیگر، کارگرهای وب و فریم‌های داخلی که به همان کانال و دامنه مشترک متصل هستند، توزیع می‌کند. در نهایت، هر گیرنده پیام را از حالت سریال خارج کرده و رویداد onmessage را فراخوانی می‌کند.
این گذرگاه پیام در مرورگر مانند یک سیستم انتشار-اشتراک (Publish-Subscribe) عمل می‌کند. هر نمونه BroadcastChannel با یک کلید منحصربه‌فرد (ترکیبی از نام کانال و دامنه) به گذرگاه متصل می‌شود و تنها پیام‌های مرتبط با آن کلید را دریافت می‌کند. این فرآیند به‌گونه‌ای طراحی شده که بدون مسدود کردن نخ اصلی (Main Thread) اجرا شود و از افت عملکرد جلوگیری کند.
مزایا و محدودیت‌های BroadcastChannel API
BroadcastChannel API مزایای متعددی دارد که آن را به گزینه‌ای جذاب برای توسعه‌دهندگان تبدیل می‌کند. این API نیازی به کتابخانه‌های خارجی ندارد، از داده‌های پیچیده پشتیبانی می‌کند و به دلیل اجرای بومی در مرورگر، عملکرد سریعی ارائه می‌دهد. همچنین، عدم وابستگی به سرور یا ذخیره‌سازی دائمی، آن را برای سناریوهای ساده و بلادرنگ مناسب می‌سازد.
با این حال، این API محدودیت‌هایی نیز دارد. برای مثال، تنها در دامنه‌های مشترک (Same Origin) کار می‌کند و امکان ارتباط بین دامنه‌های مختلف (Cross-Origin) را فراهم نمی‌کند. پیام‌ها در این سیستم تاریخچه‌ای ندارند؛ اگر زبانه‌ای در زمان ارسال پیام به کانال متصل نباشد، پیام را از دست خواهد داد. همچنین، این API در محیط‌هایی مانند Node.js یا مرورگرهای قدیمی پشتیبانی نمی‌شود و اشکال‌زدایی آن به دلیل ماهیت بین‌زبانه‌ای ممکن است چالش‌برانگیز باشد.
نمونه کاربردی: همگام‌سازی خروج کاربر با HTML و جاوااسکریپت خالص
برای نشان دادن کاربرد عملی BroadcastChannel API، یک سناریوی واقعی را پیاده‌سازی می‌کنیم: همگام‌سازی خروج کاربر از حساب کاربری در تمام زبانه‌های باز یک وب‌سایت با استفاده از HTML و جاوااسکریپت خالص. هدف این است که وقتی کاربر از یک زبانه خارج می‌شود، سایر زبانه‌ها نیز به‌صورت خودکار از حساب خارج شوند. این پیاده‌سازی نیازی به چارچوب‌های اضافی ندارد و به‌راحتی در پروژه‌های ساده وب قابل استفاده است.
ساختار HTML
ابتدا یک صفحه HTML ساده ایجاد می‌کنیم که شامل یک دکمه برای خروج از حساب و یک پیام خوش‌آمدگویی برای کاربر است. کد HTML به‌صورت زیر است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>همگام‌سازی خروج با BroadcastChannel</title>
</head>
<body>
<div id="welcome">خوش آمدید، کاربر!</div>
<button id="logoutButton">خروج از حساب</button>
<script src="script.js"></script>
</body>
</html>
پیاده‌سازی جاوااسکریپت
در فایل script.js، از BroadcastChannel API برای ارسال و دریافت پیام‌های خروج استفاده می‌کنیم. کد زیر این فرآیند را پیاده‌سازی می‌کند:
// script.js
// تابع مدیریت خروج از حساب
function logout() {
// پاک کردن اطلاعات کاربر (مثلاً کوکی‌ها یا داده‌های ذخیره‌شده)
document.getElementById("welcome").textContent = "شما از حساب خارج شدید.";
document.getElementById("logoutButton").style.display = "none";
// ارسال پیام خروج به سایر زبانه‌ها
const channel = new BroadcastChannel("auth");
channel.postMessage({ type: "logout" });
channel.close();
}
// تنظیم BroadcastChannel برای گوش دادن به پیام‌های خروج
const channel = new BroadcastChannel("auth");
channel.onmessage = (event) => {
if (event.data?.type === "logout") {
logout(); // اجرای تابع خروج در صورت دریافت پیام
}
};
// افزودن شنونده رویداد به دکمه خروج
document.getElementById("logoutButton").addEventListener("click", logout);
توضیح عملکرد کد
در این کد، یک کانال BroadcastChannel به نام "auth" ایجاد می‌شود که تمام زبانه‌ها به آن متصل هستند. وقتی کاربر روی دکمه "خروج از حساب" کلیک می‌کند، تابع logout فراخوانی می‌شود. این تابع پیام خروج را از طریق متد postMessage به کانال ارسال می‌کند و سپس کانال را می‌بندد. در عین حال، هر زبانه به پیام‌های دریافتی از کانال گوش می‌دهد و اگر پیامی با نوع "logout" دریافت کند، تابع logout را اجرا می‌کند. این فرآیند باعث می‌شود تمام زبانه‌های باز به‌صورت خودکار از حساب خارج شوند و پیام "شما از حساب خارج شدید" را نمایش دهند.
این پیاده‌سازی ساده و مستقل از چارچوب است و توسعه‌دهندگان .NET می‌توانند آن را به‌راحتی در برنامه‌های وب خود، مانند صفحات استاتیک یا برنامه‌های Blazor با جاوااسکریپت خالص، ادغام کنند.
ارتباط با توسعه .NET
توسعه‌دهندگان .NET که از فناوری‌هایی مانند Blazor برای توسعه وب استفاده می‌کنند، می‌توانند از BroadcastChannel API برای بهبود تجربه کاربری در برنامه‌های تحت وب خود بهره ببرند. برای مثال، در یک برنامه Blazor WebAssembly، می‌توان از این API در کنار جاوااسکریپت خالص برای همگام‌سازی حالت‌های کاربر بین زبانه‌ها استفاده کرد. این قابلیت به‌ویژه در برنامه‌هایی که از احراز هویت مبتنی بر توکن (Token-Based Authentication) استفاده می‌کنند، مفید است، زیرا می‌تواند جایگزین روش‌های پیچیده‌تر مانند SignalR برای سناریوهای ساده شود.
نتیجه‌گیری
BroadcastChannel API یک ابزار قدرتمند و در عین حال ساده برای ایجاد ارتباط بلادرنگ بین زبانه‌ها و فرآیندهای مرورگر است. این API با استفاده از معماری ارتباط بین‌فرآیندی مرورگر، امکان همگام‌سازی سریع و کارآمد را بدون نیاز به سرور فراهم می‌کند. اگرچه محدودیت‌هایی مانند عدم پشتیبانی از ارتباط بین‌دامنه‌ای دارد، اما برای سناریوهای درون‌دامنه‌ای مانند همگام‌سازی وضعیت کاربر یا اطلاع‌رسانی بین زبانه‌ها بسیار مناسب است. توسعه‌دهندگان .NET، به‌ویژه کسانی که با Blazor یا سایر فناوری‌های وب کار می‌کنند، می‌توانند از این API برای ایجاد تجربه‌های کاربری یکپارچه‌تر استفاده کنند. با درک نحوه عملکرد این ابزار و کاربردهای عملی آن، می‌توانید برنامه‌های وب خود را هوشمندتر و پاسخ‌گوتر کنید.