Laravel 11 Real-Time Notifications with Pusher Tutorial

Using this Laravel 11 Real-Time Notifications with Pusher Tutorial you will see how we send real time notification to specific user using laravel and pusher.

Follow these steps to set up and use Pusher for real-time notifications:

Step 1 – Create an Account on Pusher

Visit pusher.com and sign up for a free account. Once logged in, select “Channel” under the options and create a new app. Obtain your keys from the app settings.

Step 2 – Configure Pusher Keys in .env

Edit your .env file to include your Pusher credentials:

BROADCAST_CONNECTION=pusher

PUSHER_APP_ID="1822914"
PUSHER_APP_KEY="b49df9a9ea52a813046f"
PUSHER_APP_SECRET="5s5687a869..."
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME="https"
PUSHER_APP_CLUSTER="ap2"

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Step 3 – Install Pusher PHP Server and Enable Broadcasting

Run the following commands to set up broadcasting and install the necessary packages:

php artisan install:broadcasting
composer require pusher/pusher-php-server
npm install --save-dev laravel-echo pusher-js

Next, update resources/js/echo.js to configure Pusher:

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: false
});

Step 4 – Create an Event

Generate an event for sending push notifications:

php artisan make:event TestNotification

Then, edit app/Events/TestNotification.php to define the event logic:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class TestNotification implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $data;

    public function __construct($data)
    {
        $this->data = $data;
    }

    public function broadcastOn()
    {
        return new Channel('notification');
    }

    public function broadcastAs()
    {
        return 'test.notification';
    }

    public function broadcastWith(): array
    {
        return [
            'message' => "This is a test notification"
        ];
    }
}

Step 5 – Send Notifications from the Controller

Update your controller to send real-time notifications:

// Import this line at the top of your controller
use App\Events\TestNotification;

// Send a notification
event(new TestNotification('This is testing data'));

Step 6 – Add Event Listeners in Views

In your Blade view file, include the following JavaScript to listen for notifications:

<script type="module">
    window.Echo.channel('notification')
        .listen('.test.notification', (data) => {
            console.log('Test notification:', data);
            var notificationElement = document.getElementById('notification');
            notificationElement.insertAdjacentHTML('beforeend', '<div class="alert alert-success alert-dismissible fade show"><span><i class="fa fa-circle-check"></i> ' + data.message + '</span></div>');
        });
</script>

Step 7 – Test the Application

Build your application with:

npm run build

Then start your Laravel server:

php artisan serve

Visit your application and test the notification functionality by triggering the route that sends notifications.