What Is WebSocket? How Real-Time Communication Works Between Browser and Server WebSocket چیست؟ چگونه ارتباط لحظه‌ای بین مرورگر و سرور ایجاد می‌شود؟

What Is WebSocket? How Real-Time Communication Works Between Browser and Server

In many websites, communication between the browser and the server works through a simple request and response model. The browser sends a request, the server processes it, and then sends a response back. This approach works very well for many web applications, but it is not always the best solution for applications that need real-time updates.

WebSocket is a communication protocol that allows a persistent, two-way connection between a Client and a Server. Once the connection is established, both the browser and the server can send data at any time.

Why Is Normal HTTP Not Always Enough for Real-Time Communication?

With normal HTTP communication, the Client usually sends a request to the Server, and the Server returns a response related to that request.

For example, if an application needs to detect new information from the server, it may have to send a new request every few seconds. This technique, commonly known as Polling, can create unnecessary requests and consume additional resources.

WebSocket solves this problem by creating a persistent connection between the Client and Server.

How Does WebSocket Work?

The WebSocket process starts by establishing a connection. The browser sends a special request to the server to start a WebSocket connection.

If the server accepts the request, the WebSocket connection is established and a persistent communication channel is created between the Client and Server.

After that, a new connection does not need to be created for every message. Both sides can use the same connection to send and receive data.

Browser
   ↕
WebSocket Connection
   ↕
Server

What Is a WebSocket Handshake?

Before WebSocket communication actually begins, the browser and server need to establish and confirm the connection. This process is called the WebSocket Handshake.

The initial handshake uses HTTP and tells the server that the Client wants to upgrade the HTTP connection to a WebSocket connection.

If the server accepts the request, the connection is upgraded and two-way communication can begin.

Two-Way Communication with WebSocket

One of the most important features of WebSocket is two-way communication, also known as Full-Duplex Communication.

With this model, the Server does not have to wait for another request from the Client. If new information becomes available, the Server can immediately send that information to the Client.

For example, in an online chat application, when one user sends a new message, the server can immediately deliver that message to other connected users.

WebSocket vs REST API

Both WebSocket and REST API are used for communication between Clients and Servers, but they work in different ways.

This does not mean that WebSocket is always better than REST API. The right communication method depends on the requirements of the project.

What Are the Main Uses of WebSocket?

• Online Chat: Sending and receiving messages instantly between users.
• Real-Time Notifications: Showing new notifications without refreshing the page.
• Online Games: Transmitting player states and game events quickly.
• Real-Time Dashboards: Displaying live statistics and information.
• Live Tracking: Showing the real-time location of vehicles, delivery agents, or devices.
• Booking Systems: Updating the status of seats, cabins, or available capacity in real time.

Advantages of WebSocket

• Two-way communication between Client and Server
• Receiving data without sending a new Request
• Suitable for Real-Time applications
• Reduces the need for Polling in many scenarios
• Suitable for continuous data transmission

Limitations and Challenges of WebSocket

Despite its advantages, WebSocket is not always necessary. A persistent connection can consume more resources than a simple HTTP request, and managing a large number of simultaneous connections requires proper server-side architecture.

Large applications may also need to properly handle connection failures, Reconnection, Authentication, Scalability, and Error Handling.

A Simple WebSocket Example

A WebSocket connection can be created in the browser like this:

const socket = new WebSocket("wss://example.com/socket");

socket.onopen = () => {
    console.log("Connected");
};

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

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

In this example, the browser creates a WebSocket connection with the server. After the connection is established, messages received from the server can be handled using the onmessage event.

WebSocket in Real-World Projects

Imagine an online booking system where several users are viewing availability at the same time. If one user books a cabin, it would be better if the cabin status immediately changed for the other users as well.

With WebSocket, the Server can send the updated status to connected Clients immediately after the booking is completed. As a result, users can see the latest information without refreshing the page.

Frequently Asked Questions About WebSocket

Is WebSocket a Replacement for REST API?

No. WebSocket and REST API are designed for different requirements. REST API is suitable for many standard Client-Server operations, while WebSocket is more suitable for persistent and Real-Time communication.

Is WebSocket Only Used for Chat Applications?

No. Chat is one of the most popular WebSocket use cases, but it can also be used for online games, real-time dashboards, notifications, tracking systems, and many other Real-Time applications.

What Is the Difference Between WebSocket and HTTP?

HTTP usually works through a Request and Response model, while WebSocket creates a persistent two-way connection where both sides can send data during the connection.

What Is the Secure Version of WebSocket?

WSS is commonly used for secure WebSocket communication. It uses TLS to protect the connection.

Conclusion

WebSocket is an important technology for building Real-Time web applications. Unlike the traditional Request/Response model, WebSocket creates a persistent two-way connection between the Client and Server and allows the server to send new information without waiting for another Request.

For this reason, WebSocket is useful for online chat, real-time notifications, online games, live dashboards, booking systems, and tracking applications. However, it should be used according to the actual requirements of the project, with proper attention to connection management and scalability.