WebSockets Intro For Absolute Beginners — A Great Way To Build Real-time Apps

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.

--

--

--

coding & music

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Earthquake application with Huawei Map and Location kits

How can Softsquare’s Salesforce solutions improve your Customer Service?

Are Progressive Web Apps (PWA) Creating a Better Browsing Experience for Users?

Are Progressive Web Apps (PWA) Creating a Better Browsing Experience for Users? Featured Image

Microstrategy Interview questions by Skilapp

Designing OneLogin for Scale and Reliability — Part 2: Anatomy of a Cluster

The Magic of Ruby’s Enumerable Methods

How to send text messages with Python for Free

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saad Kureshi

Saad Kureshi

coding & music

More from Medium

Communication in Containers

HTTP Upgrade using REST in NodeJS (Practical Example)

MongoDB Replication on Ubuntu

Master-Slave Database Architecture in a nutshell