WebSockets with Socket.io

The Problem: HTTP is One-Way

Traditional HTTP works like this:

``` Client → Request → Server Server → Response → Client Connection CLOSED

Need new data? Make NEW request again! ```

**Problems with HTTP for real-time:** - Server can't push data to client - Client must keep asking (polling) - Wastes bandwidth - High latency - Not efficient for real-time updates

**Example:** Chat app with HTTP polling ``` User A sends message → Server stores it User B keeps asking: "Any new messages?" (every 1 second) User B keeps asking: "Any new messages?" (every 1 second) User B keeps asking: "Any new messages?" (every 1 second) ...wastes bandwidth, high latency ```

What are WebSockets?

WebSocket is a communication protocol that creates a **persistent, bidirectional connection** between client and server.

``` Client ←→ WebSocket Connection ←→ Server (Stays Open!)

Both can send data anytime, without request! ```

**Key Features:** - **Persistent connection** - Stays open until closed - **Bidirectional** - Both client and server can send data - **Low latency** - No HTTP overhead - **Real-time** - Instant data transfer - **Efficient** - No repeated connection setup

How WebSockets Work

### Step 1: Handshake (Initial Connection)

``` Client → HTTP Request (Upgrade to WebSocket) Server → HTTP Response (101 Switching Protocols) Connection UPGRADED to WebSocket! ```

### Step 2: Persistent Connection

``` Client ←→ WebSocket ←→ Server (Connection stays open)

Client can send: "Hello Server!" Server can send: "Hello Client!" (without request!) Both can send anytime! ```

### Step 3: Data Transfer

``` Client sends: "User A: Hello" Server receives: "User A: Hello" Server broadcasts: "User A: Hello" to all clients All clients receive instantly! ```

Visual Comparison

### HTTP Polling (Old Way) ``` Time → Client: Request? → Server: No data Client: Request? → Server: No data Client: Request? → Server: Here's data! Client: Request? → Server: No data Client: Request? → Server: No data

Result: Wastes bandwidth, high latency ```

### WebSocket (New Way) ``` Time → Client ←→ Server (Connection open) Client: "Hello" → Server Server: "Hi!" → Client (instant!) Server: "New message!" → Client (instant!) Client: "Thanks!" → Server

Result: Instant, efficient, real-time ```

Benefits of WebSockets

### 1. Real-Time Communication ``` HTTP: Client asks → Server responds (1-2 seconds delay) WebSocket: Server pushes → Client receives (instant!) ```

### 2. Lower Latency ``` HTTP: - Connection setup: 100ms - Request: 50ms - Response: 50ms Total: 200ms per request

WebSocket: - Connection setup: 100ms (once) - Data transfer: 5ms Total: 105ms (first time), 5ms (after) ```

### 3. Reduced Bandwidth ``` HTTP Polling (1 request/second): - 1000 requests/hour - Each request: 500 bytes - Total: 500KB/hour

WebSocket: - 1 connection - Only send when needed - Total: 50KB/hour

90% bandwidth saved! ```

### 4. Server Can Push Data ``` HTTP: Server waits for client request WebSocket: Server can send data anytime!

Example: Live notifications Server: "You have a new message!" → Client (No need for client to ask!) ```

### 5. Better for Real-Time Apps - Chat applications - Live notifications - Collaborative editing - Gaming - Stock prices - Live sports scores

When to Use WebSockets

**✅ Use WebSockets When:** - Real-time chat - Live notifications - Collaborative editing (Google Docs style) - Live dashboards - Gaming - Stock trading apps - Live sports scores - Any app needing instant updates

**❌ Don't Use WebSockets When:** - Simple CRUD operations - One-time data fetching - Static content - Traditional web pages - REST APIs work fine

Socket.io: Making WebSockets Easy

Socket.io is a library that makes WebSockets easier to use: - Automatic reconnection - Fallback to HTTP polling if WebSocket fails - Room management - Broadcasting - Event-based API

Setup

```bash npm install socket.io ```

Basic Server

```javascript 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);

io.on('connection', (socket) => { console.log(`User connected: ${socket.id}`); socket.on('chat message', (msg) => { console.log('Message:', msg); io.emit('chat message', msg); }); socket.on('disconnect', () => { console.log(`User disconnected: ${socket.id}`); }); });

