2026 में Socket.io के साथ रिएक्ट में वेबसॉकेट का उपयोग कैसे करें: संपूर्ण गाइड

वास्तविक समय की विशेषताएं – लाइव चैट, सूचनाएं, सहयोगात्मक संपादन, लाइव डैशबोर्ड – के लिए लगातार कनेक्शन की आवश्यकता होती है। प्रतिक्रिया में,सॉकेट.आईओ WebSocket-आधारित वास्तविक समय कार्यक्षमता को जोड़ने का सबसे व्यावहारिक तरीका है। यह मार्गदर्शिका दिखाती है कि इसे रिएक्ट हुक के साथ सफाई से कैसे एकीकृत किया जाए।

सेटअप

npm install socket.io-client

बुनियादी कनेक्शन

// socket.js - create a single shared socket instance
import { io } from 'socket.io-client';

export const socket = io('http://localhost:3001', {
  autoConnect: false,   // connect manually when ready
  reconnection: true,
  reconnectionDelay: 1000,
});

एक पुन: प्रयोज्य उपयोग सॉकेट हुक

// hooks/useSocket.js
import { useEffect, useState } from 'react';
import { socket } from '../socket';

export function useSocket() {
  const [isConnected, setIsConnected] = useState(socket.connected);

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

    function onConnect() { setIsConnected(true); }
    function onDisconnect() { setIsConnected(false); }

    socket.on('connect', onConnect);
    socket.on('disconnect', onDisconnect);

    // Cleanup - CRITICAL to prevent duplicate listeners
    return () => {
      socket.off('connect', onConnect);
      socket.off('disconnect', onDisconnect);
      socket.disconnect();
    };
  }, []);

  return { socket, isConnected };
}

घटनाओं को सुनना

// hooks/useMessages.js - subscribe to a specific event
import { useEffect, useState } from 'react';
import { socket } from '../socket';

export function useMessages() {
  const [messages, setMessages] = useState([]);

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

    socket.on('message', onMessage);

    // Always clean up the listener to avoid duplicates on re-render
    return () => {
      socket.off('message', onMessage);
    };
  }, []);

  const sendMessage = (text) => {
    socket.emit('send_message', { text, timestamp: Date.now() });
  };

  return { messages, sendMessage };
}

एक संपूर्ण चैट घटक

import { useState } from 'react';
import { useSocket } from './hooks/useSocket';
import { useMessages } from './hooks/useMessages';

