Building Real-time Apps — An analysis of WebSockets

Understanding WebSockets

WebSockets is a full-duplex communication protocol that works in real-time, that has revolutionized business domains such as game development and online stock market trading in the modern age. It is a communication protocol, similar to HTTP, that works over a TCP connection, but it has significant differences that make it special for these applications. If you are looking for a great introduction to WebSockets or are looking forward to integrating WebSockets in your application in the future, this article will be a great resource for you.

First, let us look at the HTTP protocol, and understand what it is.

HTTP Request Response Cycle

HTTP is a one-directional, half-duplex communication protocol. This means that at any given point of time, the communication flow can occur only in one direction; the client and server cannot talk to each other at the same time.
The server cannot send a response to the client unless the client explicitly requests it, and vice-versa. Another shortcoming of HTTP lies in the type of connection which is established between the server and client. In order to send a request and receive a response, a temporary connection needs to be established, which gets closed as soon as the client receives the response from the server, and a new connection needs to be established for another request-response cycle. Therefore, doing real-time communication using HTTP is not possible

A way to overcome these problems, and to make HTTP more suitable for full-duplex, real-time communication is by using a technique called long polling which can be implemented using asynchronous JavaScript techniques or AJAX. AJAX long polling involves the client sending a request to the server, then the server responds delays the response to the client until it receives some more data from the client. This prevents lossy communication, and prevents lagging, and thus we can deploy high frequency trading applications and online multiplayer games using this method.

An illustration of AJAX long polling

However one needs to keep in mind that techniques like Long Polling are merely workarounds, and that a truly bi-directional, full-duplex communication protocol would always be more desirable, and ultimately much more efficient, than a uni-directional, half-duplex communication protocol, not to mention way less complicated to implement via code.

Let’s talk about WebSockets.

WebSockets illustration

WebSockets is a more recent communication protocol, which similar to HTTP works over a TCP connection, but allows us to have full-duplex bi-directional communication, meaning that this allows the client and server to talk to each other at the same time. First a ‘handshake request’ is send by a WebSockets client to a WebSockets server. Then when a response is received, a persistent connection is established which does not close on its own, and has to be closed by either the server or client. In this persistent communication channel, since this is bi-directional, client and server can send messages and data to each other in real-time.

Building a basic WebSockets client and server using the ws library

Some popular WebSockets libraries for some mainstream programming languages include ws for Node.js, ws4py for Python, the well-known Play framework for Java, and Firehose for Ruby.

Let’s build a simple chat application using the ws library with Node.js.

  1. Create a folder, make sure you have Node.js installed in it. Check out the various ways you can install Node.js. Create 2 empty JavaScript files in it called client.js and server.js. The folder structure should look something like this:

2. Read the ws library docs. We’ll be creating a basic example to get an idea of how WebSockets works.

3. Add the following code to the client.js file.

Then, add this code to the server.js file

4. Start the server.js file with node server.js. Then, start the client file with node client.js. It is important to start the server before the client.

5. The expected behaviour occurs, i.e., the message string “something” gets sent from the client to the server.

Read the docs here so as to experiment with this library even more.

Using paid solutions like Pusher

There exist many paid or managed solutions in the industry that offer developers tools to build real-time apps. One of these tools is Pusher.

One of the main advantages of these paid solutions is that for developers, often times they provide a much cleaner syntax when it comes to coding, and they also offer a much easier to read documentation as compared to most open source WebSockets libraries.

These solutions also come useful if you are seeking to scale your app, as scaling your app using your own on-premise servers or using third party data hosting services like AWS often times costs a lot of money, and many of these paid WebSockets solutions offer amazing scalability options for a pittance. Many a times, even their trial versions are all you need.

Let’s build a simple real-time results feeder app using one of the many tutorials found on Pusher’s homepage.

  1. Create an account on Pusher’s website here
  2. Create a sandbox plan by clicking on ‘Channels’

3. Use the default settings and proceed to create the app.

4. Navigate here. This will be a quickstart tutorial to see Pusher’s capabilities. This is an app which shows live updation of the price of BTC (Bitcoin) in US Dollars per year. The generated data is fake though, as you can see from the code.

5. Follow along with the steps.

5. Your keys will be present in your dashboard.

6. Although this generates fake predicted data of BTC, it goes on to show the real-time capabilities of Pusher, and what you could do with it.

7. In the end your code should look like this:

index.html

server.js

Don’t forget to run npm install pusher before running the above server.js file.

8. Open the index.html file in the browser. You should see the BTC price getting updated like this:

Conclusion

In this article, we learned about the fundamental differences between WebSockets and HTTP protocols, and implemented WebSockets using an open source library (ws) as well as a paid one (Pusher) and discussed the differences between the two.

Feel free to reach out to me at vineet.s.pande@gmail.com at any time.

Cheers!

References and more readings

Junior Software Developer

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