JavaScript Academy · درس

فتح اتصال WebSocket

اتصلوا بخادم WebSocket.

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

ما هي WebSockets؟

توفّر WebSockets اتصالًا دائمًا وثنائي الاتجاه بالكامل بين المتصفح والخادم عبر اتصال TCP واحد. وعلى خلاف نموذج طلب/استجابة في HTTP، يمكن لأي من الطرفين إرسال رسائل في أي وقت، ما يجعلها مثالية للدردشة والتغذية المباشرة والألعاب.

مخططا ws وwss

تستخدم عناوين URL الخاصة بـ WebSocket‏ ws:// (غير مشفّرة) أو wss:// (مشفّرة باستخدام TLS). احرص دائمًا على تفضيل wss:// في بيئة الإنتاج، تمامًا كما تفعل مع https.

const url = "wss://example.com/socket";

إنشاء اتصال

أنشئ مقبسًا باستخدام new WebSocket(url). تبدأ المصافحة فورًا، ولا يصبح الاتصال جاهزًا حتى يُفتح.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

حدث onopen

يُطلَق onopen عند اكتمال المصافحة. عندها فقط يصبح إرسال البيانات آمنًا.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

البديل addEventListener

يمكنك استخدام addEventListener بدلًا من خصائص on* لإرفاق معالجات متعددة.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

حالة الاتصال readyState

تعرض readyState دورة حياة الاتصال: CONNECTING (0)، وOPEN (1)، وCLOSING (2)، وCLOSED (3).

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

البروتوكولات الفرعية

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

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

الأصل نفسه والمحتوى المختلط

لا يجوز لصفحة محمّلة عبر https فتح سوى اتصالات wss://؛ إذ يُحظر فتح ws:// باعتباره محتوى مختلطًا. خطّط لعناوين URL وفقًا لذلك.

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

اضبط binaryType على "blob" (القيمة الافتراضية) أو "arraybuffer" للتحكم في كيفية وصول الإطارات الثنائية.

socket.binaryType = "arraybuffer";

عميل بسيط

بتجميع الأجزاء معًا: افتح الاتصال، وسجّل حالته، ونظّف الموارد.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

مهلات الاتصال

لا تتضمن WebSockets مهلة مضمّنة للاتصال. استخدم مؤقتًا يغلق المقبس إذا لم يُطلَق onopen في الوقت المحدد.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

تحقق سريع

اختبر أساسيات الاتصال.

مراجعة: فتح اتصال

تعلّمت مخططي ws وwss، وأنشأت مقبسًا باستخدام new WebSocket، وتعاملت مع onopen، وتحققت من readyState، وتفاوضت على البروتوكولات الفرعية، وأضفت مهلة للاتصال. التالي: إرسال الرسائل واستقبالها.

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

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

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

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

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

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

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

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

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

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

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

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

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