How to Add Real‑Time Notifications to Laravel with Pusher

In today’s fast‑moving digital world, real‑time updates are essential for enhancing user experience, keeping users engaged and informed.

Laravel, a powerful PHP framework, combined with Pusher, a leading real‑time notification service, provides an easy way to add dynamic functionality to your application.

Prerequisites

Before you begin, you should have a basic understanding of Laravel, Composer installed, and 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

Obtain your Pusher credentials (app_id, key, secret, cluster) from the Pusher dashboard and add them to the .env file:

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');
}

Listen for the event on the client using Laravel Echo and Pusher JS:

<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 to manually trigger 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 check the console for the live notification.

Advanced Features & Customization

Explore Pusher’s advanced capabilities such as private channels, presence channels, and custom payloads to enhance interactivity and security.

Conclusion

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