Vue Academy · درس

الاشتراكات الفورية باستخدام useSubscription

إعداد رابط WebSocket، واستخدام useSubscription()، ودمج بيانات الاشتراك في حالة تفاعلية

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

الوقت الفعلي باستخدام الاشتراكات

تدفع الاشتراكات في GraphQL البيانات من الخادم إلى العميل عبر اتصال دائم. فبينما تجلب الاستعلامات البيانات مرة واحدة، تبث الاشتراكات التحديثات — مما يجعلها مناسبة جدًا للدردشة والتغذيات المباشرة والإشعارات.

نقل البيانات عبر WebSocket

تحتاج الاشتراكات إلى اتصال طويل الأمد، ولذلك تستخدم WebSockets بدلًا من HTTP. وتوفر مكتبة graphql-ws البروتوكول الحديث عبر GraphQLWsLink.

npm install graphql-ws

إنشاء رابط WebSocket

غلّفوا عميل graphql-ws داخل GraphQLWsLink يشير إلى نقطة نهاية الاشتراك wss://.

import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'

const wsLink = new GraphQLWsLink(createClient({
  url: 'wss://api.example.com/graphql'
}))

مشكلة نقل البيانات

ينبغي أن تظل الاستعلامات وعمليات mutation تمر عبر HTTP، بينما تمر الاشتراكات عبر WebSocket. لا يمكنكم استخدام رابط واحد لكل شيء — بل تحتاجون إلى تقسيم حركة المرور حسب نوع العملية.

تقسيم الروابط

توجّه دالة split كل عملية: الاشتراكات إلى رابط WebSocket، وكل ما عداها إلى رابط HTTP، وذلك استنادًا إلى تعريف العملية الذي جرى تحليله.

import { split, HttpLink } from '@apollo/client/core'
import { getMainDefinition } from '@apollo/client/utilities'

const httpLink = new HttpLink({ uri: '/graphql' })

const link = split(
  ({ query }) => {
    const def = getMainDefinition(query)
    return def.kind === 'OperationDefinition' && def.operation === 'subscription'
  },
  wsLink,
  httpLink
)

إدماج الرابط المقسّم في العميل

مرّروا link المدمج إلى عميل Apollo بدلًا من uri عادي. والآن يعرف العميل كيفية توجيه كل عملية.

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

أساسيات useSubscription

يفتح composable useSubscription البث ويعيد حالة تفاعلية. وكما هو الحال مع useQuery، فإنه يوفر result وloading وerror.

import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { result } = useSubscription(gql(
  'subscription { messageAdded { id text } }'
))

معالجة كل دفعة

استخدموا hook onResult للتفاعل مع كل حدث يُدفَع عند وصوله — فهذا هو المكان الطبيعي لمعالجة البيانات المتدفقة.

const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
  console.log('New message', res.data.messageAdded)
})

الإضافة إلى مصفوفة تفاعلية

من الأنماط الشائعة الاحتفاظ بمصفوفة تفاعلية محلية وإلحاق كل حدث جديد بها، حتى يعرض القالب قائمة مباشرة ومتنامية.

const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
  messages.value.push(res.data.messageAdded)
})

متغيرات الاشتراك

تقبل الاشتراكات المتغيرات تمامًا مثل الاستعلامات — فعلى سبيل المثال، يمكنكم الاشتراك في رسائل غرفة دردشة واحدة.

useSubscription(
  gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
  { room: 'general' }
)

الاشتراكات مقابل الاستطلاع

يعيد الاستطلاع جلب الاستعلام وفق مؤقت، بينما تدفع الاشتراكات البيانات فقط عند حدوث تغيير. وتكون الاشتراكات أكثر كفاءة للبيانات الفعلية في الوقت الحقيقي، في حين يكون الاستطلاع أبسط عندما يكون التحديث شبه الفوري كافيًا.

اختبار سريع

اختبروا معرفتكم بالاشتراكات.

مراجعة

تعلّمتم الاشتراكات الفعلية في الوقت الحقيقي:

تدفع الاشتراكات البيانات عبر WebSockets باستخدام GraphQLWsLink (graphql-ws).
استخدموا split() لإرسال الاشتراكات عبر WS والاستعلامات وعمليات mutation عبر HTTP.
يعيد useSubscription نتيجة تفاعلية مع onResult لكل دفعة.
ألحقوا الأحداث المدفوعة بمصفوفة تفاعلية لإنشاء قائمة مباشرة.

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

هل درس «الاشتراكات الفورية باستخدام useSubscription» مجاني؟

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

ماذا ستتعلم في «الاشتراكات الفورية باستخدام useSubscription»؟

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

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

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

كم من الوقت يستغرق درس «الاشتراكات الفورية باستخدام useSubscription»؟

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

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

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

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

إعداد Apollo Client في Vue 3
‏useQuery لجلب البيانات
‏useMutation لتغيير البيانات
الاشتراكات الفورية باستخدام useSubscription

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