Vue Academy · पाठ

पुनःकनेक्शन वाला useWebSocket कंपोज़ेबल

WebSocket को कंपोज़ेबल में लपेटना, घातीय बैकऑफ़ के साथ स्वचालित पुनःकनेक्शन और स्थिति ट्रैक करना

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

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

WebSockets को कंपोज़ेबल में लपेटना

कॉम्पोनेंट्स में अलग-अलग जगहों पर किया गया कच्चा WebSocket प्रबंधन जल्दी उलझ जाता है। useWebSocket कंपोज़ेबल कनेक्शन की स्थिति, पुनः कनेक्शन और संदेश प्रबंधन को एक जगह केंद्रित करता है—और आप इसे हर जगह फिर से उपयोग कर सकते हैं।

हम इसे एक-एक हिस्से करके बनाएँगे।

Ref से स्थिति ट्रैक करना

कनेक्शन की स्थिति को प्रतिक्रियाशील status ref के रूप में सामने रखिए, ताकि UI "कनेक्ट हो रहा है", "खुला है" या "बंद है" बैज दिखा सके।

import { ref } from "vue"

export function useWebSocket(url) {
  const status = ref("CLOSED") // CONNECTING | OPEN | CLOSED
  // ...
  return { status }
}

connect फ़ंक्शन

सॉकेट खोलने की प्रक्रिया को एक आंतरिक connect फ़ंक्शन में समाहित कीजिए, ताकि बाद में पुनः कनेक्ट करने के लिए इसे फिर कॉल कर सकें। हर जीवनचक्र घटना पर status अपडेट कीजिए।

let ws
function connect() {
  status.value = "CONNECTING"
  ws = new WebSocket(url)
  ws.onopen = () => { status.value = "OPEN" }
  ws.onclose = () => { status.value = "CLOSED"; scheduleReconnect() }
}

बढ़ती देरी के साथ पुनः कनेक्शन

बहुत तेज़ लूप में तुरंत पुनः कनेक्ट करने से सर्वर पर अत्यधिक भार पड़ता है। एक्सपोनेंशियल बैकऑफ़ का उपयोग कीजिए: हर असफल प्रयास के बाद अधिक देर तक प्रतीक्षा कीजिए, लेकिन एक निर्धारित अधिकतम सीमा तक।

let attempts = 0
function scheduleReconnect() {
  attempts++
  const delay = Math.min(1000 * 2 ** attempts, 30000)
  setTimeout(connect, delay)
}

सफलता पर बैकऑफ़ रीसेट करना

कनेक्शन सफल हो जाने पर प्रयासों की गिनती रीसेट कर दीजिए, ताकि अगला डिस्कनेक्शन लंबी देरी से नहीं, बल्कि शुरुआत से बैकऑफ़ शुरू करे।

ws.onopen = () => {
  status.value = "OPEN"
  attempts = 0
  flushQueue()
}

डिस्कनेक्ट होने पर संदेशों की कतार

यदि सॉकेट बंद होने के दौरान उपयोगकर्ता संदेश भेजता है, तो संदेश खोना नहीं चाहिए। भेजे जाने वाले संदेशों को एक कतार में अस्थायी रूप से रखिए और कनेक्शन खुलने पर उन्हें भेज दीजिए।

const queue = []
function send(data) {
  const payload = JSON.stringify(data)
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(payload)
  } else {
    queue.push(payload)
  }
}

कतार खाली करना

सॉकेट खुलने पर कतार में जमा हुई हर चीज़ को निकाल दीजिए। क्रम बनाए रखने के लिए आइटम्स को आगे से एक-एक करके हटाइए।

function flushQueue() {
  while (queue.length && ws.readyState === WebSocket.OPEN) {
    ws.send(queue.shift())
  }
}

टाइप किए गए संदेश हैंडलर

उपयोगकर्ताओं को प्रत्येक संदेश type के लिए अलग हैंडलर रजिस्टर करने दीजिए। कॉलबैक को एक मैप में रखिए और आने वाले प्रत्येक फ़्रेम पर संदेश के प्रकार के आधार पर उन्हें भेजिए।

const handlers = {}
function on(type, cb) { handlers[type] = cb }

// inside connect:
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data)
  if (handlers[msg.type]) handlers[msg.type](msg.payload)
}

onUnmounted में सफ़ाई

कंपोज़ेबल टाइमर और सॉकेट का स्वामी है। जिस कॉम्पोनेंट में इसका उपयोग हो रहा है, उसके अनमाउंट होने पर इन्हें बंद कर दीजिए, ताकि दृश्य हट जाने के बाद पुनः कनेक्शन चलता न रहे।

import { onUnmounted } from "vue"

let reconnectTimer
onUnmounted(() => {
  clearTimeout(reconnectTimer)
  if (ws) ws.close(1000, "component unmounted")
})

जानबूझकर बंद करने के बाद पुनः कनेक्शन से बचना

आपकी अपनी सफ़ाई प्रक्रिया से किया गया साफ़-सुथरा क्लोज़ (कोड 1000) पुनः कनेक्शन शुरू नहीं करना चाहिए। intentional फ़्लैग ट्रैक कीजिए और इसके सेट होने पर शेड्यूलिंग छोड़ दीजिए।

let intentional = false
function close() { intentional = true; ws.close(1000) }

ws.onclose = () => {
  status.value = "CLOSED"
  if (!intentional) scheduleReconnect()
}

पूरा कंपोज़ेबल ढाँचा

अब सब कुछ एक साथ आता है: निर्माण के समय कनेक्ट करना, status, send और on सामने रखना, कनेक्शन बंद होने पर कतार में रखना, बैकऑफ़ के साथ पुनः कनेक्ट करना और अपने-आप सफ़ाई करना।

export function useWebSocket(url) {
  const status = ref("CLOSED")
  // connect, scheduleReconnect, send, on, flushQueue, cleanup...
  connect()
  return { status, send, on, close }
}

// usage:
// const { status, send, on } = useWebSocket("wss://...")

त्वरित जाँच

पुनः कनेक्शन रणनीति की अपनी समझ जाँचिए।

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

पुनरावलोकन

आपने एक मज़बूत useWebSocket कंपोज़ेबल बनाया:

एक status ref UI के लिए CONNECTING / OPEN / CLOSED को दर्शाता है।
एक्सपोनेंशियल बैकऑफ़ के साथ सीमित पुनः कनेक्शन कीजिए और सफलता पर गिनती रीसेट कीजिए।
डिस्कनेक्ट होने पर भेजे जाने वाले संदेशों को कतार में रखिए और कनेक्शन खुलने पर उन्हें भेज दीजिए।
आने वाले फ़्रेम को प्रत्येक प्रकार के हैंडलर कॉलबैक तक भेजिए।
onUnmounted में टाइमर और सॉकेट की सफ़ाई कीजिए और जानबूझकर बंद करने के बाद पुनः कनेक्शन छोड़ दीजिए।

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

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

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

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

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

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

क्या “पुनःकनेक्शन वाला useWebSocket कंपोज़ेबल” पाठ निःशुल्क है?

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

“पुनःकनेक्शन वाला useWebSocket कंपोज़ेबल” में मैं क्या सीखूँगा?

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

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

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

“पुनःकनेक्शन वाला useWebSocket कंपोज़ेबल” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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