How to Add Real‑Time Notifications to Laravel with Pusher

In today’s fast‑moving digital world, real‑time updates are essential for user engagement on social platforms and customer‑service apps.

Prerequisites

Before you begin, you should have a basic understanding of the Laravel framework, have Composer installed, and own a free Pusher account for development.

Set Up Your Laravel Project

If you haven’t created a Laravel project yet, run the following commands:

composer create-project --prefer-dist laravel/laravel laravelRealTime
cd laravelRealTime

Install Required Packages

Install the Pusher PHP SDK with Composer:

composer require pusher/pusher-php-server

Configure Pusher in Your Application

1. Obtain your Pusher credentials (app_id, key, secret, cluster) from the Pusher dashboard.

2. Open the .env file in your Laravel project and add the following lines, replacing the placeholders with your credentials:

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_key
PUSHER_APP_SECRET=your_secret
PUSHER_APP_CLUSTER=your_cluster

After saving the file, run php artisan config:cache to clear the configuration cache.

Build Real‑Time Notifications

Create an event that will be broadcast when a condition is met: php artisan make:event OrderStatusUpdated Define the broadcast channel in the event class:

// App/Events/OrderStatusUpdated.php
public function broadcastOn()
{
    return new Channel('orders');
}

On the client side, listen for the event using Laravel Echo and the Pusher JS library:

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo/dist/echo.js"></script>
<script>
Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your_key',
    cluster: 'your_cluster',
    encrypted: true
});

Echo.channel('orders')
    .listen('OrderStatusUpdated', e => {
        console.log('Order status updated:', e);
    });
</script>

Test the Real‑Time Notification System

Add a route that manually triggers the event:

// routes/web.php
Route::get('/test-event', function () {
    event(new App\Events\OrderStatusUpdated('Your order has shipped!'));
    return "Event sent!";
});

Visit /test-event in your browser and watch the console for the live notification.

Advanced Features and Customization

Explore Pusher’s advanced capabilities such as private channels, presence channels, and sending custom data with events to enhance interactivity and security.

Conclusion

By following these steps you have integrated Pusher’s real‑time notification service into a Laravel application, improving responsiveness, user experience, and providing a foundation for further advanced real‑time features.