Skip to content
BackendPHP

WebSockets Node.js – Live Chat App कैसे बनाएं (Socket.io)

April 20, 2026 18 min read
WebSockets Node.js – Live Chat App कैसे बनाएं (Socket.io)

नमस्ते दोस्तों! 🙏
स्वागत है The Easy Master पर!

क्या तुमने कभी सोचा है – WhatsApp, Telegram, Discord jaise real-time apps live messages kaise bhejte hain? Jaise tum message bhejte ho, turant dusre user ko dikh jata hai – page reload nahi hota!

Yeh sab WebSockets ki wajah se possible hai!

WebSockets Node.js Hindi में समझना बहुत जरूरी है क्योंकि:

  • Real-time apps (chat, gaming, live tracking) WebSockets use karte hain
  • HTTP se 10x faster – persistent connection
  • Stock market, sports scores, notifications – sab real-time
  • Interview mein pakka WebSockets questions puche jayenge

Aaj kya seekhoge?

TopicKya Seekhega?
WebSockets Kya Hai?HTTP vs WebSocket comparison
Socket.io SetupInstallation aur configuration
Eventsemit, on, broadcast
RoomsPrivate chat rooms
Real-time ChatComplete app banayenge
Typing Indicators“User is typing…” feature
Online StatusActive users tracking

Kya tumhe pata hai?
WebSocket full-duplex communication provide karta hai – client aur server dono ek dusre ko message bhej sakte hain anytime!

तो चलिए शुरू करते हैं – WebSockets Node.js Hindi सीखने का सफर! 🚀

1. WebSockets क्या Hai? – Introduction

WebSocket ek communication protocol hai jo persistent connection provide karta hai client aur server ke beech.

Real-world Analogy:

Code
📞 Phone Call (WebSocket):
- Ek baar connect hote ho
- Dono baat kar sakte ho anytime
- Connection open rehta hai

📧 Email (HTTP):
- Request bhejo, response aaye
- Connection close ho jaye
- Dusra message bhejna hai toh naya request chahiye

WebSocket Flow:

Code
Client                         Server
   │                              │
   │──── HTTP Upgrade Request ────│
   │                              │
   │◄─── HTTP 101 Switching ──────│
   │                              │
   │◄====== WebSocket Connection =►│ (Persistent)
   │                              │
   │──── Message ────────────────►│
   │                              │
   │◄──── Message ────────────────│
   │                              │
   │──── Message ────────────────►│
   │                              │
   │◄──── Message ────────────────│
   │                              │

WebSockets Node.js Hindi में हम Socket.io use karenge – ye WebSockets ko easy banata hai!

2. HTTP vs WebSocket – Comparison

FeatureHTTPWebSocket
ConnectionShort-lived (request-response)Persistent (long-lived)
DirectionClient → Server (request)Bidirectional (both ways)
Real-time❌ No (needs polling)✅ Yes
OverheadHigh (headers each time)Low (once after upgrade)
Use CaseREST APIs, static contentChat, gaming, live feeds
ProtocolHTTP/1.1, HTTP/2ws://, wss://

HTTP Polling (Old Way):

Code
// ❌ Polling – inefficient
setInterval(async () => {
  const response = await fetch('/api/messages');
  const messages = await response.json();
  updateUI(messages);
}, 1000); // Request every second! (1000 requests/hour)

WebSocket (Modern Way):

Code
// ✅ WebSocket – efficient
const socket = io('http://localhost:3000');

socket.on('newMessage', (message) => {
  updateUI(message); // Only when message arrives!
});

3. Socket.io – Setup and Installation

What is Socket.io?

Socket.io ek library hai jo WebSockets ko easy banati hai – aur fallback provide karti hai agar WebSocket support nahi hai.

Step 1: Install Dependencies

Code
# Create project
mkdir live-chat-app
cd live-chat-app
npm init -y

# Install backend dependencies
npm install express socket.io

# Install dev dependencies
npm install -D nodemon

# Frontend (client)
# Socket.io client CDN will be used

Step 2: Basic Server Setup

Code
// server.js
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, {
  cors: {
    origin: "*", // In production, restrict this
    methods: ["GET", "POST"]
  }
});

