Building Real-time Apps
With all the latest innovations of standard web technologies, customer standards have certainly risen over the last decade and expect a snappy, smooth and error-free display with every action taken in an app.
Real-time data transmission allows us to interact and watch events as they happen live across the globe such as sporting events, video conferences, and instant messaging between a group of friends.
To create a connection between the application on our device (the client), and the remote system that stores the application data (the server), we rely on communication protocols to receive and respond to our requests within a matter of seconds.
Request-response
There are a few ways of handling the communication between a client and server which will be explained below. To compare each method available we’ll refer to an example of using an instant messaging platform such as WhatsApp.
1. HTTP Requests
Most websites use the traditional HTTP Request system which is a one-way direction of data being transmitted from the client to the server. This is often acceptable for features that don’t require updates in real-time such as loading a news article that isn’t expected to change. However, using our example of WhatsApp, let’s say that you open up a chat with your friend and check your inbox:
- The client makes an HTTP request to the server for data.
- Once the handshaking is done, the connection opens in the client and server.
- The server does its’ work and sends the response back to the client using that open connection to show you a snapshot of your chat history.
- The connection finally closes.
The disadvantage to this method is that all requests from the client are manual and only a snapshot of your conversation is shown. If you kept the chat window open and your friend sent you a new message, you wouldn’t be able to see that unless you reloaded the page.
2. HTTP Short Polling
Short polling is the process of making requests in intervals (ex. 500ms, or 2 seconds).
In the case of checking for new messages in WhatsApp:
- The client makes an HTTP request to the server for data in intervals.
- The server does its work, sends the response back to the client.
- If there are no new changes since the last response, every response after that will come back empty. For this reason, short-polling is not recommended for chat apps.
A few downsides to this method are the delays between each request and also the fact that it’s very resource-intensive.
3. HTTP Long Polling
With long polling, the client makes a request to the server and the connection remains open until there is a response. A timeout can also be set to refresh the connection if desired.
Say you open up your message inbox on WhatsApp:
- The client makes an HTTP request to the server for data.
- * The connection remains open until the server provides a response (such as a new message) or reaches a timeout.
- When the client receives the response (showing your new message) or timeout, this process is repeated again where another request is made and waits for the next response/timeout.
Long polling would be a better solution than the previous two methods as it is more resource-efficient and responds with real-time data. However, the server would need to keep track of multiple requests and their order in addition to the timeouts that occur.
4. Server-Sent Events (SSE) / EventSource
SSE is another effective method for displaying real-time data which allows the server to push updates to the client by leveraging the JavaScript EventSource interface. However, it is important to note that data can only be sent in one direction only from the server to the client. The client cannot send data to the server using SSE.
Going back to our WhatsApp example:
- The client makes a persistent long-term connection with the server.
- The server uses this connection to send data to the client (showing you live updates from your friends or new messages in your inbox).
- To send messages to a friend or change your publicly displayed information, we would need to use normal HTTP requests again which would not be ideal if we wanted to display this information in real-time.
5. WebSockets
The answer to many of the problems above is WebSockets which to no surprise is used by WhatsApp themselves. Unlike the previous methods, WebSockets is bi-directional, meaning data can flow both ways in real-time between a client (such as a browser) and the server where the application is hosted.
The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
- MDN
Websocket use cases
Let’s have a look at some real use cases of WebSockets. Developing a multiplayer game, chat app, or collaboration software on the open web requires real-time updates to provide the best user experiences. Some popular apps that you might have used before including Zoom, Slack, and Twitch all rely on the use of WebSockets to communicate real-time data and help them build features to provide:
- An instant messaging service sending instant messages between friends.
- A back-end video system pushing real-time viewer count updates to video players.
- A presence system broadcasting users’ online status to all their friends
WebSockets have revolutionized the client/server web technology and could also be used for apps with Social feeds, Clickstream data, Financial tickers, Sports updates, Multimedia chat, Location-based apps, and so on.
Top Websocket Libraries
1. Socket.io
Used by Microsoft Office, Yammer, Zendesk, Trello, and many other startups around the world. Socket.io is one of the most powerful Javascript frameworks on GitHub and depended-upon npm modules.
2. WS
WS is a simple to use, fast, and thoroughly tested WebSocket client and server implementation with nearly 34 million weekly downloads.
3. SockJS
SockJS is another great WebSocket library for Javascript that provides WebSocket-like objects, well-documented scaling, and load balancing techniques. Their GitHub repository currently has over 7.5k stars.
Popular WebSocket Solutions
Instead of setting up your own WebSocket server, you may also want to consider paid solutions such as Pusher.
Pusher
Pusher offers a list of robust features that have been tested and trusted by many large companies around the world. They offer bi-directional hosted APIs to build upon real-time features and include the necessary documentation, tutorials, and over 40 SDK’s to integrate with a wide range of tech stacks.
Sources