How to handle user notifications in real-time with Laravel Echo and ReactJS



Image not found!!

Handling user notifications in real-time with Laravel Echo and ReactJS involves setting up a real-time messaging system using Laravel Echo on the server side and integrating it with ReactJS on the client side. Laravel Echo is a powerful tool for handling real-time events, and it's often used with Laravel's broadcasting feature.

Here are the general steps to achieve real-time notifications with Laravel Echo and ReactJS:

Server-Side (Laravel)

  1. Set Up Laravel Broadcasting:

    • Make sure you have Laravel Echo and Pusher installed. You can use other broadcasting drivers, but Pusher is commonly used for simplicity.
    bash
    composer require pusher/pusher-php-server
    • Configure your .env file with your Pusher credentials.
    env
    BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=your_app_cluster
    • Configure broadcasting.php in the config directory.
    php
    'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => true,
        ],
    ],
],

  2. Set Up Broadcasting Events:

    • Create an event for your notifications. For example, NotificationEvent.
    bash
    php artisan make:event NotificationEvent
    • Modify the NotificationEvent class to broadcast your notification data.
    php
    public $notification;

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

public function broadcastOn()
{
    return new Channel('notifications');
}
    • Trigger the event when a notification is created.
    php
    event(new NotificationEvent($notification));

Client-Side (ReactJS)

  1. Install Laravel Echo and Pusher for React:

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

  2. Configure Laravel Echo:

    • Initialize Echo in your React app, usually in your main app.js file.
    javascript
    import Echo from 'laravel-echo';

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
});

  3. Listen for Notifications in React Components:

    • Use window.Echo to listen for notifications in your React components.
    javascript
    import { useEffect } from 'react';

function NotificationComponent() {
    useEffect(() => {
        window.Echo.channel('notifications').listen('NotificationEvent', (data) => {
            // Handle the incoming notification data
            console.log(data.notification);
        });

        return () => {
            // Clean up event listeners if necessary
        };
    }, []);

    return (
        // Your component JSX
    );
}

export default NotificationComponent;

  4. Display Notifications:

    • Update your React component to display notifications as they arrive.

Remember to replace the placeholder values in the code snippets with your actual Pusher credentials and event details.

With these steps, your Laravel application will broadcast notifications, and your ReactJS application will listen for these events in real-time, allowing you to handle user notifications efficiently.

Category List