How to implement a dynamic notification system with Laravel Echo and ReactJS



Image not found!!

Implementing a dynamic notification system with Laravel Echo and ReactJS involves setting up a real-time messaging system using Laravel Echo for the server-side and integrating it with ReactJS on the client-side. Laravel Echo is a library that makes it easy to implement WebSockets and real-time features in your Laravel application.

Here's a step-by-step guide on how you can achieve this:

Prerequisites:

  1. Make sure you have Laravel and Node.js installed on your machine.

  2. Set up a Laravel project and configure Laravel Echo.

Step 1: Install Laravel Echo and Socket.IO

Install the necessary packages for Laravel Echo and Socket.IO by running the following commands in your Laravel project:

bash
composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js

Step 2: Configure Laravel Echo

In your Laravel project, update the broadcasting.php configuration file with your Pusher credentials. Update the config/broadcasting.php file:

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'),
            'encrypted' => true,
        ],
    ],
],

Set your Pusher credentials in the .env file:

dotenv
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=your-app-cluster

Step 3: Create a Notification Event

Create a new Laravel event for your notification. For example, if you are creating a notification for new messages, you can create an event like this:

bash
php artisan make:event NewMessageNotification

In the generated NewMessageNotification.php file, you can define the broadcast event:

php
public $message;

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

public function broadcastOn()
{
    return new Channel('new-message-channel');
}

Step 4: Trigger the Event

In your controller or wherever you want to trigger the event (e.g., when a new message is created), broadcast the event:

php
event(new NewMessageNotification('New message content'));

Step 5: Set Up Echo in ReactJS

Install the required packages for ReactJS:

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

In your ReactJS component, set up Laravel Echo:

jsx
import Echo from "laravel-echo";
window.Pusher = require("pusher-js");

const echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.REACT_APP_PUSHER_APP_KEY,
    cluster: process.env.REACT_APP_PUSHER_APP_CLUSTER,
    encrypted: true,
});

Step 6: Listen for the Event in ReactJS

In your ReactJS component, listen for the broadcasted event and update your UI accordingly:

jsx
useEffect(() => {
    echo.channel('new-message-channel')
        .listen('NewMessageNotification', (event) => {
            // Update your UI or trigger a notification
            console.log('New Message:', event.message);
        });

    return () => {
        // Unsubscribe from the channel when component unmounts
        echo.leave('new-message-channel');
    };
}, []);

Step 7: Start Laravel Echo Server

Run the Laravel Echo server to handle WebSocket connections:

bash
php artisan websockets:serve

Step 8: Start ReactJS Application

Run your ReactJS application to test the real-time notification system.

bash
npm start

Now, whenever you trigger the NewMessageNotification event in your Laravel application, your ReactJS component will receive the notification in real-time.

Remember to handle authentication and security considerations when implementing a real-time system in a production environment. Additionally, this example uses Pusher as the broadcasting driver, but you can choose other drivers based on your requirements.

Category List