🔌 What is WebSocket?

📖 Definition

WebSocket is a protocol that enables bidirectional real-time communication between client and server. Unlike HTTP, it maintains a persistent connection and allows servers to push data to clients. Used in chat, notifications, games, and collaboration tools.

🎯 Simple Analogy

Phone Call vs Mail

HTTP (Mail)
- Send letter (request)
- Receive reply (response)
- Repeat for each message

WebSocket (Phone)
- One connection
- Continuous conversation
- Both can speak first

⚙️ How It Works

WebSocket Connection Process

1. HTTP handshake
   Upgrade: websocket

2. Server approval
   101 Switching Protocols

3. WebSocket established
   ↕ Bidirectional communication

💡 Key Example

Basic WebSocket (Client)

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Connected!');
  ws.send('Hello!');
};

ws.onmessage = (event) => {
  console.log('Message:', event.data);
};

ws.onclose = () => {
  console.log('Disconnected');
};

Socket.io Chat Example

// Server
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('chat-message', (message) => {
    io.emit('chat-message', {
      username: socket.username,
      message,
      timestamp: new Date()
    });
  });
});

// Client
const socket = io();

socket.on('chat-message', (data) => {
  displayMessage(data.message);
});

document.getElementById('send-btn').onclick = () => {
  socket.emit('chat-message', input.value);
};

🤔 FAQ

Q1. WebSocket vs HTTP Polling?

A:

// Polling (Inefficient)
setInterval(() => {
  fetch('/api/messages'); // Every 1 second
}, 1000);

// WebSocket (Efficient)
socket.on('new-message', (message) => {
  // Instant delivery!
});

Q2. Socket.io vs Native WebSocket?

A:

// Native WebSocket: Lightweight, fast
// Socket.io: Auto-reconnect, rooms, fallback

// Simple project → Native WebSocket
// Complex project → Socket.io

🎬 Summary

WebSocket enables real-time web applications:

• Bidirectional: Server ↔ Client
• Persistent: One connection
• Real-time: Instant data transfer
• Efficient: Better than polling

Use WebSocket for real-time features! 🔌✨