Explain the concept of the Web Socket API

TL;DR

The WebSocket API provides a way to open a persistent connection between a client and a server, allowing for real-time, two-way communication. Unlike HTTP, which is request-response based, WebSocket enables full-duplex communication, meaning both the client and server can send and receive messages independently. This is particularly useful for applications like chat apps, live updates, and online gaming.

The following example uses Postman's WebSocket echo service to demonstrate how web sockets work.

// Postman's echo server that will echo back messages you send
const socket = new WebSocket('wss://ws.postman-echo.com/raw');

// Event listener for when the connection is open
socket.addEventListener('open', function (event) {
  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server
});

// Event listener for when a message is received from the server
socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data);
});

What is the WebSocket API?

The WebSocket API is a technology that provides a way to establish a persistent, low-latency, full-duplex communication channel between a client (usually a web browser) and a server. This is different from the traditional HTTP request-response model, which is stateless and requires a new connection for each request.

Key features

Full-duplex communication: Both the client and server can send and receive messages independently.
Low latency: The persistent connection reduces the overhead of establishing a new connection for each message.
Real-time updates: Ideal for applications that require real-time data, such as chat applications, live sports updates, and online gaming.

How it works

Connection establishment: The client initiates a WebSocket connection by sending a handshake request to the server.
Handshake response: The server responds with a handshake response, and if successful, the connection is established.
Data exchange: Both the client and server can now send and receive messages independently over the established connection.
Connection closure: Either the client or server can close the connection when it is no longer needed.

Example usage

Here is a basic example of how to use the WebSocket API in JavaScript, using Postman's WebSocket Echo Service.

// Postman's echo server that will echo back messages you send
const socket = new WebSocket('wss://ws.postman-echo.com/raw');

// Event listener for when the connection is open
socket.addEventListener('open', function (event) {
  console.log('Connection opened');
  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server
});

// Event listener for when a message is received from the server
socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data);
});

// Event listener for when the connection is closed
socket.addEventListener('close', function (event) {
  console.log('Connection closed');
});

// Event listener for when an error occurs
socket.addEventListener('error', function (event) {
  console.error('WebSocket error: ', event);
});

Use cases

Chat applications: Real-time messaging between users.
Live updates: Stock prices, sports scores, or news updates.
Online gaming: Real-time interaction between players.
Collaborative tools: Real-time document editing or whiteboarding.