Nov 25, 20214 min read

Introduction to WebSocket Protocol

The WebSocket protocol is a TCP-based network protocol. It defines how data is exchanged between networks. Because it is very reliable and efficient, it is used by almost all clients. TCP establishes communication between two endpoints, which are referred to as sockets. This allows data to be transferred in both directions.

Two-way connections like WebSocket (sometimes written as Web Socket) allow data to be exchanged in both directions simultaneously. The advantage of this is that data can be called up more quickly. WebSocket in particular enables direct communication between a web application and a WebSocket server. In concrete terms, this means you can call up a web page and have it displayed in “real time.”

How does WebSocket work?

Firstly, let’s look at how websites are called up without WebSocket. On the Internet, web pages are usually transferred via a HTTP connection. Data is communicated via the protocol so that the website can be displayed in your browser. For this to happen, for every action you make (e.g. a click), the client sends a request to the server.

When a website is called up via HTTP, the client first has to send a request to the server. The server then responds by sending the requested content. In other words, HTTP works based on a simple request-and-response model, which generates a significant delay.

HTTP connections use a typical request-and-response model where the client must first send a request to the server before the server sends the content.

With the WebSocket protocol things are different. Thanks to this technology, websites can be called up in real-time using a dynamic call-up procedure. Here, all the client needs to do is open the connection to the server. It does this by sending the WebSocket protocol handshake. The handshake contains all of the identification information required for data exchange.

After the handshake, the channel is kept open, allowing for almost continuous communication. The server can independently send data to the client without the client having to request it. Push notifications on websites use this principle. If the server has new information, it sends this to the client without any need for a specific request from the client side.

WebSocket can be visualized as an open communication channel. After the initial handshake, an active connection is established and the server can send data to the client directly, without having received a request.

To initiate communication, the client sends a request just like with HTTP, but after this, an open connection is maintained via TCP. The content of the handshake between the client and the server is as follows:

The client sends the request:

GET /chatService HTTP/1.1 
Host: server.example.com 
Upgrade: websocket 
Connection: Upgrade 
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== 
Sec-WebSocket-Origin: http://example.com 
Sec-WebSocket-Protocol: chat, superchat 
Sec-WebSocket-Version: 13

The server answers:

HTTP/1.1 101 Switching Protocols 
Upgrade: WebSocket 
Connection: Upgrade 
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= 
Sec-WebSocket-Protocol: superchat

The new URL scheme for websites that use WebSocket is ws instead of http. There is also an equivalent for secure connections: wss instead of https.

When can a web socket be used:

Real-time web application: Real-time web application uses a web socket to show the data at the client end, which is continuously being sent by the backend server. In WebSocket, data is continuously pushed/transmitted into the same connection which is already open, that is why web socket is faster and improves the application performance. For e.g. in the trading website or bitcoin trading, that is the most volatile thing which is happening over there, for displaying the price fluctuation and movement data is continuously pushed by the backend server to the client end by using the web socket channel.
Gaming application: In a Gaming application, you might focus on that, data is continuously receiving by the server and without refreshing the UI, it will take effect on the screen, UI gets automatically refreshed without even establishing the new connection, so it is very helpful in a Gaming application.
Chat application: Chat application uses WebSocket to stablish the connection only once for exchange, publishing and broadcasting the message among the subscriber. it reuses the same WebSocket connection, for sending and receiving the message and one to one message transfer.

When not to use WebSocket:

WebSocket can be used if we want any real-time updated or continuous streams of data which is being transmitted over the network. If we want to fetch old data, or want to get the data only once to process it with an application we should go with HTTP protocol, old data which is not required very frequently or fetched only once can be query by the simple HTTP request, so in this scenario better not use WebSocket.

Advantages:

It allows for two-way communication.
Websockets allow you to send and receive data much faster than HTTP. They're also faster than AJAX.
Communication between origins (however, this poses security risks).
Compatibility between platforms (web, desktop, mobile)
HTTP has a 2000-byte overhead, but WebSocket only has a 2-byte cost.
Long polling is replaced.
AJAX calls can only send string data types because WebSockets are data typed.

Disadvantages:

A fully HTML5-compliant web browser is required.
AJAX-like success mechanisms are not available in Websockets.
Websockets, unlike HTTP, do not provide intermediary/edge caching.
It is impossible to employ friendly HTTP statuses, bodies, and other elements to create even a simple protocol of your own.
HTTP is significantly easier to develop if your application doesn’t take a lot of dynamic interaction.

How WebSocket is differ from HTTP Connection

WebSocket Connection	HTTP Connection
WebSocket is a bidirectional communication protocol that can send the data from the client to the server or from the server to the client by reusing the established connection channel. The connection is kept alive until terminated by either the client or the server.	The HTTP protocol is unidirectional protocol works on the top of TCP protocol which is a connection-oriented transport layer protocol, we can create the connection by using HTTP request methods after getting the response HTTP connection get closed.
Almost all the real-time application like (trading, monitoring, notification) services uses WebSocket to receiving the data on a single communication channel.	Simple RESTful application uses HTTP protocol which is stateless.
All the frequently updated applications used WebSocket because it is faster than HTTP Connection.	When we do not want to retain a connection for a particular amount of time or reusing the single connection for transmitting the data, HTTP connection is slower than the WebSocket..