const PORT = process.env.PORT || 3000;

// Serve static files
app.use(express.static('public'));

// Socket.io connection
io.on('connection', (socket) => {
  console.log(`🟢 New client connected: ${socket.id}`);
  
  socket.on('disconnect', () => {
    console.log(`🔴 Client disconnected: ${socket.id}`);
  });
});

server.listen(PORT, () => {
  console.log(`🚀 Server running on http://localhost:${PORT}`);
});

Step 3: Basic Client Setup

Code
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Chat App</title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; background: #0A1929; color: white; }
        .container { max-width: 800px; margin: 50px auto; padding: 20px; }
        #chat-box { height: 400px; border: 1px solid #61DAFB; border-radius: 10px; overflow-y: auto; padding: 15px; margin-bottom: 15px; }
        .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; }
        .message.user { background: #61DAFB; color: #0A1929; text-align: right; }
        .message.server { background: #2D2D2D; color: white; }
        .input-area { display: flex; gap: 10px; }
        #message-input { flex: 1; padding: 12px; border: none; border-radius: 5px; font-size: 16px; }
        #send-btn { padding: 12px 24px; background: #61DAFB; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
        #send-btn:hover { background: #4A8B9F; }
        .status { padding: 5px 10px; background: #2D2D2D; border-radius: 5px; margin-bottom: 10px; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>💬 Live Chat</h1>
        <div class="status" id="status">🟡 Connecting...</div>
        <div id="chat-box"></div>
        <div class="input-area">
            <input type="text" id="message-input" placeholder="Type your message..." />
            <button id="send-btn">Send</button>
        </div>
    </div>

    <script>
        const socket = io();
        const chatBox = document.getElementById('chat-box');
        const messageInput = document.getElementById('message-input');
        const sendBtn = document.getElementById('send-btn');
        const statusDiv = document.getElementById('status');

        // Connection status
        socket.on('connect', () => {
            statusDiv.innerHTML = '🟢 Connected!';
            statusDiv.style.background = '#0A4A2A';
        });

        socket.on('disconnect', () => {
            statusDiv.innerHTML = '🔴 Disconnected';
            statusDiv.style.background = '#4A0A0A';
        });

        // Receive message from server
        socket.on('message', (data) => {
            addMessage(data.username || 'Server', data.text, data.id === socket.id);
        });

        // Send message
        function sendMessage() {
            const text = messageInput.value.trim();
            if (text) {
                socket.emit('message', text);
                messageInput.value = '';
                messageInput.focus();
            }
        }

        sendBtn.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });

        function addMessage(username, text, isOwn) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isOwn ? 'user' : 'server'}`;
            messageDiv.innerHTML = isOwn ? `<strong>You:</strong> ${text}` : `<strong>${username}:</strong> ${text}`;
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }
    </script>
</body>
</html>

4. Basic Server – Connection Establish Karna

Complete Server with Events:

Code
// server.js (enhanced)
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, {
  cors: { origin: "*", methods: ["GET", "POST"] }
});

app.use(express.static('public'));

// Store connected users
const users = new Map(); // socketId -> { username, room }

io.on('connection', (socket) => {
  console.log(`🟢 New connection: ${socket.id}`);
  
  // ============ USER JOIN ============
  socket.on('user-join', ({ username, room }) => {
    socket.join(room);
    users.set(socket.id, { username, room });
    
    // Welcome message for new user
    socket.emit('message', {
      username: 'System',
      text: `Welcome ${username} to room "${room}"!`,
      id: socket.id
    });
    
    // Notify others in room
    socket.to(room).emit('message', {
      username: 'System',
      text: `${username} joined the chat!`,
      id: socket.id
    });
    
    // Update user list
    const roomUsers = getRoomUsers(room);
    io.to(room).emit('room-users', roomUsers);
  });
  
  // ============ SEND MESSAGE ============
  socket.on('message', (text) => {
    const user = users.get(socket.id);
    if (user) {
      io.to(user.room).emit('message', {
        username: user.username,
        text: text,
        id: socket.id,
        timestamp: new Date().toISOString()
      });
    }
  });
  
  // ============ TYPING INDICATOR ============
  socket.on('typing', (isTyping) => {
    const user = users.get(socket.id);
    if (user) {
      socket.to(user.room).emit('user-typing', {
        username: user.username,
        isTyping
      });
    }
  });
  
  // ============ DISCONNECT ============
  socket.on('disconnect', () => {
    const user = users.get(socket.id);
    if (user) {
      console.log(`🔴 User ${user.username} disconnected`);
      
      socket.to(user.room).emit('message', {
        username: 'System',
        text: `${user.username} left the chat!`,
        id: socket.id
      });
      
      // Update user list
      const roomUsers = getRoomUsers(user.room);
      io.to(user.room).emit('room-users', roomUsers);
      
      users.delete(socket.id);
    }
  });
});

function getRoomUsers(room) {
  const roomUsers = [];
  for (const [id, user] of users.entries()) {
    if (user.room === room) {
      roomUsers.push({ id, username: user.username });
    }
  }
  return roomUsers;
}

server.listen(3000, () => {
  console.log(`🚀 Server running on http://localhost:3000`);
});

