Show jobs progress in dashboard

To display a progress bar for queued jobs in a Laravel application, you can indeed use WebSockets to provide real-time updates to your users. Here's a step-by-step guide on how you can achieve this:

1. Set Up Laravel Echo and Pusher:

   First, you'll need to set up Laravel Echo and a WebSocket service like Pusher. This will allow you to broadcast events from your server to your client-side application in real-time.

   • Install Laravel Echo and Pusher:

     npm install --save laravel-echo pusher-js
     

   • Configure your broadcasting.php configuration file to use Pusher:

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

   • Set your environment variables in the .env file:

     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. Create a Job and Broadcast Events:

   In your job, you can broadcast events at different stages of the job's execution to update the progress.

   • Create an event:

     php artisan make:event JobProgress
     

   • Define the event:

     namespace App\Events;
     
     use Illuminate\Broadcasting\Channel;
     use Illuminate\Queue\SerializesModels;
     use Illuminate\Broadcasting\InteractsWithSockets;
     use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
     
     class JobProgress implements ShouldBroadcast
     {
         use InteractsWithSockets, SerializesModels;
     
         public $progress;
     
         public function __construct($progress)
         {
             $this->progress = $progress;
         }
     
         public function broadcastOn()
         {
             return new Channel('job-progress');
         }
     }
     

   • Broadcast events from your job:

     namespace App\Jobs;
     
     use App\Events\JobProgress;
     use Illuminate\Bus\Queueable;
     use Illuminate\Queue\SerializesModels;
     use Illuminate\Queue\InteractsWithQueue;
     use Illuminate\Contracts\Queue\ShouldQueue;
     use Illuminate\Foundation\Bus\Dispatchable;
     
     class ExampleJob implements ShouldQueue
     {
         use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
     
         public function handle()
         {
             // Example of broadcasting progress
             for ($i = 0; $i <= 100; $i += 10) {
                 // Simulate work
                 sleep(1);
     
                 // Broadcast progress
                 broadcast(new JobProgress($i));
             }
         }
     }
     

3. Listen for Events on the Client Side:

   Use Laravel Echo to listen for the JobProgress event and update the progress bar in your frontend.

   • Set up Laravel Echo in your 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,
         forceTLS: true
     });
     
     Echo.channel('job-progress')
         .listen('JobProgress', (e) => {
             console.log('Progress:', e.progress);
             // Update your progress bar here
             document.getElementById('progress-bar').style.width = e.progress + '%';
         });
     

4. Display the Progress Bar:

   In your HTML, you can have a simple progress bar that updates based on the events received:

   <div id="progress-container" style="width: 100%; background-color: #f3f3f3;">
       <div id="progress-bar" style="width: 0%; height: 30px; background-color: #4caf50;"></div>
   </div>
   

By following these steps, you can provide real-time feedback to your users about the progress of queued jobs in your Laravel application.