What Are WebSockets?

What Are WebSockets?

Welcome to the WebSockets Tutorial! In this series you will learn how to build real-time web applications using WebSockets and the Socket.io library. By the end, you will understand bidirectional communication and be able to emit and broadcast messages between a server and multiple connected clients.

The Problem with HTTP

Traditional HTTP follows a request-response pattern. The client sends a request, the server sends back a response, and the connection closes. If the client needs new data, it must send another request.

Client → Request → Server
Client ← Response ← Server
(connection closed)

Client → Request → Server
Client ← Response ← Server
(connection closed)

This works fine for loading web pages and fetching data, but it has a fundamental limitation — the server cannot push data to the client without the client asking first.

Why Is That a Problem?

Imagine building a chat application. With HTTP, the client would have to constantly ask the server "do you have new messages?" by sending requests over and over — this is called polling.

Approach	How It Works	Downside
Short Polling	Client sends a request every few seconds	Wastes bandwidth; delayed updates
Long Polling	Server holds the request open until data is available	Complex to implement; one message per connection
Server-Sent Events (SSE)	Server pushes data over a one-way HTTP stream	One-directional only (server → client)

None of these solutions are ideal for truly real-time, bidirectional communication.

Enter WebSockets

WebSockets provide a persistent, full-duplex connection between the client and the server. Once the connection is established, both sides can send data to each other at any time — without waiting for a request.

Client ←→ Server
(connection stays open)

Server can push data at any time
Client can send data at any time
Both happen simultaneously

How WebSockets Work

A WebSocket connection starts as a regular HTTP request with a special "upgrade" header. If the server supports WebSockets, it agrees to upgrade the connection. From that point on, the connection switches from HTTP to the WebSocket protocol (ws:// or wss://).

1. Client sends HTTP request with "Upgrade: websocket" header
2. Server responds with "101 Switching Protocols"
3. Connection upgrades from HTTP to WebSocket
4. Persistent, bidirectional communication begins
5. Either side can close the connection when done

This initial HTTP handshake is called the WebSocket handshake. After the upgrade, data flows as lightweight frames instead of full HTTP requests, making it much faster.

WebSocket vs HTTP Comparison

Feature	HTTP	WebSocket
Connection	Opens and closes per request	Stays open persistently
Direction	Client → Server (request-response)	Bidirectional (both ways at once)
Server push	Not natively supported	Server can push data anytime
Overhead	Full HTTP headers on every request	Lightweight frames after handshake
Latency	Higher (new connection each time)	Lower (persistent connection)
Protocol	http:// or https://	ws:// or wss://

Real-World Use Cases

• Chat applications — messages appear instantly for all users
• Live notifications — push alerts without the user refreshing
• Collaborative editing — Google Docs-style real-time collaboration
• Live sports scores — scores update the moment they change
• Online gaming — real-time player movement and actions
• Stock tickers — live price updates streaming to the browser
• IoT dashboards — sensor data displayed in real time

What Is Socket.io?

The raw WebSocket API in JavaScript works, but it is low-level. Socket.io is a library that wraps WebSockets and adds powerful features on top:

Feature	Raw WebSocket	Socket.io
Automatic reconnection	❌ You must build it yourself	✅ Built-in
Fallback transports	❌ WebSocket only	✅ Falls back to long polling
Room/namespace support	❌ Not available	✅ Built-in rooms and namespaces
Event-based API	Basic onmessage	✅ Custom named events
Broadcasting	❌ Manual implementation	✅ One-line broadcasting
Binary support	✅ Yes	✅ Yes

Socket.io has two parts — a server-side library for Node.js and a client-side library for the browser. They are designed to work together seamlessly.

What You Will Build in This Series

• An Express server with Socket.io integrated
• A client that connects and communicates in real time
• Custom event emitters to send named messages
• Broadcasting messages from one client to all others

Prerequisites

• Basic knowledge of JavaScript (ES6+)
• Familiarity with Node.js and npm
• HTML and CSS basics
• A code editor (VS Code recommended)
• Node.js installed on your machine

Key Takeaways

• HTTP uses a request-response model — the server cannot push data without a client request
• WebSockets provide a persistent, full-duplex connection for real-time communication
• The connection starts with an HTTP handshake and upgrades to the WebSocket protocol
• Socket.io wraps WebSockets with automatic reconnection, rooms, broadcasting, and fallback transports
• Real-time apps like chat, notifications, and live dashboards all rely on WebSocket-style connections