5. Events – emit, on, broadcast

Socket.io Event Types:

MethodDescription
socket.emit()Sirf specific client ko bhejo
socket.broadcast.emit()Sab clients ko except sender
io.emit()Sab clients ko (including sender)
socket.to(room).emit()Specific room ke sab clients ko

Examples:

Code
// 1. Single client
socket.emit('private-message', { text: 'Only you see this' });

// 2. All except sender (broadcast)
socket.broadcast.emit('user-joined', { username: 'Rahul' });

// 3. All clients (including sender)
io.emit('system-message', { text: 'Server restarting in 5 minutes' });

// 4. Room - all in room except sender
socket.to('room-1').emit('room-message', { text: 'Hello room!' });

// 5. Room - all in room (including sender)
io.to('room-1').emit('room-announcement', { text: 'Meeting at 5 PM' });

// 6. Multiple rooms
socket.to('room-1').to('room-2').emit('broadcast', { text: 'Multi-room' });

// 7. Except specific socket
socket.broadcast.except(socket.id).emit('event', data);

6. Rooms – Private Chat

Room Implementation:

Code
// Join room
socket.on('join-room', ({ roomId, username }) => {
  // Leave previous rooms
  const rooms = Array.from(socket.rooms);
  rooms.forEach(room => {
    if (room !== socket.id) socket.leave(room);
  });
  
  // Join new room
  socket.join(roomId);
  
  // Store user info
  users.set(socket.id, { username, room: roomId });
  
  // Notify room
  socket.to(roomId).emit('user-joined', { username });
  
  // Send previous messages (from database)
  // ...
});

// Send message to specific room
socket.on('room-message', ({ roomId, text }) => {
  const user = users.get(socket.id);
  io.to(roomId).emit('new-message', {
    username: user.username,
    text,
    timestamp: new Date()
  });
});

// Leave room
socket.on('leave-room', () => {
  const user = users.get(socket.id);
  if (user) {
    socket.leave(user.room);
    socket.to(user.room).emit('user-left', { username: user.username });
    users.delete(socket.id);
  }
});

Client Side for Rooms:

Code
// Join a room
function joinRoom(roomId) {
  socket.emit('join-room', { roomId, username: currentUser });
}

// Send room message
function sendRoomMessage(roomId, text) {
  socket.emit('room-message', { roomId, text });
}

// Listen for room events
socket.on('user-joined', ({ username }) => {
  addSystemMessage(`${username} joined the room`);
});

socket.on('new-message', ({ username, text }) => {
  addMessage(username, text);
});

7. Complete Chat App – Step by Step

Backend (server.js):

Code
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);

app.use(express.static('public'));

const users = new Map();
const messages = []; // Store last 50 messages

