How to implement user notifications with Laravel and ReactJS



Image not found!!

Implementing user notifications with Laravel and ReactJS involves setting up the backend to handle notifications and creating a frontend interface to display them. Below is a step-by-step guide to achieve this:

Backend (Laravel):

  1. Install Required Packages: Install the Laravel Echo, Pusher, and Laravel Echo Server packages for real-time notifications.

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

  2. Configure Broadcasting: Update your config/broadcasting.php file to use the Pusher driver.

    php
    'default' => env('BROADCAST_DRIVER', 'pusher'),

    Set the Pusher credentials in your .env file:

    ini
    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

  3. Create Notification: Create a new notification using Laravel's make:notification Artisan command.

    bash
    php artisan make:notification NewNotification

  4. Configure Notification to Use Broadcast Channel: Open the generated NewNotification.php file and update the toBroadcast method to use the broadcastAs method.

    php
    public function toBroadcast($notifiable)
{
    return (new BroadcastMessage([
        'message' => $this->message,
    ]))->broadcastAs('new-notification');
}

Frontend (ReactJS):

  1. Install Required Packages: Install the necessary packages for ReactJS.

    bash
    npm install react axios pusher-js

  2. Set Up Axios for API Calls: Create a file, e.g., api.js, to handle API calls using Axios.

    javascript
    // api.js
import axios from 'axios';

const api = axios.create({
    baseURL: '/api', // Laravel API endpoint
});

export default api;

  3. Subscribe to Pusher Channel: Create a file, e.g., pusher.js, to subscribe to the Pusher channel.

    javascript
    // pusher.js
import Pusher from 'pusher-js';

const pusher = new Pusher('your-app-key', {
    cluster: 'your-app-cluster',
    encrypted: true,
});

export default pusher;

  4. React Component to Display Notifications: Create a React component to display notifications.

    javascript
    // NotificationComponent.js
import React, { useEffect, useState } from 'react';
import api from './api';
import pusher from './pusher';

const NotificationComponent = () => {
    const [notifications, setNotifications] = useState([]);

    useEffect(() => {
        const channel = pusher.subscribe('new-notification');

        channel.bind('App\\Events\\NewNotification', (data) => {
            setNotifications((prevNotifications) => [...prevNotifications, data.message]);
        });

        return () => {
            channel.unbind();
            pusher.unsubscribe('new-notification');
        };
    }, []);

    return (
        <div>
            <h2>Notifications</h2>
            <ul>
                {notifications.map((notification, index) => (
                    <li key={index}>{notification}</li>
                ))}
            </ul>
        </div>
    );
};

export default NotificationComponent;

  5. Integrate Component in App: Integrate the NotificationComponent in your main React application.

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

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

export default App;

Remember to replace placeholders like 'your-app-key', 'your-app-cluster', etc., with your actual Pusher credentials. Additionally, adjust the Laravel and React code based on your specific application structure and requirements.

Category List