Feb 8, 2021
WebSockets Intro For Absolute Beginners — A Great Way To Build Real-time Apps
The HTTP Protocol
Before we get into WebSockets, let’s take a minute to talk about something that is a lot more familiar to us — the HTTP protocol. So what happens when you load up a webpage, say https://www.google.com/? A request is sent to the Google servers and in return, the server sends back a response — in this case, the Google homepage. As soon as the request is initiated from you (the client), a TCP connection is established between you and the server. And as soon as the server sends back a response, the TCP connection is closed. Therefore, an HTTP request is considered to be unidirectional, i.e., the client triggers a request, and in turn gets a response.
WebSockets
Now let’s move on to WebSockets. We are all familiar with the concept of online chatting, for example Facebook Messenger. Let’s say 2 friends, Ali and Humza, are chatting with each other through messenger. What happens when Ali sends Humza a message saying “I should learn about WebSockets”? Humza receives the message right away. He did not have to do anything, i.e., send a request to obtain that message. He was able to receive it instantaneously. As opposed to an HTTP request that is unidirectional, WebSockets are bidirectional. When Ali sends the message to Humza, the message is first sent to the server, and then the server further sends the message to Humza. The TCP connection that was established is kept alive in this case, until the server or the client decides to close the connection. And this is how WebSockets work in a nutshell.
It is important to note that WebSockets do not use the http:// or https:// nomenclature. Instead, they use ws:// or wss://. The way the WebSocket connection is established is a process called WebSocket handshake. It starts off as an HTTP request sent to the server by the client. But the request includes an “Upgrade” header, and when the server receives this header, it knows that the client wants to establish a WebSockets connection.
Where are WebSockets used?
Now that we know how WebSockets work, let’s talk about where they can be used. WebSockets are very useful for real-time applications, web-based games, chat applications, etc. For example, let’s take a look at https://www.nimo.tv/, a game live streaming platform. If you take a look at the Network tab from the Chrome Developer tools, as shown below, you can see a request URL: wss://wsapi.master.live/?… Notice how this URL starts with wss. This indicates that this URL is using WebSockets. If you navigate over to the “Messages” tab, you can actually see realtime data that is coming in and going out. Feel free to head over to Nimo TV and see this for yourself. Some additional information can also be found about this WebSocket connection in the Network tab, but for the sake of keeping this concise and simple, we won’t get into it.
Some Popular Node.js WebSocket Libraries
As with everything web development related, there are a multitude of options present for us to simplify the use of WebSockets. A few popular ones are listed below along with their Github stars.
Socket.io (52.4k stars)
sockjs (7.5k stars)
ws (15.7k stars)
websocket node (3.2k stars)
Conclusion
Hopefully that was a super simple and brief intro to the world of WebSockets. If you would like to learn more, make sure to visit the following references.
