Vue Academy · पाठ

useSubscription के साथ रीयल-टाइम सब्सक्रिप्शन

WebSocket लिंक सेटअप, useSubscription() और सब्सक्रिप्शन डेटा को प्रतिक्रियाशील स्थिति में मिलाना

पाठ 4, कुल 4 में से13 चरण

useSubscription के साथ रीयल-टाइम सब्सक्रिप्शन, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

सदस्यताओं के साथ रीयल-टाइम

GraphQL की सदस्यताएँ स्थायी कनेक्शन के माध्यम से सर्वर से क्लाइंट तक डेटा भेजती हैं। जहाँ क्वेरी एक बार डेटा खींचती हैं, वहीं सदस्यताएँ अपडेट की धारा भेजती हैं — चैट, लाइव फ़ीड और सूचनाओं के लिए बिल्कुल उपयुक्त।

WebSocket ट्रांसपोर्ट

सदस्यताओं को लंबे समय तक बने रहने वाले कनेक्शन की आवश्यकता होती है, इसलिए वे एचटीटीपी के बजाय WebSockets का उपयोग करती हैं। 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'
}))

ट्रांसपोर्ट की समस्या

क्वेरीज़ और म्यूटेशन अब भी एचटीटीपी के माध्यम से जाने चाहिए, जबकि सदस्यताएँ WebSocket के माध्यम से जानी चाहिए। आप हर चीज़ के लिए एक ही लिंक का उपयोग नहीं कर सकते — आपको ऑपरेशन के प्रकार के आधार पर ट्रैफ़िक को विभाजित करना होगा।

लिंक्स को विभाजित करना

split फ़ंक्शन हर ऑपरेशन को उसके मार्ग पर भेजता है: सदस्यताओं को WebSocket लिंक पर और बाकी सभी को एचटीटीपी लिंक पर। यह काम पार्स किए गए ऑपरेशन डेफ़िनिशन के आधार पर होता है।

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
)

स्प्लिट लिंक को क्लाइंट में जोड़ना

साधारण uri के बजाय संयुक्त link को Apollo क्लाइंट में पास कीजिए। अब क्लाइंट जानता है कि हर ऑपरेशन को किस मार्ग पर भेजना है।

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

useSubscription की मूल बातें

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 } }'
))

हर पुश को संभालना

हर पुश किया गया इवेंट आते ही उस पर प्रतिक्रिया देने के लिए 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' }
)

सदस्यताएँ बनाम पोलिंग

पोलिंग एक टाइमर पर क्वेरी को फिर से लाती है; सदस्यताएँ केवल कुछ बदलने पर डेटा भेजती हैं। वास्तविक रीयल-टाइम डेटा के लिए सदस्यताएँ अधिक प्रभावी हैं, जबकि लगभग रीयल-टाइम पर्याप्त होने पर पोलिंग सरल रहती है।

त्वरित जाँच

सदस्यताओं के अपने ज्ञान की जाँच कीजिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

आपने रीयल-टाइम सदस्यताएँ सीखीं:

सदस्यताएँ GraphQLWsLink (ग्राफ़क्यूएल-डब्ल्यूएस) के माध्यम से WebSockets पर डेटा भेजती हैं।
सदस्यताओं को WS पर और क्वेरीज़/म्यूटेशन को एचटीटीपी पर भेजने के लिए split() का उपयोग कीजिए।
useSubscription प्रतिक्रियाशील result लौटाता है और हर पुश के लिए onResult उपलब्ध कराता है।
लाइव सूची के लिए पुश किए गए इवेंट्स को प्रतिक्रियाशील ऐरे में जोड़ते जाइए।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “useSubscription के साथ रीयल-टाइम सब्सक्रिप्शन” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “useSubscription के साथ रीयल-टाइम सब्सक्रिप्शन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“useSubscription के साथ रीयल-टाइम सब्सक्रिप्शन” में मैं क्या सीखूँगा?

WebSocket लिंक सेटअप, useSubscription() और सब्सक्रिप्शन डेटा को प्रतिक्रियाशील स्थिति में मिलाना आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“useSubscription के साथ रीयल-टाइम सब्सक्रिप्शन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Vue 3 में Apollo Client सेटअप
डेटा फ़ेचिंग के लिए useQuery
डेटा बदलने के लिए useMutation
useSubscription के साथ रीयल-टाइम सब्सक्रिप्शन

← Vue Academy पर वापस जाएँ