In the modern world of sleek interfaces and highly interactive web applications, giving a real-time update of the latest information to users is fast becoming a necessity for a fascinating user experience. While real-time updates are a plus for blogs and news feeds, it's an absolute necessity for time-sensitive web apps such as chat apps.
Real-time update strategies fall into two categories: Polling and Push. Polling strategies involve querying the server for new updates at intervals. Push strategies mean pushing new updates to the client by the server.
Here is an overview of various strategies for implementing real-time updates in web applications, starting with those under the polling category:
1) Window Refreshes at intervals:
This strategy involves reloading the entire web app at an interval to fetch the latest changes on the server-side. This strategy works fine for web apps that are server-side rendered. To accomplish this, you can either add the HTML meta tag for window refresh or use the window.reload javascript API. Code samples to refresh a web app every 30 seconds are present below:
<head>
<meta http-equiv="refresh" content="30">
</head>
setInterval(function() { location.reload() }, 30000 )
2) AJAX:
AJAX was a breakthrough improvement to the web that allowed web apps to make requests to servers without reloading the whole page.
Using AJAX for real-time updates involves making requests to servers for new updates at intervals and updating the web app with new updates. It's a simple enough approach that would be sufficient for most features that depend on real-time updates. The recommended strategy for web apps where a delayed real-time update will not significantly impair user experience or update interval is predictable.
Check out the gist below on how to implement a real-time update of 2 seconds with AJAX.
3) Websocket:
For web apps such as the stock markets reporting app and chats, where updates can be erratic and delayed updates can lead to a poor user experience, the underlying technical shortcomings with AJAX real-time updates begin to surface. In an attempt to fix these issues, WebSocket got introduced to the web.
With WebSocket, web apps can maintain a persistent connection with the server. WebSocket connections stay alive after receiving responses, unlike the short-lived request-response connection used by AJAX. Servers can push new updates to web apps via web sockets without the constraints of the traditional request-response cycle.
Check out this article on how to implement a WebSocket connection between a webpage and a NodeJS server
4) Managed Real-time Update Service
While WebSocket fixed the shortcomings with AJAX, it became an expensive approach regarding implementation and server-side cost. In response to the issues with AJAX and WebSockets, real-time update services emerged to manage the cost of managing real-time updates on the web and simplify the implementation of real-time updates so developers can focus on the logic of their web apps.
Real-time update service acts as a proxy between web app servers and the web app client. They receive new updates from the servers and oversee the push to the client. They manage real-time update concerns ranging from scaling of real-time connection to timeouts, dropoffs, persistent connection reconnect, fall back to AJAX from WebSockets, offline synching, among many others. An inexhaustive list of real-time update service include:
- Pusher
- Firebase cloud messaging
- Firebase Realtime Database
- Firebase Cloud Firestore
- PubNub
- OneSignal
- Twilio
P.S: For production usage, check out the pricing of these services
5) WebRTC
A relatively new introduction to the web touted as a peer-to-peer technology that enables direct real-time communications in web apps. It was introduced to the web to address technical constraints faced by web apps that don't fall into the client-server model of HTTP-Web - examples of such web apps include chat apps, music sharing web app, multicast streaming services.
WebRTC eliminates the need to have an intermediate server that maintains the connection between different users of a peer-to-peer web app, hence shaving off the extraneous latency introduced by servers in peer to peer web applications. For an intro to WebRTC, check this article
I hope this article has given a good overview of various strategies for implementing real-time updates in web apps. Kindly comment on what you think.
Top comments (0)