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.

// Example of creating a WebSocket connection
const socket = new WebSocket('ws://example.com/socket');

// Event listener for when the connection is open
socket.addEventListener('open', function (event) {
  socket.send('Hello 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

1. Connection establishment: The client initiates a WebSocket connection by sending a handshake request to the server.
2. Handshake response: The server responds with a handshake response, and if successful, the connection is established.
3. Data exchange: Both the client and server can now send and receive messages independently over the established connection.
4. 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:

// Create a new WebSocket connection
const socket = new WebSocket('ws://example.com/socket');

// Event listener for when the connection is open
socket.addEventListener('open', function (event) {
  console.log('Connection opened');
  socket.send('Hello 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.

Further reading

• MDN WebSocket API documentation
• WebSocket.org
• Introduction to WebSockets