What are WebSockets?

WebSockets are a communication protocol that enables bi-directional, full-duplex communication between a web client and a server. Unlike HTTP, which is a request-response protocol, WebSockets provide a persistent connection that allows data to be exchanged continuously in both directions.

This makes them perfect for applications that require real-time data updates, such as:

• Chat applications
• Live dashboards
• Stock tickers
• Gaming applications

How WebSockets Work

Here's a simplified explanation of how WebSockets work:

1. Handshake: The client initiates a WebSocket connection by sending a handshake request to the server. This request includes information like the protocol version and the URL of the WebSocket server.
2. Connection Establishment: The server responds to the handshake request, either accepting or rejecting the connection. If accepted, a WebSocket connection is established.
3. Bi-directional Communication: Once the connection is established, both the client and server can send data to each other at any time. This data can be text, binary, or a combination of both.
4. Closing the Connection: Either the client or server can initiate the closure of the connection by sending a close message.

Example Implementation

Let's look at a simple example of how to use WebSockets with JavaScript:

Client-side (JavaScript)

const socket = new WebSocket("ws://your-websocket-server.com");

socket.onopen = () => {
  console.log("WebSocket connection opened");
  socket.send("Hello from the client!");
};

socket.onmessage = (event) => {
  console.log("Message from server:", event.data);
};

socket.onerror = (error) => {
  console.error("WebSocket error:", error);
};

socket.onclose = () => {
  console.log("WebSocket connection closed");
};
            

Server-side (Node.js with Socket.IO)

const io = require("socket.io")(3000);

io.on("connection", (socket) => {
  console.log("New client connected");

  socket.on("message", (message) => {
    console.log("Message from client:", message);
    socket.emit("message", "Hello from the server!");
  });

  socket.on("disconnect", () => {
    console.log("Client disconnected");
  });
});
            

This example demonstrates a basic WebSocket connection between a client and a server. The client sends a message to the server, and the server responds with a message back to the client. Both the client and server can also listen for events like connection open, message received, error, and connection close.