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

रियल-टाइम चैट अनुप्रयोग

संदेश प्रसारण और निजी संदेश की कार्यक्षमता प्रदर्शित करने वाला सरल रियल-टाइम चैट अनुप्रयोग बनाइए।

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

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

चैट ऐप को रीयल-टाइम क्या बनाता है?

रीयल-टाइम चैट अनुप्रयोग उपयोगकर्ताओं को ब्राउज़र रीफ़्रेश किए बिना तुरंत संदेश भेजने और प्राप्त करने देते हैं।

यह WebSockets से संभव होता है, जो क्लाइंट और सर्वर के बीच एक स्थायी, द्विदिशीय संचार चैनल प्रदान करते हैं।

इस पाठ में हम NestJS के साथ एक सरल चैट ऐप बनाएँगे और संदेश प्रसारण तथा निजी संदेश भेजना प्रदर्शित करेंगे।

हमारा चैट गेटवे सेट अप करना

NestJS में गेटवे एक ऐसा वर्ग है जिस पर @WebSocketGateway() का चिह्न लगा होता है और जो WebSocket कनेक्शन तथा संदेशों को संभालता है।

यह रीयल-टाइम संचार के प्रवेश-बिंदु के रूप में काम करता है। हम अपने WebSocket सर्वर के लिए एक पोर्ट निर्दिष्ट करेंगे।

import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway(3001, { cors: true }) // Port 3001, enable CORS
export class ChatGateway {
  @WebSocketServer() server: Server; // socket.io server instance

  // More logic will go here
}

क्लाइंट कनेक्शन का प्रबंधन

हमारे गेटवे को यह जानना आवश्यक है कि क्लाइंट कब कनेक्ट और डिस्कनेक्ट होते हैं। हम OnGatewayConnection और OnGatewayDisconnect इंटरफ़ेस लागू करते हैं।

इससे हम किसी नए उपयोगकर्ता के चैट में शामिल होने या उसे छोड़ने पर तर्क चला सकते हैं।

import {
  WebSocketGateway, WebSocketServer,
  OnGatewayConnection, OnGatewayDisconnect
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket, ...args: any[]) {
    console.log(`Client connected: ${client.id}`);
    // You might add client to a list here
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
    // Remove client from any lists
  }
}

सभी को संदेश भेजना

किसी संदेश को प्रसारित करने के लिए हम क्लाइंट से आने वाली किसी घटना (उदाहरण के लिए, 'sendMessage') को सुनते हैं। प्राप्त होने पर हम उसे सभी जुड़े हुए क्लाइंट को भेजने के लिए this.server.emit() का उपयोग करते हैं।

@SubscribeMessage() सज्जक आने वाले WebSocket संदेशों को हैंडलर विधियों से जोड़ता है।

import {
  WebSocketGateway, WebSocketServer,
  OnGatewayConnection, OnGatewayDisconnect,
  SubscribeMessage, MessageBody
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket) { /* ... */ }
  handleDisconnect(client: Socket) { /* ... */ }

  @SubscribeMessage('sendMessage')
  handleMessage(@MessageBody() data: { message: string, senderId: string }): void {
    console.log(`Message from ${data.senderId}: ${data.message}`);
    this.server.emit('receiveMessage', data); // Broadcast to all
  }
}

क्लाइंट-पक्ष: बुनियादी चैट इंटरैक्शन

क्लाइंट पर हम अपने NestJS गेटवे से कनेक्ट करने के लिए socket.io-client जैसी लाइब्रेरी का उपयोग करते हैं।

इसके बाद हम संदेशों को emit कर सकते हैं और प्रसारण प्राप्त करने के लिए घटनाओं पर on लगा सकते हैं।

// index.html (conceptual client-side script)
const socket = io('http://localhost:3001');

socket.on('connect', () => {
  console.log('Connected to chat server!');
  socket.emit('sendMessage', {
    message: 'Hello everyone!',
    senderId: 'user123'
  });
});

socket.on('receiveMessage', (data) => {
  console.log(`New message: ${data.message} from ${data.senderId}`);
  // Update chat UI
});

विशिष्ट उपयोगकर्ताओं को लक्षित करना (निजी चैट)

सामान्य घोषणाओं के लिए प्रसारण बहुत अच्छा है, लेकिन दो उपयोगकर्ताओं के बीच निजी बातचीत के लिए क्या किया जाए?

निजी संदेशों के लिए हमें अलग-अलग क्लाइंट की पहचान करने और संदेश केवल उन्हें या किसी विशिष्ट समूह (एक 'रूम') को भेजने का तरीका चाहिए।

अलग-अलग क्लाइंट की पहचान करना

निजी संदेश भेजने के लिए हमें उपयोगकर्ता की विशिष्ट ID (उदाहरण के लिए, उसके लॉगिन से प्राप्त) को उसके विशिष्ट WebSocket कनेक्शन ID (client.id) से जोड़ना होगा।

हम इस मैपिंग को अपने गेटवे के भीतर किसी सरल ऑब्जेक्ट या Map में संग्रहीत कर सकते हैं।

