How to implement a real-time notification system using Laravel Echo and ReactJS



Image not found!!

Implementing a real-time notification system using Laravel Echo and ReactJS involves setting up a combination of Laravel Echo, a WebSocket library (such as Pusher), and ReactJS to handle the frontend updates. Below are the steps to implement this system:

Prerequisites:

  1. Laravel Project Setup:

    • Ensure that your Laravel project is set up and running.

    • Install Laravel Echo and Pusher package using Composer:

      bash
      composer require pusher/pusher-php-server

    • Set up your Pusher credentials in the .env file:

      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

  2. ReactJS Setup:

    • Make sure you have ReactJS installed in your project.

Implementation Steps:

1. Install Laravel Echo and configure it:

In your Laravel project, you'll need to configure Laravel Echo to use Pusher. Open config/app.php and add the following in the providers array:

php
'providers' => [
    // ...
    Laravel\Echo\EchoServiceProvider::class,
],

Then, in the same file, add the following in the aliases array:

php
'aliases' => [
    // ...
    'Echo' => Laravel\Echo\Facades\EchoFacade::class,
],

2. Set up Laravel Broadcasting:

Create an event for your notifications. In this example, let's assume you have a NotificationEvent:

bash
php artisan make:event NotificationEvent

Edit the generated NotificationEvent class to include the necessary data:

php
public $message;

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

In your notification logic, broadcast the event:

php
broadcast(new NotificationEvent('New notification message'));

3. Configure Broadcasting Channels:

Edit the broadcasting.php configuration file (config/broadcasting.php). Set the driver to pusher and update the Pusher configuration:

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,
        ],
    ],
],

4. Set up the Frontend with ReactJS:

Install the required dependencies for ReactJS:

bash
npm install pusher-js laravel-echo react react-dom @pusher/pusher-js

Create a new React component to handle notifications:

jsx
// NotificationComponent.js
import React, { useEffect } from 'react';
import Echo from 'laravel-echo';

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

    echo.channel('notifications').listen('NotificationEvent', (event) => {
      console.log('New notification:', event.message);
      // Handle the notification as needed
    });

    return () => {
      echo.disconnect();
    };
  }, []);

  return <div>Notification Component</div>;
};

export default NotificationComponent;

Make sure to set the appropriate Pusher credentials in your React app environment variables.

5. Include the React Component in your application:

jsx
// App.js
import React from 'react';
import NotificationComponent from './NotificationComponent';

const App = () => {
  return (
    <div>
      <h1>Your App</h1>
      <NotificationComponent />
    </div>
  );
};

export default App;

Ensure that you import and include your React app in your Laravel Blade view.

6. Run the Application:

Start your Laravel development server:

bash
php artisan serve

Start your React development server:

bash
npm start

Visit your Laravel and React applications in your web browser, and you should see real-time notifications being sent and received.

This is a basic setup, and you may need to customize it based on your specific requirements and notification types. Also, make sure to handle authentication and authorization for your real-time channels.

Category List