Frontend Academy · पाठ

Socket.io क्लाइंट एकीकरण

Socket.io क्लाइंट से कनेक्ट करें, नामित इवेंट सुनें, सर्वर को डेटा भेजें, पुनः कनेक्शन का तर्क संभालें, और क्लाइंट की ओर से रूम प्रबंधित करें।

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

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

Raw WebSocket की तुलना में Socket.io में क्या अतिरिक्त मिलता है

Socket.io, WebSocket के ऊपर बनी एक लोकप्रिय लाइब्रेरी है। इसमें स्वचालित पुनः-कनेक्शन, लॉन्ग-पोलिंग पर फ़ॉलबैक, रूम/नेमस्पेस, पावती कॉलबैक और नामित इवेंट जुड़ते हैं। यह एक क्लाइंट लाइब्रेरी को सर्वर लाइब्रेरी (Node.js) के साथ जोड़ी बनाकर काम करती है।

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

socket.io-client इंस्टॉल करें। इसका प्रमुख वर्ज़न सर्वर के प्रमुख वर्ज़न से मेल खाना चाहिए।

npm install socket.io-client

कनेक्ट करना

io इम्पोर्ट करें और सर्वर यूआरएल से कनेक्ट करें। इससे एक Socket इंस्टेंस मिलता है।

import { io } from 'socket.io-client';

const socket = io('https://api.example.com', {
  transports: ['websocket'], // skip polling fallback for speed
  auth: { token: localStorage.getItem('jwt') }
});

socket.on('connect', () => console.log('connected', socket.id));

इवेंट भेजना

socket.emit(eventName, payload) डेटा के साथ एक नामित इवेंट भेजता है — यह raw send + JSON.parse से कहीं अधिक साफ़ है।

socket.emit('chat-message', {
  room: 'general',
  text: 'Hello everyone!'
});

socket.emit('typing', { user: 'Alice' });

इवेंट सुनना

socket.on(eventName, handler) एक लिस्नर रजिस्टर करता है। सर्वर द्वारा भेजे गए इवेंट यहाँ पहुँचते हैं।

socket.on('chat-message', (msg) => {
  console.log(`${msg.user}: ${msg.text}`);
  appendMessage(msg);
});

socket.on('user-joined', (user) => {
  console.log(`${user.name} joined`);
});

पावती (Ack कॉलबैक)

emit के अंतिम तर्क के रूप में एक कॉलबैक दें — सर्वर उसे प्रतिक्रिया के साथ कॉल कर सकता है। यह RPC जैसा है।

socket.emit('create-post', { title: 'Hello' }, (response) => {
  if (response.error) {
    console.error(response.error);
  } else {
    console.log('Created post', response.id);
  }
});

Promise-आधारित emitWithAck

आधुनिक Socket.io emitWithAck उपलब्ध कराता है, जो एक प्रॉमिस लौटाता है।

try {
  const response = await socket.emitWithAck('create-post', { title: 'Hello' });
  console.log('Created', response.id);
} catch (err) {
  console.error('Failed', err);
}

रूम

रूम, सॉकेट के सर्वर-साइड समूह होते हैं। क्लाइंट इवेंट भेजकर उनमें शामिल होता या उनसे निकलता है; सर्वर प्रसारण के लिए io.to(room).emit() का उपयोग करता है।

// Client:
socket.emit('join-room', { roomId: 'general' });

// Listen to messages in any room you've joined:
socket.on('room-message', ({ room, message }) => {
  if (room === activeRoom) appendMessage(message);
});

// Leave:
socket.emit('leave-room', { roomId: 'general' });

नेमस्पेस

नेमस्पेस एक ही सर्वर पर अलग-अलग संचार चैनल होते हैं — जैसे /chat और /admin। यूआरएल के अंत में प्रत्यय जोड़कर किसी नेमस्पेस से कनेक्ट करें।

const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');

अंतर्निर्मित पुनः-कनेक्शन

Socket.io क्रमिक रूप से बढ़ते बैकऑफ़ के साथ अपने-आप पुनः-कनेक्ट होता है। इसे विकल्पों के माध्यम से कॉन्फ़िगर करें।

const socket = io({
  reconnection: true,
  reconnectionAttempts: Infinity,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 30000,
  randomizationFactor: 0.5
});

socket.on('reconnect', (attempt) => console.log('reconnected after', attempt));
socket.on('reconnect_attempt', (attempt) => console.log('trying...', attempt));

डिस्कनेक्ट संभालना

यूआई अपडेट करने के लिए डिस्कनेक्ट को सुनें (जैसे 'पुनः कनेक्ट हो रहा है...' बैनर दिखाएँ)।

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
  if (reason === 'io server disconnect') {
    // Server kicked us — must reconnect manually
    socket.connect();
  }
});

React इंटीग्रेशन

सॉकेट के जीवनचक्र को एक कस्टम हुक या Context प्रदाता में लपेटें।

// useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

let socket: Socket;

export function useSocket() {
  const [connected, setConnected] = useState(false);
  useEffect(() => {
    if (!socket) socket = io('/');
    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    return () => { /* keep socket alive across remounts */ };
  }, []);
  return { socket, connected };
}

Socket.io बनाम Raw WebSocket का उपयोग कब करें

Socket.io: जब आप रूम, पावती कॉलबैक, स्वचालित पुनः-कनेक्शन और पहले से उपलब्ध ट्रांसपोर्ट फ़ॉलबैक चाहते हों। Raw WebSocket: जब आपको raw प्रोटोकॉल नियंत्रण, न्यूनतम बंडल आकार या ऐसे सर्वर के साथ इंटरऑपरेबिलिटी चाहिए जो Socket.io का उपयोग नहीं करता।

त्वरित जाँच

socket.emit(event, payload, callback) का तीसरे तर्क वाला कॉलबैक क्या सक्षम करता है?

पुनरावलोकन: Socket.io क्लाइंट

WebSocket के ऊपर बनी लाइब्रेरी: रूम, नेमस्पेस, पावतियाँ, स्वचालित पुनः-कनेक्शन और पोलिंग फ़ॉलबैक। io(url, options) कनेक्ट करता है। emit(event, payload) नामित इवेंट भेजता है; on(event, handler) उन्हें सुनता है। RPC-शैली के लिए तीसरे तर्क वाला कॉलबैक या emitWithAck उपयोग करें। रूम सर्वर के माध्यम से और नेमस्पेस यूआरएल प्रत्यय के माध्यम से मिलते हैं। पुनः-कनेक्शन अंतर्निर्मित है। जीवनचक्र के लिए इसे React हुक में लपेटें।

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

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

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

पाठ्यक्रम
41
पाठ
163

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

क्या “Socket.io क्लाइंट एकीकरण” पाठ निःशुल्क है?

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

“Socket.io क्लाइंट एकीकरण” में मैं क्या सीखूँगा?

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

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

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

“Socket.io क्लाइंट एकीकरण” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

  1. WebSocket API: open, message, close, error
  2. Socket.io क्लाइंट एकीकरण
  3. एकतरफ़ा स्ट्रीमिंग के लिए सर्वर-प्रेषित इवेंट
  4. रीयल-टाइम UI पैटर्न
← Frontend Academy पर वापस जाएँ