import {
  WebSocketGateway, WebSocketServer,
  OnGatewayConnection, OnGatewayDisconnect,
  ConnectedSocket
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;
  private connectedUsers: Map<string, string> = new Map(); // userId -> socketId

  handleConnection(@ConnectedSocket() client: Socket) {
    const userId = client.handshake.query.userId as string; // Get user ID from query
    if (userId) {
      this.connectedUsers.set(userId, client.id);
      console.log(`User ${userId} connected with socket ID: ${client.id}`);
    } else {
      console.log(`Client connected without userId: ${client.id}`);
    }
  }

  handleDisconnect(@ConnectedSocket() client: Socket) {
    const userId = [...this.connectedUsers.entries()]
                    .find(([key, val]) => val === client.id)?.[0];
    if (userId) {
      this.connectedUsers.delete(userId);
      console.log(`User ${userId} disconnected.`);
    } else {
      console.log(`Client disconnected: ${client.id}`);
    }
  }
  // ... handleMessage for broadcasting ...
}

किसी उपयोगकर्ता को सीधे संदेश भेजना

उपयोगकर्ता और सॉकेट की मैपिंग के साथ अब हम लक्षित उपयोगकर्ता के सॉकेट पर सीधे संदेश भेज सकते हैं।

हम 'privateMessage' घटना को सुनते हैं, प्राप्तकर्ता की सॉकेट ID खोजते हैं और this.server.to(socketId).emit() का उपयोग करते हैं।

import {
  WebSocketGateway, WebSocketServer,
  OnGatewayConnection, OnGatewayDisconnect,
  SubscribeMessage, MessageBody
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway(3001, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;
  private connectedUsers: Map<string, string> = new Map(); // userId -> socketId

  handleConnection(client: Socket) { /* ... */ }
  handleDisconnect(client: Socket) { /* ... */ }
  @SubscribeMessage('sendMessage')
  handleMessage(data: { message: string, senderId: string }): void { /* ... */ }

  @SubscribeMessage('privateMessage')
  handlePrivateMessage(
    @MessageBody() data: { recipientId: string, message: string, senderId: string }
  ): void {
    const recipientSocketId = this.connectedUsers.get(data.recipientId);

    if (recipientSocketId) {
      this.server.to(recipientSocketId).emit('receivePrivateMessage', {
        message: data.message,
        senderId: data.senderId
      });
      console.log(`Private message from ${data.senderId} to ${data.recipientId}`);
    } else {
      console.log(`Recipient ${data.recipientId} not found or offline.`);
    }
  }
}

समूह चैट के लिए रूम का उपयोग

समूह चैट या यहाँ तक कि दो लोगों की चैट के लिए भी Socket.IO रूम एक शक्तिशाली सुविधा हैं। क्लाइंट किसी रूम में 'join' कर सकते हैं और फिर आप उस विशेष रूम में संदेश प्रसारित कर सकते हैं।

  • client.join('roomName'): किसी क्लाइंट को रूम में जोड़ता है।
  • this.server.to('roomName').emit(): उस रूम के सभी क्लाइंट को संदेश भेजता है।

इससे कई प्रतिभागियों के लिए संदेश वितरण का प्रबंधन सरल हो जाता है।

संदेश के प्रकारों में अंतर करना

NestJS चैट अनुप्रयोग पर विचार करें। कोई उपयोगकर्ता संदेश भेजता है। आप यह सुनिश्चित करना चाहते हैं कि यह संदेश जुड़े हुए सभी लोगों को नहीं, बल्कि केवल 5 उपयोगकर्ताओं के एक विशिष्ट समूह को मिले, जो सभी ऑनलाइन हैं।

रीयल-टाइम चैट: प्रसारण और निजी संदेश

इस पाठ में आपने NestJS WebSockets का उपयोग करके एक बुनियादी रीयल-टाइम चैट अनुप्रयोग बनाना सीखा।

  • हमने कनेक्शन संभालने के लिए एक गेटवे सेट अप किया।
  • सभी जुड़े हुए क्लाइंट को संदेश प्रसारित करना लागू किया।
  • उपयोगकर्ता ID को सॉकेट ID से जोड़कर निजी संदेश भेजने का अध्ययन किया।
  • कुशल समूह संचार के लिए Socket.IO रूम के उपयोग को संक्षेप में समझा।

आपके अनुप्रयोगों में इंटरैक्टिव, रीयल-टाइम सुविधाएँ बनाने के लिए ये अवधारणाएँ मूलभूत हैं!

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

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

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

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

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

क्या “रियल-टाइम चैट अनुप्रयोग” पाठ निःशुल्क है?

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

“रियल-टाइम चैट अनुप्रयोग” में मैं क्या सीखूँगा?

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

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

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

“रियल-टाइम चैट अनुप्रयोग” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

  1. WebSockets का परिचय
  2. NestJS के साथ WebSockets
  3. Node.js में Socket.IO लागू करना
  4. गेटवे कॉन्फ़िगरेशन
  5. रीयल-टाइम चैट अनुप्रयोग बनाना
  6. रियल-टाइम चैट अनुप्रयोग
← Node.js बैकएंड विकास बूटकैंप पर वापस जाएँ