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 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
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 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
Let’s build a simple chat application using the ws library with Node.js.
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.
- Create an account on Pusher’s website here
- 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:
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:
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 firstname.lastname@example.org at any time.
References and more readings
Pusher | Leader In Realtime Technologies
Pusher empowers developers with APIs to create collaboration & communication features in their web and mobile apps.
The HTTP header is part of the Hypertext Transfer Protocol (HTTP) and transmits additional information during HTTP…
How to use ajax polling to pull JSON data from your restful API
How to use ajax polling to pull json data from your RESTful API and parse the JSON results. You can define the polling…