إعلان هام!
لقد بدأت رحلتي التعليمية اليومية حول تصميم نظام الواجهة الأمامية . وسوف أقوم بمشاركة الأفكار من كل وحدة في المدونات. إذًا، ها هي البداية، وهناك الكثير في المستقبل!

في هذه المدونة، سنستكشف آليات مختلفة لجلب البيانات الأساسية لتصميم نظام الواجهة الأمامية، بما في ذلك الاستقصاء القصير، والاستقصاء الطويل، وWebSockets، والأحداث المرسلة من الخادم (SSE)، وخطافات الويب. تتناول كل تقنية احتياجات محددة لتوصيل البيانات من وإلى العميل والخادم، ويعد فهمها أمرًا بالغ الأهمية لتصميم تطبيقات ويب قابلة للتطوير وفي الوقت الفعلي.

1. الاقتراع القصير

الاستقصاء القصير هو أسلوب يقوم فيه العميل بإرسال الطلبات بشكل متكرر إلى الخادم على فترات زمنية منتظمة للتحقق من وجود تحديثات.

setInterval(async () => {
  const response = await fetch('/api/get-posts');
  const data = await response.json();
  // Update UI with new data
}, 5000); // Poll every 5 seconds

• اتصال مباشر قصير
• لا يوجد ثبات للبيانات
• موارد أقل
• تحميل السيرفر بسبب الطلبات المتكررة
• زيادة استخدام النطاق الترددي

على سبيل المثال - شريط سوق الأوراق المالية، وخلاصات وسائل التواصل الاجتماعي

2. الاقتراع الطويل

الاستقصاء الطويل هو تحسين على الاستقصاء القصير، حيث يرسل العميل طلبا، ويبقي الخادم الاتصال مفتوحا حتى يكون لديه بيانات جديدة للعودة.

من الواجهة الخلفية، سيتم إرسال الرد فقط عند تحديث البيانات، وحتى ذلك الحين سيحتفظ بالطلب. إذا لم يكن هناك تحديث لفترة طويلة، فستتم معالجة المهلة.

جانب العميل

async function subscribe() {
  let response = await fetch("/subscribe");

  if (response.status == 502) {
    // Status 502 is a connection timeout error, let's reconnect
    await subscribe();
  } else if (response.status != 200) {
    // An error - let's show it
    showMessage(response.statusText);
    // Reconnect in one second
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
    // Get and show the message
    let message = await response.text();
    showMessage(message);
    // Call subscribe() again to get the next message
    await subscribe();
  }
}

subscribe();

• اتصال واحد طويل الأمد
• يوفر تحديثات في الوقت الفعلي مع طلبات أقل من الاستقصاء القصير.
• يقلل من نقل البيانات غير الضرورية في حالة عدم وجود تحديثات.
• يمكن أن يظل الاتصال مفتوحًا لفترات طويلة، مما يزيد من حمل الخادم.

على سبيل المثال- محادثات دعم العملاء المباشرة

3. مآخذ الويب

تسمح WebSockets بالاتصال المزدوج الكامل بين العميل والخادم، مما يجعلها الطريقة الأكثر فعالية لنقل البيانات في الوقت الفعلي.

يفتح العميل اتصال WebSocket مع الخادم ويمكن لكل من العميل والخادم إرسال رسائل لبعضهما البعض عبر هذا الاتصال الفردي.

webSocket = new WebSocket(url, protocols);

// Send message
webSocket.send("Here's some text that the server is urgently awaiting!");

// Receive message
webSocket.onmessage = (event) => {
  console.log(event.data);
};

• الاتصال المستمر ثنائي الاتجاه
• مكتبات متعددة لتنفيذه - ws، وsocket.io وما إلى ذلك.
• فعالة للتحديثات عالية التردد مع حمل منخفض
• التحديات - الحفاظ على الاتصال بخادم واحد، والتعامل مع الفشل والتوسع، واحتلال الموارد.

على سبيل المثال- تطبيقات الدردشة المباشرة، الألعاب متعددة اللاعبين عبر الإنترنت

4. الأحداث المرسلة من الخادم (SSE)

يوفر SSE دفقًا أحادي الاتجاه من التحديثات من الخادم إلى العميل عبر اتصال HTTP.

const evtSource = new EventSource("ssedemo.php");

evtSource.onmessage = (event) => {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = `message: ${event.data}`;
  eventList.appendChild(newElement);
};

• يعيش التواصل أحادي الاتجاه
• اتصال HTTP واحد
• التحديات - استخدام الموارد وتوافق المتصفح والسلوك على علامات التبويب غير النشطة

على سبيل المثال - الخلاصات والإشعارات

5. الخطافات الإلكترونية

خطافات الويب هي آلية اتصال من خادم إلى خادم حيث يرسل الخادم البيانات إلى عنوان URL محدد مسبقًا عند وقوع حدث ما. لا يحتاج العميل إلى الاستمرار في التحقق من الخادم للحصول على التحديثات.

مشهور بتفعيل الإجراءات بين الأنظمة، مثل إشعارات الدفع، أو أحداث GitHub، أو عمليات تكامل خدمات الجهات الخارجية.

خاتمة

يعتمد اختيار طريقة الاتصال الصحيحة على متطلبات التطبيق الخاص بك. تعد WebSockets وSSE مثالية للبيانات في الوقت الفعلي وتدفق البيانات، بينما يوفر الاستقصاء الطويل توازنًا بين الأداء وسهولة الاستخدام. يعد الاستقصاء القصير حلاً بسيطًا للتحديثات النادرة ولكنه يمكن أن يستهلك الكثير من الموارد، كما أن خطافات الويب مثالية للإشعارات من خادم إلى خادم.

كل تقنية لها مزاياها وقيودها. يمكن أن يساعدك فهم هذه الأمور في اتخاذ قرارات مستنيرة لإنشاء تطبيقات ويب فعالة وسريعة الاستجابة.

هذه المدونة مفتوحة للاقتراحات والمناقشات!