In this article by Varun Chopra, author of the book WebSocket Essentials – Building Apps with HTML5 WebSockets, we will try to understand why we need and what is the importance of WebSockets, followed by when to use them and how WebSockets actually work.

Client server communication is one of the most important parts of any web application. Data communication between the server and client has to be smooth and fast so that the user can have an excellent experience. If we look into the traditional methods of server communication, we will find that those methods were limited and were not really the best solutions. These methods have been used by people for a long period of time and made HTML the second choice for data communication.

(For more resources related to this topic, see here.)

Why WebSockets

The answer to why we need WebSockets lies in the question—what are the problems with the other methods of communication? Some of the methods used for server communication are request/response, polling, and long-polling, which have been explained as follows:

• Request/Response: This is a commonly used mechanisms in which the client requests the server and gets a response. This process is driven by some interaction like the click of a button on the webpage to refresh the whole page. When AJAX came into the picture, it made the webpages dynamic and helped in loading some part of the webpage without loading the whole page.
• Polling: There are scenarios where we need the data to be reflected without user interaction, such as the score of a football match. In polling, the data is fetched after a period of time and it keeps hitting the server, regardless of whether the data has changed or not. This causes unnecessary calls to the server, opening a connection and then closing it every time.
• Long-polling: This is basically a connection kept open for a particular time period. This is one of the ways of achieving real-time communication, but it works only when you know the time interval.

The problems with these methods lead to the solution, which is WebSockets. It solves all the problems faced during the use of the old methods.

Importance of WebSockets

WebSockets comes into the picture to save us from the old heavy methods of server communication. WebSockets solved one of the biggest problems of server communication by providing a full-duplex two-way communication bridge. It provides both the server and client the ability to send data at any point of time, which was not provided by any of the old methods. This has not only improved performance but also reduced the latency of data. It creates a lightweight connection which we can keep open for a long time without sacrificing the performance. It also gives us full control to open and close the connection at any point of time.

WebSockets comes as a part of HTML5 standard, so we do not need to worry about adding some extra plugin to make it work. WebSockets API is fully supported and implemented by JavaScript. Almost all modern browsers now support WebSockets; this can be checked using the website http://caniuse.com/#feat=websockets which gives the following screenshot:

WebSockets need to be implemented on both the client and server side. On the client side, the API is a part of HTML5. But on the server side, we need to use a library that implements WebSockets. There are many—or we can say almost all—servers that support WebSockets API libraries now. Node.js, which is a modern JavaScript based platform also supports WebSockets based server implementation using different packages, which makes it really easy for developers to code both server and client-side code without learning another language.

When to use

WebSockets being a very powerful way of communication between the client and server, it is really useful for applications which need a lot of server interaction. As WebSockets gives us the benefit of real-time communication, applications that require real-time data transfer, like chatting applications, can leverage WebSockets. It is not only used for real-time communication but also for scenarios where we need only the server to push the data to the client.

The decision to use WebSockets can be made when we know the exact purpose of its usage. We should not use WebSockets when we just have to create a website with static pages and hardly any interaction. We should use WebSockets where the communication is higher in terms of data passing between the client and server.

There are many applications like stock applications where the data keeps updating in real time. Collaborative applications need real-time data sharing, such as a game of chess or a Ping-Pong game. WebSockets is majorly utilized in real-time gaming web applications.

How it works?

WebSockets communicates using the TCP layer. The connection is established over HTTP and is basically a handshake mechanism between the client and server. After the handshake, the connection is upgraded to TCP. Let’s see how it works through this flow diagram:

1. The first step is the HTTP call that is initiated from the client side; the header of the HTTP call looks like this:

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

   •      Here, Host is the name of the server that we are hitting.
   •      Upgrade shows that it is an upgrade call for, in this case, WebSockets. Connection defines that it is an upgrade call.
   •      Sec-Websocket-Key is a randomly generated key which is further used to authenticate the response. It is the authentication key of the handshake.
   •      Origin is also another important parameter which shows where the call originated from; on the server side, it is used to check the requester’s authenticity.
2. Once the server checks the authenticity a response is sent back, which looks like this:

   HTTP/1.1 101 Switching Protocols
   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
   Sec-WebSocket-Protocol: chat

   •      Here, Sec-WebSocket-Accept has a key which is decoded and checked with the key sent for confirmation that the response is coming to the right originator.
3. So, once the connection is open, the client and server can send the data to each other.
4. The data is sent in the form of small packets using TCP protocol. These calls are not HTTP so they are not visible directly under the Network tab of Developer Tools of a browser.

Summary

We learned why we need WebSockets and what their importance is. Along with that, we also learned when to use WebSockets and how they actually work.

Resources for Article:

Further resources on this subject:

• Let’s Chat [article]
• WebSocket – a Handshake! [article]
• Understanding WebSockets and Server-sent Events in Detail [article]