Courses

Laravel Reverb: Four "Live" Practical Examples

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...

This lesson is only for Premium Members.
Want to access all lessons of this course?

You also get:

  • 67 courses (1172 lessons, 43 h 18 min total)
  • Premium tutorials
  • Access to repositories
  • Private Discord