server.listen(3000); ```

**What happens:** 1. Client connects → `connection` event fires 2. Client sends message → `chat message` event received 3. Server broadcasts to all clients → `io.emit()` 4. Client disconnects → `disconnect` event fires

Client Side

```html <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); socket.emit('chat message', 'Hello World!'); socket.on('chat message', (msg) => { console.log('Received:', msg); }); </script> ```

Real Example: Chat App

```javascript const users = new Map();

io.on('connection', (socket) => { socket.on('join', (username) => { users.set(socket.id, username); socket.broadcast.emit('user joined', username); socket.emit('online users', Array.from(users.values())); }); socket.on('chat message', (msg) => { const username = users.get(socket.id); io.emit('chat message', { username, message: msg, timestamp: new Date() }); }); socket.on('disconnect', () => { const username = users.get(socket.id); users.delete(socket.id); io.emit('user left', username); }); }); ```

Rooms (Group Communication)

```javascript socket.on('join room', (roomName) => { socket.join(roomName); console.log(`${socket.id} joined ${roomName}`); io.to(roomName).emit('message', `Welcome to ${roomName}`); });

socket.on('leave room', (roomName) => { socket.leave(roomName); });

io.to('room1').emit('message', 'Room 1 only');

socket.broadcast.emit('message', 'Everyone except sender'); ```

**Room Concept:** ``` All Users ├── Room 1 (Chat) │ ├── User A │ ├── User B │ └── User C ├── Room 2 (Support) │ ├── User D │ └── User E └── Room 3 (Gaming) ├── User F └── User G

Message to Room 1 → Only A, B, C receive Message to Room 2 → Only D, E receive ```

Authentication

```javascript const io = new Server(server, { cors: { origin: 'http://localhost:3000', credentials: true } });

io.use((socket, next) => { const token = socket.handshake.auth.token; if (isValidToken(token)) { socket.userId = getUserIdFromToken(token); next(); } else { next(new Error('Authentication error')); } });

const socket = io({ auth: { token: 'user-token-here' } }); ```

Real Example: Live Notifications

```javascript app.post('/api/orders', async (req, res) => { const order = await Order.create(req.body); io.to(`user-${order.userId}`).emit('new-order', { orderId: order.id, message: 'Your order has been placed!' }); res.json(order); });

socket.on('connection', (socket) => { const userId = socket.userId; socket.join(`user-${userId}`); }); ```

**Flow:** ``` User places order → API creates order Server sends notification via WebSocket User receives notification instantly! (No need to refresh page or poll) ```

WebSocket vs HTTP Comparison

| Feature | HTTP | WebSocket | |---------|------|-----------| | Connection | New each time | Persistent | | Direction | Client → Server | Bidirectional | | Latency | High (200ms+) | Low (5ms) | | Server Push | No | Yes | | Overhead | High | Low | | Real-time | No | Yes | | Use Case | CRUD, APIs | Chat, Live updates |

Performance Benefits

**HTTP Polling (1 request/second):** ``` Requests: 3600/hour Bandwidth: 500KB/hour CPU: High (handling requests) Latency: 1-2 seconds ```

**WebSocket:** ``` Connections: 1 persistent Bandwidth: 50KB/hour CPU: Low (just data transfer) Latency: < 50ms ```

**Result:** 90% less bandwidth, 95% less latency!

Common Use Cases

**1. Chat Applications** - WhatsApp, Telegram, Slack - Instant message delivery - Typing indicators - Online status

**2. Live Notifications** - Facebook notifications - Email alerts - Order updates - System alerts

**3. Collaborative Editing** - Google Docs - Multiple users editing - Real-time cursor positions - Live changes

**4. Gaming** - Multiplayer games - Real-time player positions - Instant actions - Live scores

**5. Live Dashboards** - Stock prices - Analytics - Monitoring - Real-time metrics

Key Takeaway

WebSockets enable real-time bidirectional communication. Server can push data without client request. Much faster and efficient than HTTP polling. Perfect for chat, notifications, collaborative editing, gaming. Socket.io makes WebSockets easy with automatic reconnection and room management. Use WebSockets when you need real-time updates, use HTTP for traditional CRUD operations.