JavaScript Academy · درس

دورة حياة الاتصال والأخطاء

تعاملوا مع أحداث الفتح والإغلاق والخطأ.

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

دورة الحياة الكاملة

ينتقل المقبس عبر الحالات CONNECTING ← OPEN ← CLOSING ← CLOSED. وتطابق هذه الانتقالات أربعة أحداث: open وmessage وerror وclose.

حدث onclose

يُطلَق onclose عند انتهاء الاتصال، سواء أكان الإنهاء سليمًا أم لا. ويحمل الحدث القيم code وreason وwasClean.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

رموز الإغلاق

تتضمن الرموز القياسية 1000 (إغلاق طبيعي)، و1001 (الطرف الآخر يغادر)، و1006 (إغلاق غير طبيعي من دون إطار إغلاق)، و1011 (خطأ في الخادم). أما الرموز من 4000 إلى 4999 فهي محددة من قِبل التطبيق.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

الإغلاق المتعمد

يبدأ socket.close(code, reason) إيقاف تشغيل سلسًا. استخدم 1000 للإغلاق الطبيعي؛ ويجب أن تكون سلسلة السبب أقصر من 123 بايتًا.

socket.close(1000, "user logged out");

حدث onerror

يُطلَق onerror عند حدوث أعطال. ولأسباب أمنية، يكون حدث الخطأ مقتضبًا عمدًا، إذ لا يحمل سببًا تفصيليًا. ويتبعه حدث close في معظم الحالات.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

التمييز بين الإغلاق السليم وغير الطبيعي

تكون قيمة event.wasClean هي true فقط عندما يتبادل الطرفان إطاري إغلاق. أما انقطاع الشبكة فينتج عنه wasClean: false والرمز 1006.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

تنظيف الموارد

عند الإغلاق، ألغِ المؤقتات (الخاصة بنبضات التحقق)، وارفض الطلبات المعلّقة، وحدّث حالة واجهة المستخدم كي يعكس التطبيق انقطاع الاتصال.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

إزالة المستمعين

إذا أرفقت معالجات باستخدام addEventListener، فأزلها عند الإغلاق لتجنّب التسريبات، خصوصًا عند إنشاء مقابس جديدة.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

حالة readyState أثناء الإيقاف

بين استدعاء close() وإطلاق حدث onclose، تكون قيمة readyState هي CLOSING (2). ويُتجاهل الإرسال خلال هذه الفترة.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

المهلات الناتجة عن خمول الخوادم

غالبًا ما تغلق الخوادم والوكلاء الاتصالات الخاملة بعد 30–60 ثانية. وتحافظ نبضات التحقق على نشاط الاتصال، وتتيح لك اكتشاف حالات الانقطاع بسرعة.

اكتشاف الاتصال الميت

اجمع بين نبضات التحقق ومراقب: إذا لم تصل أي استجابة pong خلال فترة محددة، فاعتبر المقبس متوقفًا وأغلقه لتحفيز إعادة الاتصال.

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

تحقق سريع

اختبر التعامل مع دورة الحياة.

مراجعة: دورة الحياة والأخطاء

تعاملت مع onclose وقيمه code/reason/wasClean، وتعلّمت رموز الإغلاق القياسية، وأغلقت الاتصال عمدًا، وتعاملت مع onerror المقتضب، ونظّفت المؤقتات والمستمعين، وأنشأت مراقبًا يعتمد على نبضات التحقق. التالي: استراتيجيات إعادة الاتصال.

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

هل درس «دورة حياة الاتصال والأخطاء» مجاني؟

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

ماذا ستتعلم في «دورة حياة الاتصال والأخطاء»؟

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

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

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

كم من الوقت يستغرق درس «دورة حياة الاتصال والأخطاء»؟

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

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

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

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

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