function Chat() {
  const { isConnected } = useSocket();
  const { messages, sendMessage } = useMessages();
  const [input, setInput] = useState('');

  const handleSend = (e) => {
    e.preventDefault();
    if (input.trim()) {
      sendMessage(input);
      setInput('');
    }
  };

  return (
    <div>
      <div>Status: {isConnected ? 'Connected' : 'Disconnected'}</div>
      <ul>
        {messages.map((msg, i) => (
          <li key={i}>{msg.text}</li>
        ))}
      </ul>
      <form onSubmit={handleSend}>
        <input value={input} onChange={e => setInput(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

टाइपिंग संकेतक और उपस्थिति

export function useTyping() {
  const [typingUsers, setTypingUsers] = useState([]);

  useEffect(() => {
    function onTyping({ user, isTyping }) {
      setTypingUsers(prev =>
        isTyping
          ? [...new Set([...prev, user])]
          : prev.filter(u => u !== user)
      );
    }
    socket.on('user_typing', onTyping);
    return () => socket.off('user_typing', onTyping);
  }, []);

  const setTyping = (isTyping) => {
    socket.emit('typing', { isTyping });
  };

  return { typingUsers, setTyping };
}

पुनर्संयोजन को संभालना

useEffect(() => {
  function onReconnect() {
    console.log('Reconnected - re-syncing state');
    // Re-fetch missed data or re-join rooms after reconnection
    socket.emit('rejoin_room', { roomId });
  }

  socket.io.on('reconnect', onReconnect);
  return () => socket.io.off('reconnect', onReconnect);
}, [roomId]);
// Socket.io auto-reconnects; use this hook to re-sync after connection drops

महत्वपूर्ण नियम: श्रोताओं को हमेशा साफ़ रखें

सबसे आम सॉकेट.आईओ + रिएक्ट बग डुप्लिकेट इवेंट हैंडलर है। हर बार जब कोई घटक पुन: प्रस्तुत होता है या पुनः माउंट होता है, यदि आप पुराने को हटाए बिना श्रोता जोड़ते हैं, तो आप डुप्लिकेट जमा करते हैं – एक एकल संदेश आपके हैंडलर को कई बार ट्रिगर करता है। हमेशा यूज़इफेक्ट से एक क्लीनअप फ़ंक्शन लौटाएं जो श्रोता कोsocket.off()से हटा देता है . सही व्यवहार के लिए इस पर समझौता नहीं किया जा सकता।

प्रमाणीकरण

// Pass auth token when connecting
export const socket = io('http://localhost:3001', {
  auth: {
    token: localStorage.getItem('accessToken'),
  },
  autoConnect: false,
});

// Server verifies the token in a middleware before allowing the connection
// Update the token if it changes:
socket.auth.token = newToken;
socket.disconnect().connect();   // reconnect with new auth

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

प्रश्न: मुझे डुप्लिकेट संदेश क्यों प्राप्त हो रहे हैं?
उ: आप इवेंट श्रोताओं को बिना साफ़ किए जोड़ रहे हैं। प्रत्येक री-रेंडर एक और श्रोता जोड़ता है। हमेशा यूज़इफेक्ट से एक क्लीनअप फ़ंक्शन लौटाएं जोsocket.off()को कॉल करता है श्रोता को हटाने के लिए. यह सबसे आम Socket.io + React गलती है।

प्रश्न: क्या मुझे घटक के अंदर या बाहर सॉकेट बनाना चाहिए?
ए: बाहर – एक अलग मॉड्यूल (सॉकेट.जेएस) में एक साझा सॉकेट इंस्टेंस बनाएं और इसे आयात करें। किसी घटक के अंदर इसे बनाने से प्रत्येक रेंडर पर एक नया कनेक्शन बनता है। एक साझा उदाहरण सही पैटर्न है.

प्रश्न: मैं कई घटकों में सॉकेट को कैसे संभालूं?
ए: प्रत्येक घटक में साझा सॉकेट इंस्टेंस को आयात करें, जिसे इसकी आवश्यकता है, या कनेक्शन स्थिति साझा करने के लिए एक संदर्भ प्रदाता का उपयोग करें। प्रत्येक घटक अपने स्वयं के उपयोग प्रभाव के माध्यम से उन घटनाओं की सदस्यता लेता है जिनकी उसे आवश्यकता होती है (क्लीनअप के साथ)। एकल सॉकेट उन सभी को संभालता है।

प्रश्न: सॉकेट.आईओ या देशी वेबसॉकेट?
ए: रिएक्ट ऐप्स के उत्पादन के लिए सॉकेट.आईओ – यह स्वचालित पुन: कनेक्शन, लंबे मतदान के लिए फ़ॉलबैक, कमरे और एक इवेंट-आधारित एपीआई जोड़ता है जो महत्वपूर्ण काम को बचाता है। नेटिव वेबसॉकेट निचले स्तर का है और इसके लिए आपको पुन: कनेक्शन और ईवेंट को स्वयं प्रबंधित करने की आवश्यकता होती है।

प्रश्न: मैं रीयल-टाइम सुविधाओं का परीक्षण कैसे करूं?
उ: एकाधिक उपयोगकर्ताओं को अनुकरण करने और प्रचारित संदेशों/घटनाओं को सत्यापित करने के लिए कई ब्राउज़र टैब या विंडो में ऐप खोलें। स्वचालित परीक्षण के लिए, सॉकेट को मॉक करें या परीक्षण सॉकेट.आईओ सर्वर का उपयोग करें। मैन्युअल मल्टी-टैब परीक्षण वास्तविक समय के व्यवहार कार्यों को सत्यापित करने का सबसे तेज़ तरीका है।

निष्कर्ष

Socket.io के साथ रिएक्ट में वास्तविक समय की सुविधाएँ जोड़ना सही पैटर्न के साथ सीधा है:घटकों के बाहर एक एकल साझा सॉकेट इंस्टेंस बनाएं, कस्टम हुक में रैप कनेक्शन और ईवेंट हैंडलिंग करें, और हमेशा यूज़इफ़ेक्ट के रिटर्न फ़ंक्शन में श्रोताओं को साफ़ करें. कस्टम हुक पैटर्न (यूज़सॉकेट, यूज़मैसेज, यूज़टाइपिंग) आपके वास्तविक समय के तर्क को व्यवस्थित और पुन: प्रयोज्य रखता है। कनेक्शन ठीक होने के बाद स्थिति को फिर से सिंक करके पुन: कनेक्शन को संभालें, और सुरक्षित सॉकेट के लिए कनेक्शन पर ऑथ टोकन पास करें। एकमात्र सबसे महत्वपूर्ण नियम श्रोताओं कोsocket.off()से साफ़ करना है – इसे भूलने से डुप्लिकेट हैंडलर का कारण बनता है और यह शीर्ष सॉकेट.आईओ + रिएक्ट बग है। इन पैटर्न के साथ, आप रिएक्ट में चैट, नोटिफिकेशन, लाइव डैशबोर्ड और सहयोगी सुविधाओं को साफ़-साफ़ बना सकते हैं।