io.on('connection', (socket) => {
  let currentUser = null;
  let currentRoom = 'general';
  
  // Auto-join default room
  socket.join('general');
  
  // Send last 50 messages to new user
  socket.emit('history', messages.slice(-50));
  
  socket.on('set-username', (username) => {
    currentUser = username;
    users.set(socket.id, { username, room: currentRoom });
    
    socket.broadcast.emit('system-message', {
      text: `${username} joined the chat`,
      timestamp: new Date()
    });
    
    io.emit('users-list', Array.from(users.values()).map(u => u.username));
  });
  
  socket.on('chat-message', (text) => {
    const message = {
      username: currentUser,
      text,
      timestamp: new Date(),
      room: currentRoom
    };
    
    messages.push(message);
    if (messages.length > 100) messages.shift();
    
    io.to(currentRoom).emit('chat-message', message);
  });
  
  socket.on('typing', (isTyping) => {
    socket.to(currentRoom).broadcast.emit('user-typing', {
      username: currentUser,
      isTyping
    });
  });
  
  socket.on('join-room', (room) => {
    socket.leave(currentRoom);
    currentRoom = room;
    socket.join(room);
    
    socket.emit('system-message', { text: `Joined ${room} room` });
    socket.to(room).broadcast.emit('system-message', {
      text: `${currentUser} joined ${room}`,
      timestamp: new Date()
    });
  });
  
  socket.on('disconnect', () => {
    if (currentUser) {
      io.emit('system-message', {
        text: `${currentUser} left the chat`,
        timestamp: new Date()
      });
      
      users.delete(socket.id);
      io.emit('users-list', Array.from(users.values()).map(u => u.username));
    }
  });
});

server.listen(3000, () => {
  console.log('Chat server running on port 3000');
});

Frontend (public/index.html):

