Vue Academy · درس

عميل Socket.io مع Vue

‏socket.io-client وio(url) وsocket.on/emit، وإنشاء حالة Vue تفاعلية من أحداث socket

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

لماذا Socket.IO؟

تُعد WebSockets الخام منخفضة المستوى. أما Socket.IO فهي مكتبة شائعة تضيف إعادة الاتصال التلقائية، ووسائل نقل بديلة، والغرف، وواجهة برمجة تطبيقات واضحة قائمة على الأحداث.

وتوفر حزمًا متوافقة للخادم والعميل؛ وسنركّز هنا على عميل المتصفح المستخدم داخل Vue.

تثبيت العميل

أضيفوا حزمة العميل إلى مشروع Vue الخاص بكم. فهي منفصلة عن حزمة الخادم.

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

الاتصال باستخدام io()

استدعوا io(url) لإنشاء مقبس والاتصال. وعلى خلاف WebSockets الخام، مرّروا عنوان URL وفق http(s):// — إذ تتولى Socket.IO التفاوض على وسيلة النقل نيابةً عنكم.

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

الاستماع باستخدام socket.on

تعتمد Socket.IO على الأحداث المسماة. استخدموا socket.on(name, handler) للتفاعل مع حدث صادر عن الخادم. ويتلقى المعالج أي حمولة أرسلها الخادم.

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

أحداث دورة الحياة المضمّنة

تُصدر Socket.IO أحداث دورة حياة خاصة بها يمكنكم الاستماع إليها: connect وdisconnect وconnect_error.

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

الإرسال باستخدام socket.emit

للإرسال، استدعوا socket.emit(name, payload). تختارون اسم الحدث، ويستمع الخادم إلى الاسم نفسه. ولا حاجة إلى ترميز JSON يدويًا — إذ تتولى Socket.IO إجراء التسلسل نيابةً عنكم.

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

مصفوفة رسائل تفاعلية

في Vue، احتفظوا بالرسائل الواردة في مصفوفة ref تفاعلية. ويضيف معالج socket.on الرسائل إليها، ثم يعيد القالب العرض تلقائيًا.

import { ref } from "vue"

const messages = ref([])

socket.on("message", (msg) => {
  messages.value.push(msg)
})

توصيل كل شيء في script setup

يتصل المكوّن النموذجي في onMounted، ويسجّل المستمعين، ويتيح دالة إرسال للقالب.

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

onMounted(() => {
  socket.on("message", (m) => messages.value.push(m))
})

function send(text) {
  socket.emit("send", { text })
}

تنظيف المستمعين

يظل المستمعون المسجّلون باستخدام socket.on مرتبطين. وإذا أُعيد تحميل المكوّن، فقد تتراكم معالجات مكررة. أزيلوها باستخدام socket.off عند تفكيك المكوّن.

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

قطع الاتصال في onUnmounted

عند تدمير المكوّن، أغلقوا الاتصال باستخدام socket.disconnect() حتى لا تتركوا مقبسًا مفتوحًا يتسرب عبر عمليات الانتقال.

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

إقرارات الاستلام

من الميزات المفيدة في Socket.IO: مرّروا دالة رد اتصال بوصفها الوسيط الأخير في emit، وسيتمكن الخادم من استدعائها لتأكيد الاستلام. وهذا مفيد جدًا لتجربة مستخدم توضّح أن "الرسالة تم تسليمها".

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

اختبار سريع

تحققوا من فهمكم لواجهة برمجة تطبيقات عميل Socket.IO.

مراجعة

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

يتصل io(url) من socket.io-client باستخدام عنوان URL وفق http(s).
يتفاعل socket.on(name, handler) مع أحداث الخادم المسماة.
يرسل socket.emit(name, payload) الأحداث؛ وتُجرى عملية التسلسل للحمولات تلقائيًا.
أضيفوا البيانات الواردة إلى مصفوفة ref تفاعلية ليعرضها القالب.
نظّفوا الموارد باستخدام socket.off وsocket.disconnect() داخل onUnmounted.

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

هل درس «عميل Socket.io مع Vue» مجاني؟

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

ماذا ستتعلم في «عميل Socket.io مع Vue»؟

‏socket.io-client وio(url) وsocket.on/emit، وإنشاء حالة Vue تفاعلية من أحداث socket تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «عميل Socket.io مع Vue»؟

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

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

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

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

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

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