JavaScript Academy · درس

استراتيجيات إعادة الاتصال

أعيدوا الاتصال بشكل موثوق بعد انقطاعه.

استراتيجيات إعادة الاتصال درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

لماذا نعيد الاتصال؟

الشبكات غير موثوقة؛ فقد ينقطع اتصال Wi-Fi، أو يدخل الحاسوب المحمول في وضع السكون، أو يعاد تشغيل الخوادم. يكتشف عميل WebSocket المتين انقطاع الاتصال ويعيد إنشاءه تلقائيًا، حتى تظل تجربة المستخدم سلسة.

إعادة الاتصال الساذجة

يعيد أبسط أسلوب فتح الاتصال فور إغلاقه. لكن الخطر هو أنه إذا كان الخادم متوقفًا، فسيغرقه بالطلبات في حلقة متقاربة بلا توقف.

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

تأخير ثابت

تُعد إضافة تأخير ثابت ألطف، لكنها لا تزال ترسل تدفقًا منتظمًا من المحاولات، وقد تزامن بين عدة عملاء، ما يؤدي إلى ظاهرة القطيع الهائج.

socket.onclose = () => {
  setTimeout(connect, 3000);
};

التراجع الأسي

ضاعف مدة الانتظار بعد كل محاولة فاشلة: ثانية واحدة، وثانيتان، و4 ثوانٍ، و8 ثوانٍ… مع وضع حد أقصى. يؤدي ذلك إلى توزيع عمليات إعادة المحاولة وتخفيف الضغط عن الخادم المتعثر.

let attempt = 0;
function reconnect() {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  attempt++;
  setTimeout(connect, delay);
}

إضافة العشوائية

غيّر التأخير عشوائيًا بدرجة بسيطة حتى لا يعيد آلاف العملاء الاتصال في اللحظة نفسها. وتختار العشوائية الكاملة قيمة عشوائية بين 0 والحد الأقصى المحسوب.

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

إعادة الضبط عند النجاح

عند إطلاق onopen، أعد ضبط عدّاد المحاولات حتى يبدأ التراجع من جديد عند انقطاع الاتصال التالي.

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

عميل كامل لإعادة الاتصال

اجمع الأجزاء معًا: اتصل، وأعد الضبط عند الفتح، واستخدم التراجع عند الإغلاق.

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

مراعاة حالتي الاتصال وعدم الاتصال

استمع إلى أحداث الاتصال وعدم الاتصال في المتصفح. أوقف إعادة الاتصال مؤقتًا أثناء عدم الاتصال، ونفّذ محاولة فورية عند عودة الاتصال.

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

تحديد عدد المحاولات

يمكنك اختياريًا وضع حد أقصى لعدد عمليات إعادة المحاولة، وإبلاغ المستخدم بفشل دائم بدلًا من إعادة المحاولة إلى الأبد.

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

مزامنة الحالة بعد إعادة الاتصال

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

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

تجنّب المقابس المكررة

احمِ من فتح عدة مقابس إذا نُفّذ منطق إعادة الاتصال مرتين. تتبّع المقبس الحالي وتجاهل المعالجات القديمة.

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

تحقق سريع

اختبر تصميم إعادة الاتصال.

مراجعة: إعادة الاتصال

انتقلت من إعادة الاتصال الساذجة إلى التراجع الأسي مع العشوائية، وأعدت ضبط المحاولات عند النجاح، وراعيت أحداث الاتصال وعدم الاتصال، ووضعت حدًا لعمليات إعادة المحاولة، وأعدت مزامنة الحالة بعد إعادة الاتصال، وتجنّبت المقابس المكررة. أصبح عميلك الآن متينًا.

الأسئلة الشائعة

هل درس «استراتيجيات إعادة الاتصال» مجاني؟

نعم — نص درس «استراتيجيات إعادة الاتصال» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «استراتيجيات إعادة الاتصال»؟

أعيدوا الاتصال بشكل موثوق بعد انقطاعه. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «استراتيجيات إعادة الاتصال»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy