تست ارتباط آنلاین دو صفحه

جاوااسکریپت: پل ارتباطی صفحات وب

جاوااسکریپت (JavaScript) یک زبان برنامه‌نویسی قدرتمند و همه‌کاره است که به وب‌سایت‌ها جان می‌بخشد. برخلاف HTML که ساختار صفحه را می‌سازد و CSS که ظاهر آن را زیبا می‌کند، جاوااسکریپت مسئول تعاملات، محاسبات و ارتباطات زنده در مرورگر است. این زبان به توسعه‌دهندگان اجازه می‌دهد تا بدون نیاز به رفرش کردن صفحه، داده‌ها را بین المان‌های مختلف جابجا کنند و تجربه‌ای پویا و تعاملی برای کاربران ایجاد نمایند.

در این مثال، ما از یک تکنیک پیشرفته به نام BroadcastChannel استفاده کرده‌ایم تا دو صفحه وبلاگ (صفحه ۱ و صفحه ۲) را بدون نیاز به سرور به هم متصل کنیم. کد بالا یک شمارنده تعاملی ایجاد می‌کند که با کلیک روی دکمه، عدد را افزایش داده و بلافاصله آن را به یک کانال ارتباطی ارسال می‌کند. سپس منتظر می‌ماند تا صفحه دوم (که در پس‌زمینه در حال گوش دادن است) این عدد را پردازش کرده و پاسخ نهایی را بازگرداند. این فرآیند به صورت آنی و بدون بارگذاری مجدد صفحه انجام می‌شود.

(برای تست باید همزمان 2 صفحه آنلاین باشند. وقتی هر دو صفحه را باز کردید دکمه ی زیر را فشار بدهید و در صفحه ی دوم نیز تغییر را مشاهده کنید. صفحه ی 2

تشریح المان‌ها و ویژگی‌های استفاده شده در کد:

• BroadcastChannel API: هسته اصلی این کد است. این ویژگی مرورگر به ما اجازه می‌دهد یک کانال ارتباطی به نام test_v3_channel بسازیم که صفحات مختلف یک دامنه را به هم متصل می‌کند.
• postMessage و onmessage: این دو متد مسئول ارسال و دریافت داده‌ها هستند. postMessage داده‌ی عدد را به کانال می‌فرستد و onmessage در سمت دیگر، پیام دریافتی را شناسایی و پردازش می‌کند.
• CSS استایل‌دهی: از ویژگی‌هایی مثل border-radius برای گرد کردن گوشه‌ها، box-shadow برای ایجاد عمق دکمه و رنگ‌های گرم (#FF5722) برای جلب توجه استفاده شده است. فونت Tahoma نیز برای خوانایی بهتر متن فارسی انتخاب شده است.
• مدیریت وضعیت (State Management): متغیر currentNumber وضعیت فعلی شمارنده را نگه می‌دارد و توابع document.getElementById برای به‌روزرسانی لحظه‌ای متن‌ها و رنگ‌ها در صفحه استفاده شده‌اند.