React Academy · पाठ

React के साथ Socket.IO का उपयोग

React से Socket.IO सर्वर से कनेक्ट करें, इवेंट सुनें और हुक से संदेश भेजें।

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

React के साथ Socket.IO का उपयोग, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Socket.IO क्यों?

सॉकेट.IO, WebSockets के ऊपर रूम, नेमस्पेस, स्वचालित पुनःकनेक्शन और इवेंट-आधारित संदेश-व्यवस्था जोड़ता है, साथ ही एचटीटीपी लॉन्ग-पॉलिंग का फ़ॉलबैक भी देता है—यह सीधे WebSocket की तुलना में कहीं अधिक सुविधाजनक है।

क्लाइंट इंस्टॉल करना

सॉकेट.IO क्लाइंट पैकेज इंस्टॉल करें।

npm install socket.io-client

सॉकेट इंस्टेंस बनाना

कनेक्शन साझा रखने और हर रेंडर पर उसे दोबारा न बनाने के लिए रिएक्ट घटकों के बाहर io(url) कॉल करें। इसे एकल इंस्टेंस के रूप में निर्यात करें।

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

useEffect में कनेक्ट करना

घटक माउंट होने पर कनेक्ट करें और उसके अनमाउंट होने पर डिस्कनेक्ट करें, ताकि अनावश्यक रूप से बचे हुए कनेक्शन न रहें।

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

इवेंट सुनना

सदस्यता लेने के लिए socket.on('event', handler) का उपयोग करें। दोबारा रेंडर होने पर डुप्लिकेट हैंडलर बनने से रोकने के लिए क्लीनअप फ़ंक्शन में लिस्नर हटाएँ।

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

इवेंट भेजना

सर्वर को डेटा भेजने के लिए socket.emit('event', data) कॉल करें। अंतिम आर्गुमेंट के रूप में वैकल्पिक कॉलबैक (पावती) भी दिया जा सकता है।

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

कस्टम useSocket हुक

दोबारा उपयोग के लिए सॉकेट कनेक्शन का तर्क एक कस्टम हुक में समाहित करें, ताकि उसे कई घटकों में इस्तेमाल किया जा सके।

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

रूम और नेमस्पेस

जॉइन इवेंट भेजकर किसी रूम में शामिल हों; इसे सर्वर पर संभाला जाता है। कनेक्शन स्तर पर सॉकेट ट्रैफ़िक को अलग-अलग हिस्सों में बाँटने के लिए नेमस्पेस (io('/chat')) का उपयोग करें।

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

कनेक्शन स्थिति

connect, disconnect और connect_error इवेंट के माध्यम से कनेक्शन स्थिति पर नज़र रखें।

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

वॉलेटाइल प्रेषण

जहाँ कभी-कभार पैकेट खो जाना स्वीकार्य हो, वहाँ संदेशों के लिए socket.volatile.emit() का उपयोग करें, जैसे कर्सर की स्थितियाँ या गेम की स्थिति।

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

सॉकेट.IO बनाम सीधे WebSocket

सॉकेट.IO, WebSocket के ऊपर रूम प्रबंधन, नेमस्पेस, स्वचालित पुनःकनेक्शन और बाइनरी समर्थन जोड़ता है। यदि आपको न्यूनतम अतिरिक्त भार चाहिए या सर्वर सॉकेट.IO का समर्थन नहीं करता, तो सीधे WebSocket का उपयोग करें।

त्वरित जाँच

useEffect के क्लीनअप में सॉकेट इवेंट लिस्नर क्यों हटाने चाहिए?

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

पुनरावलोकन

io(url, { autoConnect: false }) से एकल socket इंस्टेंस बनाएँ। useEffect में कनेक्ट और डिस्कनेक्ट करें, क्लीनअप में हमेशा लिस्नर हटाएँ, और socket.emit() से इवेंट भेजें। दोबारा उपयोग के लिए तर्क को एक कस्टम हुक में समाहित करें।

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

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

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

पाठ्यक्रम: 88
पाठ: 324

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

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

क्या “React के साथ Socket.IO का उपयोग” पाठ निःशुल्क है?

हाँ—“React के साथ Socket.IO का उपयोग” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“React के साथ Socket.IO का उपयोग” में मैं क्या सीखूँगा?

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

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

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

“React के साथ Socket.IO का उपयोग” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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