React Academy · درس

أساسيات WebSocket في المتصفح

افتح اتصالات WebSocket وأرسل الرسائل وعالج الأحداث باستخدام واجهة WebSocket الأصلية.

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

ما WebSocket؟

WebSocket هو بروتوكول يوفّر اتصالاً ثنائي الاتجاه بالكامل عبر اتصال TCP واحد. وبخلاف HTTP، يبقى الاتصال مفتوحاً، ما يتيح للخادم دفع البيانات إلى العميل في أي وقت.

فتح اتصال

أنشئوا كائناً من WebSocket باستخدام عنوان URL يبدأ بـ ws:// أو wss://. يُفتح الاتصال بشكل غير متزامن.

const ws = new WebSocket('wss://api.example.com/ws');

ws.onopen = () => {
  console.log('Connection established');
};

إرسال الرسائل

استخدموا ws.send() لإرسال البيانات. يمكنكم إرسال سلاسل نصية أو بيانات ثنائية (ArrayBuffer أو Blob). حوّلوا الكائنات إلى JSON قبل إرسالها.

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
  ws.send('Hello, server!');
};

استقبال الرسائل

يُطلَق حدث onmessage كلما أرسل الخادم بيانات. وتكون البيانات في event.data على شكل سلسلة نصية أو نوع ثنائي.

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};

معالجة الأخطاء والإغلاق

عالجوا الحدثين onerror وonclose. يتضمن حدث الإغلاق رمزاً وسبباً يوضّحان سبب انتهاء الاتصال.

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = (event) => {
  console.log(`Closed: ${event.code} ${event.reason}`);
  if (event.wasClean) {
    console.log('Clean disconnect');
  } else {
    console.log('Connection lost — will retry');
  }
};

رموز الإغلاق

رموز إغلاق WebSocket القياسية: 1000 = إغلاق عادي، 1001 = الطرف الآخر بصدد المغادرة، 1006 = إغلاق غير طبيعي (من دون إطار إغلاق)، 1008 = انتهاك السياسة.

readyState

توضّح ws.readyState حالة الاتصال الحالية: CONNECTING (0) أو OPEN (1) أو CLOSING (2) أو CLOSED (3). تحقّقوا دائماً من الحالة قبل الإرسال.

function sendSafely(ws, data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data));
  } else {
    console.warn('WebSocket not open, dropping message');
  }
}

إغلاق الاتصال

استدعوا ws.close(code, reason) لبدء إغلاق نظيف. يستقبل الخادم إطار الإغلاق ويمكنه الرد بإطاره الخاص.

// Normal close
ws.close(1000, 'User logged out');

// Close from a cleanup effect
return () => ws.close();

البيانات الثنائية

عيّنوا ws.binaryType = 'arraybuffer' (أو 'blob') لاستقبال الرسائل الثنائية. ويفيد ذلك مع الصوت أو الصور أو البروتوكولات المخصّصة.

ws.binaryType = 'arraybuffer';

ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('Binary message, bytes:', view.length);
  } else {
    console.log('Text message:', event.data);
  }
};

إشارة الحياة / Ping-Pong

لا تتيح WebSocket API في المتصفح إطارات ping، لكن يمكنكم تنفيذ إشارة حياة على مستوى التطبيق: أرسلوا رسالة ping كل N ثانية وانتظروا استجابة pong.

function startHeartbeat(ws) {
  return setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 30_000);
}

WebSocket مقابل Server-Sent Events

استخدموا WebSocket للاتصال ثنائي الاتجاه (مثل المحادثات والألعاب). واستخدموا Server-Sent Events (SSE) للتدفقات أحادية الاتجاه من الخادم إلى العميل (مثل الإشعارات والتغذية المباشرة)، إذ تعمل SSE عبر HTTP العادي وتعيد الاتصال تلقائياً.

تحقّق سريع

ما قيمة readyState في WebSocket التي تشير إلى أن الاتصال مفتوح وجاهز للإرسال؟

مراجعة

أنشئوا الاتصالات باستخدام new WebSocket(url)، وأرسلوا الكائنات المحوّلة إلى سلاسل JSON عبر ws.send()، وعالجوا أحداث onmessage وonerror وonclose. تحقّقوا من readyState قبل الإرسال، وأغلقوا الاتصال بطريقة سليمة باستخدام ws.close(1000).

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

هل درس «أساسيات WebSocket في المتصفح» مجاني؟

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

ماذا ستتعلم في «أساسيات WebSocket في المتصفح»؟

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

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

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

كم من الوقت يستغرق درس «أساسيات WebSocket في المتصفح»؟

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

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

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

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

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