Code
<!DOCTYPE html>
<html>
<head>
    <title>Live Chat App</title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background: #1a1a2e; color: white; }
        .app { display: flex; height: 100vh; }
        .sidebar { width: 250px; background: #16213e; padding: 20px; }
        .sidebar h3 { margin-bottom: 15px; color: #61DAFB; }
        .sidebar ul { list-style: none; }
        .sidebar li { padding: 8px; margin: 5px 0; background: #0f3460; border-radius: 5px; cursor: pointer; }
        .sidebar li.active { background: #61DAFB; color: #16213e; }
        .chat-area { flex: 1; display: flex; flex-direction: column; }
        .chat-header { padding: 20px; background: #16213e; border-bottom: 1px solid #0f3460; }
        .messages { flex: 1; overflow-y: auto; padding: 20px; }
        .message { margin-bottom: 15px; display: flex; flex-direction: column; }
        .message .username { font-size: 12px; color: #61DAFB; margin-bottom: 4px; }
        .message .text { background: #0f3460; padding: 8px 12px; border-radius: 8px; display: inline-block; max-width: 70%; }
        .message.own { align-items: flex-end; }
        .message.own .text { background: #61DAFB; color: #16213e; }
        .system-message { text-align: center; color: #888; font-size: 12px; margin: 10px 0; }
        .typing-indicator { font-size: 12px; color: #61DAFB; margin-top: 5px; }
        .input-area { display: flex; padding: 20px; background: #16213e; gap: 10px; }
        .input-area input { flex: 1; padding: 12px; border: none; border-radius: 5px; font-size: 14px; }
        .input-area button { padding: 12px 24px; background: #61DAFB; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
        .username-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; }
        .username-modal-content { background: #16213e; padding: 30px; border-radius: 10px; text-align: center; }
        .username-modal input { padding: 12px; margin: 15px 0; width: 100%; border-radius: 5px; border: none; }
        .username-modal button { padding: 10px 20px; background: #61DAFB; border: none; border-radius: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <div id="usernameModal" class="username-modal">
        <div class="username-modal-content">
            <h2>💬 Welcome to Live Chat</h2>
            <p>Enter your username to continue</p>
            <input type="text" id="usernameInput" placeholder="Username" maxlength="20">
            <button onclick="setUsername()">Join Chat</button>
        </div>
    </div>

    <div class="app" style="display: none;" id="chatApp">
        <div class="sidebar">
            <h3>📌 Rooms</h3>
            <ul id="roomsList">
                <li data-room="general" class="active"># General</li>
                <li data-room="technology"># Technology</li>
                <li data-room="gaming"># Gaming</li>
                <li data-room="random"># Random</li>
            </ul>
            <h3 style="margin-top: 20px;">👥 Online Users</h3>
            <ul id="usersList"></ul>
        </div>
        <div class="chat-area">
            <div class="chat-header">
                <h2 id="roomName"># General</h2>
            </div>
            <div class="messages" id="messages"></div>
            <div class="typing-indicator" id="typingIndicator"></div>
            <div class="input-area">
                <input type="text" id="messageInput" placeholder="Type a message...">
                <button id="sendBtn">Send</button>
            </div>
        </div>
    </div>

    <script>
        let socket;
        let currentUser = '';
        let currentRoom = 'general';
        
        function setUsername() {
            const username = document.getElementById('usernameInput').value.trim();
            if (username) {
                currentUser = username;
                socket = io();
                
                socket.emit('set-username', currentUser);
                
                document.getElementById('usernameModal').style.display = 'none';
                document.getElementById('chatApp').style.display = 'flex';
                
                setupSocketEvents();
            }
        }
        
        function setupSocketEvents() {
            const messagesDiv = document.getElementById('messages');
            const messageInput = document.getElementById('messageInput');
            const sendBtn = document.getElementById('sendBtn');
            const typingIndicator = document.getElementById('typingIndicator');
            
            let typingTimeout;
            
            socket.on('history', (history) => {
                history.forEach(msg => addMessage(msg.username, msg.text, msg.username === currentUser, msg.timestamp));
            });
            
            socket.on('chat-message', (data) => {
                addMessage(data.username, data.text, data.username === currentUser, data.timestamp);
            });
            
            socket.on('system-message', (data) => {
                addSystemMessage(data.text);
            });
            
            socket.on('user-typing', ({ username, isTyping }) => {
                if (isTyping) {
                    typingIndicator.innerHTML = `${username} is typing...`;
                } else {
                    typingIndicator.innerHTML = '';
                }
            });
            
            socket.on('users-list', (users) => {
                const usersList = document.getElementById('usersList');
                usersList.innerHTML = users.map(u => `<li>👤 ${u}</li>`).join('');
            });
            
            function sendMessage() {
                const text = messageInput.value.trim();
                if (text) {
                    socket.emit('chat-message', text);
                    messageInput.value = '';
                    socket.emit('typing', false);
                }
            }
            
            messageInput.addEventListener('input', () => {
                socket.emit('typing', true);
                clearTimeout(typingTimeout);
                typingTimeout = setTimeout(() => {
                    socket.emit('typing', false);
                }, 1000);
            });
            
            sendBtn.addEventListener('click', sendMessage);
            messageInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') sendMessage();
            });
            
            // Room switching
            document.querySelectorAll('#roomsList li').forEach(room => {
                room.addEventListener('click', () => {
                    document.querySelectorAll('#roomsList li').forEach(r => r.classList.remove('active'));
                    room.classList.add('active');
                    currentRoom = room.dataset.room;
                    document.getElementById('roomName').innerHTML = `# ${currentRoom}`;
                    messagesDiv.innerHTML = '';
                    socket.emit('join-room', currentRoom);
                });
            });
        }
        
        function addMessage(username, text, isOwn, timestamp) {
            const messagesDiv = document.getElementById('messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isOwn ? 'own' : ''}`;
            const time = timestamp ? new Date(timestamp).toLocaleTimeString() : new Date().toLocaleTimeString();
            messageDiv.innerHTML = `
                <div class="username">${username} • ${time}</div>
                <div class="text">${escapeHtml(text)}</div>
            `;
            messagesDiv.appendChild(messageDiv);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        
        function addSystemMessage(text) {
            const messagesDiv = document.getElementById('messages');
            const sysDiv = document.createElement('div');
            sysDiv.className = 'system-message';
            sysDiv.innerHTML = `📢 ${text}`;
            messagesDiv.appendChild(sysDiv);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
</body>
</html>

8. Typing Indicators – “User is typing…”

Backend:

Code
// Track typing status
let typingUsers = new Map();

socket.on('typing-start', ({ room, username }) => {
  socket.to(room).emit('user-typing', { username });
  typingUsers.set(socket.id, { username, room });
  
  // Auto clear after 3 seconds
  setTimeout(() => {
    if (typingUsers.has(socket.id)) {
      socket.to(room).emit('user-stop-typing', { username });
      typingUsers.delete(socket.id);
    }
  }, 3000);
});

socket.on('typing-stop', ({ room, username }) => {
  socket.to(room).emit('user-stop-typing', { username });
  typingUsers.delete(socket.id);
});

Frontend:

Code
let typingTimeout;

messageInput.addEventListener('input', () => {
  socket.emit('typing-start', { room: currentRoom, username: currentUser });
  
  clearTimeout(typingTimeout);
  typingTimeout = setTimeout(() => {
    socket.emit('typing-stop', { room: currentRoom, username: currentUser });
  }, 1000);
});

socket.on('user-typing', ({ username }) => {
  typingIndicator.innerHTML = `${username} is typing...`;
});

socket.on('user-stop-typing', ({ username }) => {
  typingIndicator.innerHTML = '';
});

9. Online Status – Active Users

Backend:

Code
// Track online users
const onlineUsers = new Map();

socket.on('user-online', (userId) => {
  onlineUsers.set(userId, socket.id);
  io.emit('users-online', Array.from(onlineUsers.keys()));
});

socket.on('disconnect', () => {
  let disconnectedUser = null;
  for (const [userId, socketId] of onlineUsers.entries()) {
    if (socketId === socket.id) {
      disconnectedUser = userId;
      onlineUsers.delete(userId);
      break;
    }
  }
  if (disconnectedUser) {
    io.emit('user-offline', disconnectedUser);
    io.emit('users-online', Array.from(onlineUsers.keys()));
  }
});

Frontend:

Code
socket.on('users-online', (users) => {
  const onlineCount = users.length;
  document.getElementById('online-count').innerHTML = `${onlineCount} online`;
  
  const usersList = document.getElementById('online-users');
  usersList.innerHTML = users.map(u => `<li>🟢 ${u}</li>`).join('');
});

socket.on('user-offline', (user) => {
  addSystemMessage(`${user} went offline`);
});

10. Real-world Project – Group Chat App

Project Structure:

Code
group-chat-app/
├── server.js
├── package.json
├── public/
│   ├── index.html
│   ├── style.css
│   └── client.js
├── utils/
│   └── messageStore.js
└── .env

messageStore.js:

Code
// utils/messageStore.js
class MessageStore {
  constructor(maxMessages = 100) {
    this.messages = [];
    this.maxMessages = maxMessages;
  }
  
  add(message) {
    this.messages.push(message);
    if (this.messages.length > this.maxMessages) {
      this.messages.shift();
    }
  }
  
  getRecent(limit = 50) {
    return this.messages.slice(-limit);
  }
  
  getByRoom(room, limit = 50) {
    return this.messages.filter(m => m.room === room).slice(-limit);
  }
}

module.exports = new MessageStore();

11. Common Mistakes + Solutions

Mistake 1: Not handling disconnection

Code
// ❌ No disconnect handler
io.on('connection', (socket) => {
  // ... events
});

// ✅ Handle disconnection
io.on('connection', (socket) => {
  socket.on('disconnect', () => {
    // Clean up user data
    console.log(`User ${socket.id} disconnected`);
  });
});

Mistake 2: Memory leak with listeners

Code
// ❌ Adding listeners on every reconnect
socket.on('message', handler1);
socket.on('message', handler2); // Duplicate!

// ✅ Use once() or removeListener
socket.off('message').on('message', handler);

Mistake 3: Not using rooms for private chat

Code
// ❌ Sending to all
io.emit('private-message', data);

// ✅ Send to specific socket
io.to(targetSocketId).emit('private-message', data);

Mistake 4: CORS issues in production

Code
// ❌ Allow all origins in production
const io = new Server(server, { cors: { origin: "*" } });

// ✅ Restrict origins
const io = new Server(server, {
  cors: { origin: "https://yourdomain.com" }
});

12. Quick Cheat Sheet

Socket.io Events:

MethodDescription
io.on('connection', cb)New connection
socket.on('event', cb)Listen to event
socket.emit('event', data)Send to client
socket.broadcast.emit('event', data)Send to all except sender
io.emit('event', data)Send to all
socket.join('room')Join room
socket.leave('room')Leave room
io.to('room').emit()Send to room

Installation:

Bash
npm install express socket.io
npm install -D nodemon

13. FAQ

Q1: WebSockets Node.js Hindi में सबसे important concept kya hai?
emit aur on events – ye data send aur receive karne ke liye hain।

Q2: Socket.io vs native WebSocket – kya use karein?
Socket.io – easier, auto-reconnect, fallback support। Native WebSocket – lighter, more control।

Q3: Rooms kyun use karein?
Private chat groups banane के लिए। Har room independent होता है।

Q4: Broadcast vs emit – kya antar hai?
emit – specific client को। broadcast – sab clients को except sender।

Q5: Socket.io scaling kaise karein?
Redis adapter use karo – multiple server instances ke beech messages share karne के लिए।

Q6: Typing indicator kaise implement karein?
Client input event par typing event bhejo, 1 second bad stop-typing।

Q7: Messages store kaise karein?
Database (MongoDB, PostgreSQL) mein store karo। Socket.io sirf real-time communication के लिए है।

Q8: Authentication kaise lagayein?
Socket.io middleware use karo – io.use((socket, next) => { ... })

Q9: Production mein WebSocket port kaun sa use karein?
Same port as HTTP (443 for HTTPS, 80 for HTTP) ya separate port (3000)。

Q10: Offline messages kaise handle karein?
Database mein messages store karo, user reconnect hone par send karo।

14. Conclusion

बहुत बढ़िया दोस्तों! आज हमने WebSockets Node.js Hindi को पूरी detail में समझा।

Quick Recap:

ConceptKey Takeaway
WebSocketPersistent bidirectional connection
Socket.ioWebSocket library with fallbacks
Eventsemit (send), on (receive)
RoomsPrivate chat groups
BroadcastSend to all except sender

Mera personal experience:

जब मैंने पहली बार Socket.io use kiya, toh real-time chat app 30 minutes mein ban gaya! HTTP polling se 10x faster aur easier hai। Bas yaad rakho – production mein Redis adapter use karna scaling के लिए।

Tum bhi ye steps follow karo:

  1. ✅ Basic Socket.io server banao
  2. ✅ emit/on events samjho
  3. ✅ Rooms implement karo
  4. ✅ Typing indicators add karo
  5. ✅ Production deployment karo

अब तुम्हारी बारी है!

नीचे comment में बताओ:

  1. तुमने कभी live chat app banaya hai?
  2. WebSockets vs HTTP Polling – kya use karoge?
  3. अगला topic क्या चाहिए? (Docker? GraphQL? Redis?)

The Easy Master पर बने रहो। Happy Real-time Coding! 🚀💬

Resources

Additional Resources

Post Views: 281
TheEasyMaster

Author at The Easy Master.

Previous
JWT Authentication Node.js – Secure Login System बनाए 2026
 Next
Async Await vs Promises – Node.js में Async Code कैसे सीखें?

Related posts

Node.js क्या है? 2026 में अपना पहला Backend Server बनाएँ
Backend

Node.js क्या है? 2026 में अपना पहला Backend Server बनाएँ

नमस्ते दोस्तों! 🙏स्वागत है The Easy Master पर! क्या तुमने कभी सोचा है – React frontend to bana liya, backend kaise banayein? Frontend mein…

April 17, 2026 15 min read
1. Express.js Setup – पहला Server कैसे बनाएं (Step-by-Step) 2026
Backend

1. Express.js Setup – पहला Server कैसे बनाएं (Step-by-Step) 2026

नमस्ते दोस्तों! 🙏स्वागत है The Easy Master पर! क्या तुमने कभी सोचा है – backend server कैसे बनाते हैं? API कैसे create करते हैं?…

April 21, 2026 19 min read
7. Express MongoDB CRUD – Complete REST API Example
Backend

7. Express MongoDB CRUD – Complete REST API Example

नमस्ते दोस्तों! 🙏स्वागत है The Easy Master पर! क्या तुमने कभी सोचा है – Express.js and MongoDB se complete CRUD API कैसे बनाएं? Create,…

April 29, 2026 20 min read

Leave a Reply

Your email address will not be published. Required fields are marked *