Building a Real-time Sales Dashboard with WebSockets and Quarkus

A simple example to show how to use WebSockets with Quarkus

This post is the first of the article series about building real-time dashboards with event-driven technologies. As we progress through the series, you’ll learn things like:

  • Using a cache to speed up reads.

  • Update the cache in an event-driven way.

  • Listen to the change feed of a database like DynamoDB and update a dashboard.

  • Decouple database reads from writes using CQRS.

We’ll also be playing around with different technologies like Quarkus, Redis, RSocket, DynamoDB streams, etc while building them.

That looks promising, isn’t it? But we have to start from somewhere and take baby steps. For today, let’s start with a simple example of a WebSocket server feeding real-time data into a dashboard.

What are we going to build?

We will build a simple Javascript-based WebSockets client to display the current sales order count in a dashboard. We will use Quarkus to build the WebSocket server. Every 5 seconds, the server will push the current order count to the dashboard.

To get a high-level idea, refer to the following architecture diagram.

Solutions Architecture

This post is not going to be an in-depth tutorial-style one. But I’ll explain the parts that are vital to the solution. You can find the complete working code in this repository.

Before starting, make sure you have the following in your workstation.

  • JDK 1.8+ installed with JAVA_HOME configured appropriately

  • Apache Maven 3.6.2+

The WebSocket server

WebSocket has become the de facto standard of building real-time dashboards and data visualizations.

Unlike traditional dashboards based on periodic polling of databases, WebSockets allows its client to listen to the data coming from servers. That enables the backends to send n