Dashboard with Real-Time Data Refresh

Link to the repository

[Only for premium members]

Our clients love dashboards with charts and tables, but it's even better if data is refreshed in real-time as a new order comes in. In this lesson, we will convert a static dashboard to a dynamic real-time one with Laravel Reverb.

I often see it done by polling the new data every minute or so, but it's usually a bad decision for performance reasons. A better way is to refresh the page parts only when the new data comes in. This is exactly what we'll implement here.

What we'll cover in this tutorial:

• Install and Run the Reverb Server
• Configure Laravel Broadcasting
• Update Front-end JS: Real-time table, Chart, and Status Updates

So, are you ready? Let's dive in!

The Project

As a starting point, we currently have a project with a static dashboard like this:

As this tutorial is about real-time Reverb and not about Laravel fundamentals, I will just briefly summarize this starting project, with links to the repository for you to explore the full source code.

All of its data come from our Controller:

app/Http/Controllers/DashboardController.php

class DashboardController extends Controller
{
    public function __invoke(OrdersService $ordersService)
    {
        $totalRevenue = $ordersService->getTotalRevenue();
        $thisMonthRevenue = $ordersService->getThisMonthRevenue();
        $todayRevenue = $ordersService->getTodayRevenue();
        $latestOrders = $ordersService->getLatestOrders(5);
        $orderChartByMonth = $ordersService->orderChartByMonth();
        $orderChartByDay = $ordersService->orderChartByDay();
 
        return view(
            'dashboard',
            compact(
                'totalRevenue',
                'thisMonthRevenue',
                'todayRevenue',
                'latestOrders',
                'orderChartByDay',
                'orderChartByMonth'
            )
        );
    }
}

In there, we are using the...