Why do we need them? Both technologies connect the client and server and provide real-time communication. For example, they are essential for chat apps, multiplayer games, and other scenarios where real-time interaction between the client and server is crucial.

We can achieve "real-time" communication by repeatedly sending HTTP requests at short intervals, but this approach is costly and inefficient for large applications.

WebSocket

WebSocket is an application-layer protocol over TCP that enables bidirectional communication between a client and a server. It establishes a connection through a single HTTP Upgrade request from the client, and the server responds with a status code. If the status code is code⧉ copy101, the connection is established; otherwise, the connection fails. Once established, WebSocket uses a TCP/IP connection to maintain communication.

Socket.IO

Socket.IO is a JavaScript library that uses WebSocket when available to establish a real-time connection. If WebSocket is unavailable, it falls back to long polling. It has the same functionality as WebSocket but includes additional built-in features, making it more advantageous in certain cases.

Which is which?

The actual purpose of both technologies is the same - they enable real-time communication between the client and server. Then which is which?

Connection

Both send periodic heartbeats. The server sends "ping" to the client (or vice versa), and if "pong" is not received, the connection is considered dead. When the connection is lost between the client and server due to a network issue or other reasons and there is no pong for the ping, Socket.IO automatically tries to reconnect the communication. With WebSocket, we must handle reconnections manually.

Fallbacks

WebSocket is a protocol that operates over TCP, while Socket.IO has something called fallback mechanism which ensures that Socket.IO uses WebSocket when available and automatically switches to long polling when it is not. Long polling occurs when the client makes a request, and once it receives a response, it immediately sends another request to keep the connection alive.

Broadcasting

It is another built-in method in Socket.IO. In Socket.IO, we can send messages to as many clients as we want or send them to a specific room. A room is like a group chat. Meanwhile, WebSocket requires manual implementation.

Event-based communication

WebSocket is a raw bidirectional connection that allows message exchange. Meanwhile, in Socket.IO, we can create custom events to handle messages, chat joining/leaving, and more.

Server (Node.js)

javascript⧉ copyconst { Server } = require('socket.io');
const io = new Server(3000);

io.on('connection', (socket) => {
    socket.on('custom_event', (data) => socket.emit('response_event', 'Hello from server!'));
});

Client (Browser)

javascript⧉ copyconst socket = io('http://localhost:3000');

socket.emit('custom_event', 'Hello from client!');
socket.on('response_event', (data) => console.log(data));

Performance

Because WebSocket is an application-layer protocol connection, it has lower latency than Socket.IO, which includes built-in methods like event-based communication. When Socket.IO sends a message, it adds additional metadata (e.g., event and data itself).

javascript⧉ copy{ "event": "custom_event", "data": "Hello" }

When to which?

1. Choose Socket.IO if you want to simplify development with more built-in methods while sacrificing a small fraction of time waiting for clients (e.g., chat apps, collaborative tools).
2. Choose WebSocket if you want complete freedom over development, to build everything from scratch, and need high performance with low latency (e.g., trading platforms, gaming servers).

Own experience

I worked with Socket.IO on my project Temprora, feel free to check it out and contribute.