اذهب إلى المحتوى

تتيح الواجهة البرمجية لقناة البث Broadcast Channel API التخاطب بين عدة نوافذ للمتصفح وتبويباته tabs وإطاراته المضمنة iframes وعمّال الويب web workers ضمنه، إذ توفر طريقة سهلة وفعالة لمزامنة البيانات والسلوك في مختلف سياقات المتصفح browser contexts للحصول على تطبيقات ويب أكثر تفاعلًا ومرونة.

سنتعرف على مفاهيم الواجهة البرمجية Broadcast Channel API، إضافة إلى استخدامها وتطبيقاتها على أرض الواقع، كما سنطبّق مثالًا عمليًا لبناء تطبيق بسيط يستخدم هذه الواجهة البرمجية ويرسل الرسائل بين عدة نوافذ وتبويبات في المتصفح.

مفهوم الواجهة البرمجية للبث Broadcast Channel API

تقدم الواجهة البرمجية لقناة البث Broadcast Channel آلية تخاطب بين عدة سياقات تشترك بنفس المستخدم والمتصفح والأصل origin وما نعنيه بالأصل هنا الموقع أو التطبيق، حيث تعتمد آلية عملها على مبدأ إنشاء قناة بث channel واحدة مشتركة يمكن أن تنضم إليها عدة سياقات أو تغادرها في أية لحظة. فعند انضمام تلك السياقات إلى قناة تصبح قادرة على إرسال الرسائل واستقبالها من خلال هذه القناة، تتيح لنا هذه الآلية تبادل البيانات وانتشار الأحداث ضمن تطبيقنا بسلاسة، وتنفي الحاجة إلى تقنيات التواصل المعقدة التي تجري عادة من جانب الخادم. فيما يلي لمحة بسيطة عن طريقة استخدام هذه الواجهة البرمجية.

لإنشاء قناة بث أو الانضمام إليها نكتب الكود التالي بلغة جافا سكريبت:

const bc = new BroadcastChannel("test_channel");

لإرسال رسالة عبر قناة البث نكتب التالي:

bc.postMessage("This is a test message");

لاستقبال الرسالة الواردة من قناة البث:

bc.onmessage = (event) => {
  console.log(event.data);
  // { method: "add", note: "This is a test message" }
};

إنشاء تطبيق Node.js

لننشئ تطبيق نود جي إس يستخدم الواجهة البرمجية Broadcast Channel API نبدأ أولاً بتجهيز الخادم على جهازنا المحلي أو على خدمة سحابية ما وندخل إليه عن طريق بروتوكول SSH، ثم نعدّ مشروعًا لتطبيق الويب الذي سننشئه. سنستخدم في مقالنا محرر النصوص نانو Nano لإنشاء ملفات المشروع على الخادم وتعديلها، كما سنعتمد جدار الحماية المبسَّط UFW للتحكم بحركة المرور التي سنسمح بمرورها من وإلى الخادم، وسنحدد باستخدامه المنفذ 8080 ليكون المنفذ الوحيد الذي يُسمَح بمرور البيانات الواردة إلى الخادم من خلاله.

سنستخدم لغة جافا سكريبت وبيئة Node.js لكتابة ملف index للتطبيق، وسنشغله بالاعتماد على خادم HTTP، علماً أن بإمكاننا استخدام أي نوع آخر من خوادم الويب لتحقيق النتيجة ذاتها.

  1. ننشئ مجلدًا خاصًا بالمشروع، وننتقل إليه
mkdir notes-app
cd notes-app
  1. ننشئ مشروع Node.js
npm init -y
  1. نثبّت حزمة http-server لإنشاء خادم الويب
npm install http-server
  1. ننشئ ملف HTML
nano index.html
  1. ننسخ الشيفرة البرمجية التالية ونلصقها في ملف index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Note-taking App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Note-taking App</h1>
    <div id="noteList"></div>
    <div id="noteForm">
      <label for="noteInput">New note</label>
      <input type="text" id="noteInput" placeholder="A note..." />
      <button id="addNoteButton">Add Note</button>
      <button id="resetNoteButton">Reset Notes</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>
  1. نحفظ الملف ونغلقه
  2. ننشئ ملف التنسيقات CSS
nano styles.css
  1. ننسخ الشيفرة البرمجية التالية ونلصقها في ملف styles.css
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}


h1 {
  color: #333;
  text-align: center;
}


#noteList {
  display: grid;
  row-gap: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
}


#noteList div {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px;
}


#noteForm {
  display: grid;
  column-gap: 10px;
  align-items: center;
  grid-template-columns: max-content 1fr max-content max-content;
}


#noteInput {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 16px;
}


button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
}


button:hover {
  background-color: #45a049;
}
  1. نحفظ الملف ونغلقه

