How to use Laravel's Horizon for monitoring and managing queues with ReactJS



Image not found!!

Laravel Horizon is a powerful tool for monitoring and managing queues in Laravel applications. If you want to integrate Laravel Horizon with ReactJS for a more interactive and dynamic queue management experience, you can follow these steps:

1. Install Laravel Horizon

Ensure you have Laravel installed and then install Horizon:

bash
composer require laravel/horizon

Publish the Horizon assets and configuration:

bash
php artisan vendor:publish --provider="Laravel\Horizon\HorizonServiceProvider"

2. Configure Laravel Horizon

Configure your Horizon dashboard in the horizon.php configuration file. You can find this file in the config directory.

php
// config/horizon.php

return [
    // ...
    'middleware' => ['web', 'auth'],
    'path' => 'horizon',
    'domain' => env('HORIZON_DOMAIN', null),
    // ...
];

Make sure to add the 'auth' middleware to secure the Horizon dashboard.

3. Install the Laravel Echo and Pusher

Laravel Horizon uses Laravel Echo and Pusher for real-time updates. Install them:

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

4. Configure Broadcasting

Configure broadcasting in your Laravel application. Update your .env file with the necessary broadcasting 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

5. Install and Configure ReactJS

Set up your ReactJS environment. You can use Create React App or any other React setup.

6. Create a React Component

Create a React component for the Horizon dashboard. You can use Laravel Echo and Pusher to listen for updates and reflect them in your React component.

jsx
// resources/js/components/HorizonDashboard.js

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

const HorizonDashboard = () => {
  const [metrics, setMetrics] = useState([]);

  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('horizon')
      .listen('HorizonMetricsUpdated', (data) => {
        setMetrics(data.metrics);
      });
  }, []);

  return (
    <div>
      <h1>Horizon Dashboard</h1>
      <ul>
        {metrics.map(metric => (
          <li key={metric.name}>{metric.name}: {metric.value}</li>
        ))}
      </ul>
    </div>
  );
};

export default HorizonDashboard;

7. Include the React Component

Include the React component in your Blade view:

blade
<!-- resources/views/horizon.blade.php -->

@extends('layouts.app')

@section('content')
    <div id="horizon-dashboard"></div>
    <script src="{{ mix('js/app.js') }}"></script>
@endsection

8. Run Your Application

Run your Laravel application and the React development server:

bash
php artisan serve
npm run watch

Visit http://localhost:8000/horizon to see your Horizon dashboard with real-time updates.

This is a basic example, and you can customize and expand it based on your application's requirements. Make sure to refer to the Laravel Horizon documentation for more advanced configurations and features.

Category List