Introduction to Processing Real-Time Updates

Real-time is a very hot topic nowadays. The demand for real-time features has been growing in web applications. So how can you process real-time messages in the frontend and update the displayed data automatically in the UI? This is what we’ll cover in this chapter. We’ll start by explaining the requirements, and then we’ll walk you through the different steps to implement the reactive pattern for consuming real-time updates. Finally, we’ll learn the reactive pattern for handling reconnection.

Defining the requirement

There are two techniques available for publishing real-time data on the web:

• Pull technique: This is where the client raises a request to get the latest version of data. HTTP polling and HTTP long polling are two examples of implementations of the pull technique.

• Push technique: This is where the server pushes updates to the client. WebSockets and server-sent events are two implementations of the push technique.

In general, push techniques have a lower latency compared to pull ones. We’re not going to dive into these techniques in detail and compare them since it’s not the goal of this chapter. However, we’ll use the WebSocket technology for our requirement. In short, the WebSocket protocol is a stateful communication protocol that establishes a low-latency, bidirectional communication channel between a client and a server. This way, messages can be sent back and forth between the server and the client. The following diagram illustrates the WebSocket communication flow: