How to use Laravel Echo with ReactJS for real-time notifications



Image not found!!

To use Laravel Echo with ReactJS for real-time notifications, you'll need to follow a series of steps. Laravel Echo is a library that makes it easy to work with WebSockets and broadcast events in real-time. Here's a general guide on how to set up Laravel Echo with ReactJS:

1. Set Up Laravel Broadcasting

  • First, make sure you have Laravel Echo and the broadcasting system installed in your Laravel project. This usually involves configuring a broadcasting driver like Pusher, Redis, or another supported driver.

  • Update your .env file with the necessary broadcasting configuration. For example, if you are using Pusher, you might have something like this:

    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

  • Set up event broadcasting. Create an event (e.g., NotificationEvent) that you want to broadcast. In the event class, make sure to implement the ShouldBroadcast interface.

    php
    use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NotificationEvent implements ShouldBroadcast
{
    // Your event code here
}

2. Install and Configure Laravel Echo

  • Install Laravel Echo using npm:

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

  • In your bootstrap.js file, configure Laravel Echo to use the broadcasting service you've set up:

    javascript
    import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

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

    Make sure your .env file contains the necessary MIX_PUSHER_APP_KEY and MIX_PUSHER_APP_CLUSTER values.

3. Broadcast the Event in Laravel

  • Wherever you want to broadcast the event (e.g., in a controller, a job, etc.), use the event function:

    php
    event(new NotificationEvent($data));

4. Set Up ReactJS to Listen for Events

  • Install the necessary packages:

    bash
    npm install --save laravel-echo react-laravel-echo

  • In your ReactJS component, configure Laravel Echo to listen for the event:

    jsx
    import React, { useEffect } from 'react';
import Echo from 'laravel-echo';
import LaravelEcho from 'react-laravel-echo';

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

        echo.channel('your-channel-name').notification((notification) => {
            // Handle the incoming notification
            console.log('New Notification:', notification);
        });

        return () => {
            // Clean up the Echo instance if needed
            echo.disconnect();
        };
    }, []);

    return (
        // Your component code here
    );
};

export default LaravelEcho(YourComponent);

    Replace 'your-channel-name' with the channel you've configured in your Laravel application.

5. Display Real-time Notifications

  • Update your component's state or use a global state management solution (like Redux) to manage and display real-time notifications.

That's it! With these steps, you should have Laravel Echo set up with ReactJS for real-time notifications. Adjust the code according to your specific requirements and application structure.

Category List