Node.js बैकएंड विकास बूटकैंप · पाठ

Node.js में Socket.IO लागू करना

द्विदिशीय, घटना-आधारित संवाद सक्षम करने के लिए Socket.IO को अपने Express अनुप्रयोग में एकीकृत कीजिए।

पाठ 3, कुल 6 में से11 चरण

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

Socket.IO से परिचय

पिछले पाठ में हमने real-time communication के लिए WebSockets के बारे में सीखा। WebSockets शक्तिशाली होते हैं, लेकिन raw WebSockets को संभालना जटिल हो सकता है, विशेषकर connection stability और fallback options के मामले में।

यहीं Socket.IO उपयोगी होता है! यह एक library है, जो web clients और servers के बीच real-time, bi-directional और event-based communication सक्षम करती है। यह हर platform, browser और device पर काम करती है और reliable connections सुनिश्चित करती है।

Abstraction: WebSocket API को सरल बनाता है।
Reliability: Disconnections और re-connections को संभालता है।
Fallback: यदि WebSockets उपलब्ध न हों, तो HTTP long-polling का उपयोग करता है।
Broadcasting: कई clients को आसानी से messages भेजता है।

Project Setup

सबसे पहले, आइए अपना project तैयार करें। आपके system पर Node.js और npm installed होने चाहिए। अपना terminal खोलकर एक नया project folder बनाएँ।

अपने नए folder के अंदर Node.js project को initialize करें और आवश्यक packages install करें: हमारे web server के लिए express और real-time communication के लिए socket.io।

npm init -y
npm install express socket.io

हमारा आधार: Express Server

Socket.IO को integrate करने से पहले, आइए एक basic Express server तैयार करें। यह server हमारी HTTP requests संभालेगा और real-time communication के आधार के रूप में भी काम करेगा।

server.js नाम की एक file बनाएँ और नीचे दिया गया code जोड़ें। इससे एक Express app तैयार होता है, जो port 3000 पर listen करता है।

const express = require('express');
const http = require('http'); // Needed for Socket.IO

const app = express();
const server = http.createServer(app); // Create HTTP server
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Socket.IO जोड़ना

अब आइए Socket.IO को अपने मौजूदा Express HTTP server से जोड़ें। इससे Socket.IO हमारे web server वाले ही port पर WebSocket connections के लिए listen कर सकेगा।

हम socket.io library import करके अपने http server instance को इसमें pass करते हैं। इससे Socket.IO server instance बनता है, जिसका सामान्य नाम io रखा जाता है।

const express = require('express');
const http = require('http');
const { Server } = require('socket.io'); // Import Server class

const app = express();
const server = http.createServer(app);
const io = new Server(server); // Attach Socket.IO to HTTP server

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Client Connection Events

Socket.IO का सबसे मूल event 'connection' है। जब भी कोई नया client Socket.IO server से सफलतापूर्वक connect होता है, यह event सक्रिय होता है।

इस event listener के अंदर आपको एक socket object मिलता है, जो उस individual client का प्रतिनिधित्व करता है। इसके बाद आप उस client से आने वाले विशेष events का इंतज़ार कर सकते हैं या उसे सीधे messages भेज सकते हैं।

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

// Listen for incoming connections
io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  // Listen for disconnection
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server द्वारा Events भेजना

Server clients को custom events भेज (या 'emit' कर) सकता है। अभी connect हुए किसी विशेष client को message भेजने के लिए हम socket.emit() का उपयोग करते हैं।

यह method एक event name (जैसे 'welcome') और उसके साथ भेजा जाने वाला कोई भी data लेता है। इसके बाद client इस विशेष event का इंतज़ार करेगा।

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  
  // Send a 'welcome' event to the newly connected client
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server द्वारा Events प्राप्त करना

जिस तरह server events emit कर सकता है, उसी तरह वह clients द्वारा भेजे गए events का इंतज़ार भी कर सकता है। इसके लिए हम socket.on() का उपयोग करते हैं, ठीक वैसे ही जैसे हमने 'connection' के लिए किया था।

