Vue Academy · درس

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

‏new WebSocket(url)، وonopen/onmessage/onerror/onclose، وsend()، وreadyState

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

الوقت الفعلي في المتصفح

يعمل HTTP وفق نموذج الطلب والاستجابة: يطلب العميل، ويجيب الخادم، ثم يُغلق الاتصال. أما في الدردشة ولوحات المعلومات المباشرة والألعاب متعددة اللاعبين، فتحتاجون إلى أن يدفع الخادم البيانات من دون طلب مسبق.

يوفر بروتوكول WebSocket اتصالًا واحدًا طويل الأمد وثنائي الاتجاه بين المتصفح والخادم.

فتح اتصال

يوفر المتصفح مُنشئ WebSocket عامًا. مرّروا عنوان URL باستخدام المخطط ws:// (عادي) أو wss:// (TLS).

يبدأ إنشاء الكائن فورًا مصافحة الاتصال.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

معالج onopen

لا يصبح الاتصال جاهزًا فور إنشائه. يُطلَق حدث onopen بعد اكتمال المصافحة واستعداد المقبس لنقل البيانات.

أرسلوا رسالتكم الأولى من داخل onopen، وليس قبل ذلك مطلقًا.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

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

تصل البيانات الواردة عبر onmessage. وتوجد الحمولة في event.data، وتكون سلسلة نصية افتراضيًا.

ترسل معظم التطبيقات بيانات JSON، لذلك تحلّلوها مجددًا إلى كائن.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

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

استخدموا ws.send() للإرسال. تنقل WebSockets سلاسل نصية خامًا أو بيانات ثنائية، لذا شفّروا الكائنات باستخدام JSON.stringify أولًا.

يتفق الطرفان على بنية محددة — تتكون هنا من type بالإضافة إلى payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

رحلة ذهاب وإياب كاملة

يمنحكم جمع الفتح والإرسال والاستقبال عميل صدى مكتملًا. افتحوا المقبس، وأرسلوا عند فتحه، وسجّلوا كل ما يعود.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

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

يُطلَق حدث onclose عند انتهاء الاتصال — سواء استدعيتم ws.close() أو انقطعَت الشبكة. ويحمل الحدث code رقميًا وسلسلة reason.

يعني الرمز 1000 إغلاقًا طبيعيًا.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

معالجة الأخطاء

يُطلَق حدث onerror عند حدوث أعطال في النقل. ويحمل حدث الخطأ نفسه قدرًا محدودًا من التفاصيل عمدًا لأسباب أمنية؛ فتعاملوا معه على أنه إشارة إلى حدوث خطأ، مع احتمال وشيك للإغلاق.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

خاصية readyState

تُشير ws.readyState إلى رقم يحدد المرحلة التي يمر بها المقبس في دورة حياته. تحققوا منها دائمًا قبل الإرسال حتى لا تتسببوا في استثناء عند استخدام مقبس لم يُفتح بعد.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

الثوابت المسماة لـ readyState

بدلًا من الأرقام السحرية، استخدموا الثوابت الموجودة في فئة WebSocket. فهي أوضح بكثير من 0 أو 1 أو 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

تجميع كل ذلك في Vue

داخل مكوّن Vue، تنشئون المقبس عادةً في onMounted وتفككونه في onUnmounted. وتحدّث المعالجات المراجع التفاعلية التي يعرضها القالب.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

اختبار سريع

تحققوا من فهمكم لقيم readyState في WebSocket.

مراجعة

تعلّمتم في هذا الدرس ما يلي:

يبدأ new WebSocket(url) اتصالًا ثنائي الاتجاه باستخدام ws:// أو wss://.
يُطلَق onopen عندما يصبح المقبس جاهزًا؛ أرسلوا بعده فقط.
يوفر onmessage البيانات في event.data — حلّلوا JSON للحصول على كائن.
ينقل ws.send(JSON.stringify(msg)) البيانات.
يتولى onclose وonerror معالجة الإنهاء والأعطال.
تكون قيم readyState هي 0 CONNECTING، و1 OPEN، و2 CLOSING، و3 CLOSED.

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

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

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

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

‏new WebSocket(url)، وonopen/onmessage/onerror/onclose، وsend()، وreadyState تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

أساسيات WebSocket في المتصفح
عميل Socket.io مع Vue
بناء مكوّن محادثة فورية
‏useWebSocket Composable مع إعادة الاتصال

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