تطبيق الواجهة البرمجية Broadcast Channel API

لننشئ الآن تطبيقًا للتواصل بين نوافذ و تبويبات المتصفح المختلفة ومزامنة البيانات بينها في الوقت الفعلي من خلال اتباع الخطوات التالية:

  1. ننشئ ملف بلغة جافا سكريبت JavaScript في المجلد notes-app
nano app.js
  1. ننسخ الشيفرة البرمجية التالية ونلصقها في ملف التطبيق app.js
const noteList = document.getElementById("noteList");
const noteInput = document.getElementById("noteInput");
const addNoteButton = document.getElementById("addNoteButton");
const resetNoteButton = document.getElementById("resetNoteButton");


let notes = [];


function renderNotes() {
  noteList.innerHTML = "";


  notes.forEach((note) => {
    const noteItem = document.createElement("div");
    noteItem.textContent = note;
    noteList.appendChild(noteItem);
  });
}


addNoteButton.addEventListener("click", () => {
  const newNote = noteInput.value.trim();


  if (newNote) {
    notes.push(newNote);
    renderNotes();
    noteInput.value = "";


    channel.postMessage({ action: "add", note: newNote });
  }
});


resetNoteButton.addEventListener("click", () => {
  notes = [];
  renderNotes();


  channel.postMessage({ action: "reset" });
});


const channel = new BroadcastChannel("notes-channel");


channel.addEventListener("message", (event) => {
  const { action, note } = event.data;


  if (action === "add") {
    notes.push(note);
    renderNotes();
  } else if (action === "reset") {
    notes = [];
    renderNotes();
  }
});
  1. نحفظ الملف ونغلقه
  2. نسمح بمرور طلبات الوصول connections الواردة إلى المنفذ 8080 من خلال التعليمة التالية
sudo ufw allow 8080
  1. نشغّل الخادم
npx http-server
  1. نفتح التطبيق من خلال الرابط http://<server-ip>:8080 ونفتح الآن التطبيق في نافذتي متصفح أو تبويبي متصفح جنبًا إلى جنب ونضيف ملاحظة لإحداهما، وسنجد أن الملاحظة ظهرت في النافذة الثانية دون الحاجة لتحديث الصفحة

add notes

بعدها، ننقر على زر Reset Notes لحذف كافة الملاحظات، سنجد أن الملاحظات حُذفَت من كلا النافذتين دون الحاجة للتحديث أيضًا.

reset notes

سنتعمق الآن في الشيفرة البرمجية المكتوبة في ملف app.js. تتيح لنا الدالة renderNotes إنشاء عنصر لكل ملاحظة نضيفها، وتُمكننا الدالة addNoteButton من إضافة ملاحظات إلى التطبيق، وتبثّ الدالة channel.postMessage إجراء الإضافة إلى النوافذ أو التبويبات الأخرى.

وبآلية مماثلة تتيح لنا الدالة resetNoteButton حذف كافة الملاحظات الموجودة، ثم تبثّ الدالة channel.postMessage إجراء الحذف إلى النوافذ أو التبويبات الأخرى. تُنشَأ في النهاية قناة بث BroadcastChannel جديدة باسم notes-channel تتيح التخاطب بين مختلف النوافذ أو التبويبات التي تشترك بالأصل ذاته، إذ ينصت مستمع الحدث event listener في القناة إلى الأحداث من نوع message ضمنها ويتخذ إجراء وفق المُدخلات المكتوبة فيه.

تطبيقات عملية على الواجهة البرمجية Broadcast Channel API

فيما يلي بعض الأمثلة والتطبيقات العملية لاستخدام تقنية الواجهة البرمجية لقناة البث:

  • في المواقع الإعلامية والإخبارية لمزامنة الموضع الذي وصلنا إليه في قراءة مقال بين عدة نوافذ
  • في منصات التواصل الاجتماعي لإبلاغ المستخدمين بالتحديثات أو الرسائل أو الإشعارات الجديدة في مختلَف النوافذ أو التبويبات
  • في التطبيقات الإنتاجية لتفعيل المزامنة الفورية للتغييرات التي تطرأ على المستندات أو الملفات بين عدة سياقات

الخاتمة

استعرضنا في مقالنا مفهوم الواجهة البرمجية لقناة البث Broadcast Channel API واستخدامها وتطبيقاتها العملية، وأنشأنا تطبيقًا بسيطًا متزامنًا لتدوين الملاحظات، وتعلمنا كيف نستفيد من هذه الواجهة البرمجية لإنشاء مواقع مترابطة تتواصل مختلف مكوناتها مع بعضها البعض بسلاسة.

ترجمة -وبتصرّف- للمقال Exploring the Broadcast Channel API for cross-tab communication.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...