जब कोई client किसी विशेष नाम वाला event भेजता है, तो संबंधित server-side listener execute होता है और client द्वारा भेजा गया data प्राप्त करता है।

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  // Listen for a 'clientMessage' event from this specific client
  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Client-Side Interaction

हमारे Socket.IO server से connect करने के लिए client को Socket.IO client library की आवश्यकता होती है। आप इसे CDN या npm के माध्यम से शामिल कर सकते हैं।

यह HTML snippet एक basic client दिखाता है, जो connect होता है, 'welcome' event का इंतज़ार करता है और server को 'clientMessage' event भेजता है। इसे index.html के रूप में save करें।

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Client</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>Socket.IO Client</h1>
  <p id="status">Connecting...</p>
  <button onclick="sendMessage()">Send Hello</button>
  <ul id="messages"></ul>

  <script>
    const socket = io('http://localhost:3000'); // Connect to your server

    socket.on('connect', () => {
      document.getElementById('status').innerText = 'Connected to server!';
      console.log('Connected to server!');
    });

    socket.on('welcome', (msg) => {
      const item = document.createElement('li');
      item.innerText = `Server: ${msg}`;
      document.getElementById('messages').appendChild(item);
      console.log('Received from server:', msg);
    });

    socket.on('disconnect', () => {
      document.getElementById('status').innerText = 'Disconnected.';
      console.log('Disconnected from server.');
    });

    function sendMessage() {
      const msg = 'Hello from client!';
      socket.emit('clientMessage', msg);
      const item = document.createElement('li');
      item.innerText = `Client: ${msg}`;
      document.getElementById('messages').appendChild(item);
    }
  </script>
</body>
</html>

Messages का Broadcasting

अक्सर आपको किसी event को trigger करने वाले client के बजाय सभी connected clients को message भेजना होता है। इसे broadcasting कहा जाता है।

किसी विशेष socket को भेजने वाले socket.emit() के बजाय, हम Socket.IO server से connected सभी clients को message भेजने के लिए io.emit() का उपयोग करते हैं।

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);
  
  // Broadcast to all clients (except the sender) when a new user connects
  socket.broadcast.emit('user joined', `User ${socket.id} joined.`);

  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
    // Broadcast the message to ALL connected clients
    io.emit('serverMessage', `[${socket.id}] ${message}`); 
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
    // Broadcast to all clients when a user disconnects
    io.emit('user left', `User ${socket.id} left.`);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

त्वरित जाँच: Event Scope

आपने देखा है कि messages भेजने के लिए socket.emit() और io.emit() दोनों का उपयोग कैसे किया जाता है। *सभी* connected clients को message भेजने के लिए आप किस method का उपयोग करेंगे?

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

दोहराव: Socket.IO Integration

बहुत अच्छा काम! इस पाठ में आपने Socket.IO को अपने Node.js Express application में integrate करना सीखा और शक्तिशाली real-time सुविधाएँ सक्षम कीं।

Setup: express और socket.io install किए।
Server: Socket.IO को मौजूदा HTTP server से जोड़ा।
Connections: Client के 'connection' और 'disconnect' events को संभाला।
Communication: विशेष clients को भेजने के लिए socket.emit() और सभी clients को broadcasting के लिए io.emit() का उपयोग किया।
Listeners: Clients से custom events प्राप्त करने के लिए socket.on() सेट किया।

अब आपके पास interactive, real-time applications बनाने की आधारभूत समझ है!

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

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

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

पाठ्यक्रम: 22
पाठ: 92

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

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

क्या “Node.js में Socket.IO लागू करना” पाठ निःशुल्क है?

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

“Node.js में Socket.IO लागू करना” में मैं क्या सीखूँगा?

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

क्या Node.js बैकएंड विकास बूटकैंप शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

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

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

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

क्या मैं इस Node.js बैकएंड विकास बूटकैंप पाठ में कोड लिख और चला सकता हूँ?

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

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

← Node.js बैकएंड विकास बूटकैंप पर वापस जाएँ