Revisiting Websockets

A better approach to real-time communication, low-latency and bidirectional data exchange.

web

Websockets stand as a powerful alternative to traditional HTTP, providing real-time, bidirectional communication between clients and servers.

The Basics

HTTP: The Request-Response Model

HTTP (Hypertext Transfer Protocol) operates on a request-response model. A client sends a request to a server, which processes the request and responds. This model is effective for static content but has limitations in real-time communication.

// Client-Side HTTP with Axios
const axios = require('axios');
 
axios
  .get('https://api.example.com/data')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error.message));

Websockets: Real-time Bidirectional Communication

Websockets introduce a persistent connection between the client and server, allowing them to send messages independently. This enables real-time updates and reduces latency, making Websockets ideal for applications requiring instant data exchange.

// Server-Side Websockets with Express.js
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
 
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
 
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    // Process and send a response
    ws.send('Server received your message');
  });
});
 
server.listen(3000, () => {
  console.log('Websocket server listening on port 3000');
});

Differences

Latency and Efficiency

  • HTTP: Multiple requests and responses, leading to higher latency.
  • Websockets: Persistent connection minimizes latency, enabling real-time updates with lower overhead.

Data Format

  • HTTP: Typically exchanges data in JSON or other formats using multiple requests.
  • Websockets: Supports various data formats, including JSON, binary, and custom serialization for efficient data transfer.

If you are thinking, why not just send HTTP requests at specific intervals, or whenever needed?
Well, you can, but it is not as efficient as Websockets. HTTP requests are heavier than Websocket messages, and the overhead of establishing a connection for each request adds up. Websockets are more efficient for real-time communication.

Client Side Implementation

HTTP with Axios

// Client-Side HTTP Request with Axios
const axios = require('axios');
 
axios
  .get('https://api.example.com/data')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error.message));

Websockets with Browser API

// Client-Side Websockets
const ws = new WebSocket('wss://api.example.com');
 
ws.onopen = () => {
  ws.send('Hello, server!');
};
 
ws.onmessage = (event) => {
  console.log(`Received: ${event.data}`);
};
 
ws.onclose = (event) => {
  console.log(`Connection closed: ${event.code}, ${event.reason}`);
};

Conclusion

Websockets provide a game-changing approach to real-time communication, offering low-latency, bidirectional data exchange between clients and servers. While HTTP remains essential for many use cases, Websockets excel in scenarios requiring instant updates and efficient data transfer. Understanding these concepts and implementing them empowers developers to build responsive and interactive web apps.

← Back to shorts