Introduction

Implementing real-time database notifications in a Laravel/Filament app is a straightforward process, and there are a lot of tools/packages developed to implement the real-time functionality.

Some of the most popular packages include Soketi, Pusher, Laravel Websockets, and In this blog, we'll be looking at implementing real-time functionality with Pusher (as our backed server) and Laravel Echo (which will listen for events and update the UI accordingly).

But, before implementing real-time database notifications, we need to implement database notifications first, and later add the real-time functionality.

You can check the blog about real-time database notifications here.

---

Configuration

Frontend Setup

So, let's start by configuring Laravel Echo by installing the necessary packages:

npm install --save-dev laravel-echo pusher-js

Once Echo is installed, you are ready to create a fresh Echo instance in your application's JavaScript. A great place to do this is at the bottom of the resources/js/bootstrap.js file that is included with the Laravel framework. By default, an example Echo configuration is already included in this file - you simply need to uncomment it:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

Backend Setup

The first thing we need to do is install the pusher-php-server package:

composer require pusher/pusher-php-server

Once this is done, the next thing we need to do is create a new pusher channel, which consists of the env details that we need to fill in the .env file.

As you can see in the screenshot above, once an app is created, it gives us the app_id, key, secret, and cluster data which we need to fill in our .env accordingly.

We also need to update the BROADCAST_DRIVER to pusher

So make sure to fill it like so:

Triggering the event

Once everything is set up, the last thing remaining is to trigger the event, which will notify the pusher about the event and update the changes accordingly.

The modified created event from the database notifications article looks like this after we trigger the event:

public function created(Ticket $ticket): void
    {
        $assignedTo = $ticket->assignedTo;

        Notification::make()
            ->title('A new ticket has been assigned to you')
            ->sendToDatabase($assignedTo);

        event(new DatabaseNotificationsSent($assignedTo));
    }

One more thing to note here is the default polling interval applied, and this will poll the server at a certain time interval. This can be disabled by passing a null value to the DatabaseNotifications Livewire Component:

DatabaseNotifications::pollingInterval(null);

---