You will need PHP 7 or above, the Laravel CLI, Composer, Node and npm installed on your machine. You should have some knowledge of PHP and Laravel. When building large applications, making it scale is usually a concern. Stats like how long it takes for the page to load is usually very important. Thus, doing things like processing large images, sending emails and SMS can be pushed to a background queue and processed at a later time. However, because queues work in the background, they can fail sometimes. It may then be necessary to be able to monitor background queues. In this article, we will consider ways to monitor Laravel’s background queues in realtime. We will assume we created an application that sends emails. The emails are to be queued in the background and sent later. We will then have a report page with the emails that have been sent and those that haven’t. This is a screen recording of what we will be building: Tutorial requirements To follow along in this tutorial, we would need the following things: PHP 7.0+ installed on your machine. installed on your machine. Laravel CLI installed on your machine. Composer Knowledge of PHP and Laravel. installed on your machine. Node.js and NPM Basic knowledge of Vue.js and JavaScript. A Pusher application. Create one . here A Mailtrap account to test emails sent. Create one . here Once you have these requirements ready, let’s start. Setting up Your Laravel application Open the terminal and run the command below to create a Laravel application: $ laravel new app_name Setting up a database connection and migration When installation is complete, we can move on to setting up the database. Open the file and replace the configuration below: .env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret with: DB_CONNECTION=sqlite This will set SQLite as our default database connection (you can use MySQL or any other database connection you want). In the terminal to the root directory of your project. Run the command below to create the SQLite database file: cd $ touch database/database.sqlite The command above will create an empty file that will be used by SQLite. Run the command below to create a migration: $ php artisan make:migration create_queued_emails_table Open up the migration file that was just created by the command above and replace the method with the code below: up public function up() { Schema::create('queued_emails', function (Blueprint $table) { $table->increments('id'); $table->string('email'); $table->string('description'); $table->boolean('run')->default(false); $table->timestamps(); }); } Now run the command below to migrate our database: $ php artisan migrate Setting up Mailtrap for email testing Open your file and enter the keys you got from the Mailtrap dashboard. The relevant keys are listed below: .env MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null MAIL_FROM="john@doe.com" MAIL_NAME="John Doe" Now when emails are sent, the emails will be visible in the Mailtrap inbox. Setting up authentication The next thing we need to do is set up authentication. Open your terminal and enter the command below: $ php artisan make:auth This will generate an authentication scaffold. That is all that you need to do regarding authentication. Configuring Pusher Replace the keys in the file with the correct keys you got from your Pusher dashboard: PUSHER_* .env PUSHER_APP_ID="PUSHER_APP_ID" PUSHER_APP_KEY="PUSHER_APP_KEY" PUSHER_APP_SECRET="PUSHER_APP_SECRET" Open the terminal and enter the command below to install the Pusher PHP SDK: $ composer require pusher/pusher-php-server "~3.0" After installation is complete, open the file and scroll to the section. Replace the key with the following: config/broadcasting.php pusher options 'options' => [ 'encrypt' => true, 'cluster' => 'PUSHER_APP_CLUSTER' ], Configuring other miscellaneous things Open the file and change the to , and the to . To make sure we have the tables necessary to use as our run the command below to generate the database migration: .env BROADCAST_DRIVER pusher QUEUE_DRIVER database database QUEUE_DRIVER $ php artisan queue:table Then run the migrate command to migrate the database: $ php artisan migrate This will create the database table required to use our database as a queue driver. 💡 In a production environment, it is better to use an in-memory storage like Redis or Memcached as the queue driver. In-memory storage is faster and thus has better performance than using a relational database. Building the backend of our application Now let’s create the backend of our application. Run the command below in your terminal: $ php artisan make:model QueuedEmails This will create a new model in the directory. Open the file and replace the contents with the following: app <?php namespace App; use Illuminate\Database\Eloquent\Model; class QueuedEmails extends Model { protected $fillable = ['description', 'run', 'email']; protected $casts = ['run' => "boolean"]; } In the code above, we define the property of the class. This will prevent a mass assignment exception error when we try to create a new entry to the database. We also specify a property which will instruct Eloquent to typecast attributes to data types. fillable casts Next, open the and and replace the contents with the code below: HomeController <?php namespace App\Http\Controllers; use Mail; use App\QueuedEmails; use App\Mail\SimulateMail; use Faker\Factory as Faker; class HomeController extends Controller { /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('auth'); $this->faker = Faker::create(); } /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ public function index() { return view('home', ['jobs' => $this->jobs()]); } /** * Return all the jobs. * * @return array */ public function jobs() { return QueuedEmails::orderBy('created_at', 'DESC')->get()->toArray(); } /** * Simulate sending the email. * * @return mixed */ public function simulate() { $email = $this->faker->email; Mail::to($email)->send( new SimulateMail([ "email" => $email, "description" => $this->faker->sentence() ]) ); return redirect()->route('home'); } } In the controller above, we have 4 methods that are mostly self-explanatory. In the class we use the which helps us generate random fake values. In the method, we are using the faker library to generate a fake email address and description. We instantiate a . Faker library simulate SimulateMail mailable Open the terminal and enter the command below: $ php artisan make:mail SimulateMail Open the class and enter the code below: SimulateMail <?php namespace App\Mail; use App\QueuedEmails; use Illuminate\Bus\Queueable; use Illuminate\Mail\Mailable; use Illuminate\Queue\SerializesModels; use App\Events\{EmailQueued, EmailSent}; use Illuminate\Contracts\Queue\ShouldQueue; use Illuminate\Contracts\Queue\Factory as Queue; use Illuminate\Contracts\Mail\Mailer as MailerContract; class SimulateMail extends Mailable implements ShouldQueue { use Queueable, SerializesModels; protected $mail; /** * Create a new message instance. * * @return void */ public function __construct(array $mail) { $this->mail = QueuedEmails::create($mail); } /** * Build the message. * * @return $this */ public function build() { return $this->subject("Queuer: Welcome to queuer")->view('email.welcome'); } /** * Send the mail */ public function send(MailerContract $mailer) { $this->mail->update(['run' => true]); event(new EmailSent($this->mail)); parent::send($mailer); } /** * Queue the email */ public function queue(Queue $queue) { event(new EmailQueued($this->mail)); return parent::queue($queue); } } 💡 By implementing the **_ShouldQueue_** interface, we are telling Laravel that the email should be queued and not sent immediately. In the class above, we have a constructor that creates a new entry into the table. In the method, we build the mail message we are going to be sending. queued_emails build In the method, we mark the entry’s column to . We also fire an event called . In the method, we also trigger an event called . send queued_emails run true EmailSent queue EmailQueued Let’s create the events we triggered in the methods above. In your terminal run the command below: $ php artisan make:event EmailSent $ php artisan make:event EmailQueued In the event class, paste the following code: EmailSent <?php namespace App\Events; use App\QueuedEmails; use Illuminate\Broadcasting\Channel; use Illuminate\Queue\SerializesModels; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; class EmailSent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $mail; public function __construct($mail) { $this->mail = $mail; } public function broadcastOn() { return new Channel('email-queue'); } public function broadcastAs() { return 'sent'; } } In the code above, we just use in Laravel to send some data to Pusher. Broadcasting Open the event class and paste the code below: EmailQueued <?php namespace App\Events; use App\QueuedEmails; use Illuminate\Broadcasting\Channel; use Illuminate\Queue\SerializesModels; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; class EmailQueued implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $mail; public function __construct($mail) { $this->mail = $mail; } public function broadcastOn() { return new Channel('email-queue'); } public function broadcastAs() { return 'add'; } } This class is almost the same as the event class. The minor difference is the method. It returns a different alias to broadcast the event as. EmailSent broadcastAs Finally, open the routes file and replace the code with this: routes/web.php Auth::routes(); Route::name('jobs')->get('/jobs', 'HomeController@jobs'); Route::name('simulate')->get('/simulate', 'HomeController@simulate'); Route::name('home')->get('/home', 'HomeController@index'); Route::view('/', 'welcome'); Great! Now let’s move on to the frontend of the application. Building the frontend of our application Now that we have set up most of the backend, we will create the frontend of the application. Open the file and replace the code with the following: resources/views/home.blade.php @extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading clearfix"> <span class="pull-left">Queue Reports</span> <a href="{{ route('simulate') }}" class="btn btn-sm btn-primary pull-right">Simulate</a> </div> <div class="panel-body"> <jobs :jobs='@json($jobs)'></jobs></jobs> </div> </div> </div> </div> </div> @endsection The noteworthy aspect of the code above is the tag. This is a reference to the Vue component we will create next. We also have a “Simulate” button that leads to a route. This route simulates queuing an email to be sent. jobs /simulate Open your terminal and type in the command below: $ npm install --save laravel-echo pusher-js This will install and the . When the installation is complete, run the command below to install the other NPM dependencies: Laravel Echo Pusher JS SDK $ npm install Building our Vue component Let’s build the Vue component we referenced earlier. Open the file and replace the code below: jobs resources/assets/js/app.js Vue.component('example', require('./components/ExampleComponent.vue')); with: Vue.component('jobs', require('./components/JobsComponent.vue')); Now create a new file in the directory. In the file, paste in the following code: JobsComponent.vue resources/assets/js/components/ <template> <table class="table"> <tbody> <tr v-for="(job, index) in allJobs" :key="index" v-bind:class="{success: job.run, danger: !job.run}"> <td width="80%">{{ job.description }}</td> <td>{{ job.created_at }}</td> </tr> </tbody> </table> </template> <script> export default { props: ['jobs'], data() { return {allJobs: this.jobs} }, created() { let vm = this vm.refreshAllJobs = (e) => axios.get('/jobs').then((e) => (vm.allJobs = e.data)) Echo.channel('email-queue') .listen('.add', (e) => vm.refreshAllJobs(e)) .listen('.sent', (e) => vm.refreshAllJobs(e)) } } </script> In the Vue component above, we have defined a . In there, we loop through the array and list each job’s description and timestamp. template jobs In the method of the Vue component , we have a function that uses (a HTTP request library built-in Laravel by default) to make a request to the route. We then assign the response to the property. created script refreshAllJobs Axios /jobs allJobs In the same method, we use to listen to a Pusher channel and wait for an event to be triggered. Whenever the events and are triggered, we call the method. Laravel Echo .add .sent refreshAllJobs 💡 The event names have a dot before them because, in Laravel, whenever you use the **_broadcastAs_** method to define an alias you need to add the dot. Without the dot your event will not be caught by the listener. If you do not provide an alias, Laravel will use the namespace + class as the name of the broadcast event. Open the file. At the bottom of the file, add the following code: resources/assets/js/bootstrap.js import Echo from 'laravel-echo' window.Pusher = require('pusher-js'); window.Echo = new Echo({ broadcaster: 'pusher', key: 'PUSHER_APP_KEY', encrypt: true, cluster: 'PUSHER_APP_CLUSTER' }); ⚠️ Make sure you replace the **_PUSHER_APP_KEY_** and **_PUSHER_APP_CLUSTER_** with your Pusher application key and cluster. Finally, run the command below to build your assets: $ npm run dev Testing our application After the build is complete, start a PHP server if you have not already by running the command below: $ php artisan serve This will create a PHP server so we can preview our application. The URL will be provided on the terminal but the default is . http://127.0.0.1:8000 When you see the Laravel homepage, create a new account using the ”Register” link on the top right corner of the page. Now click the “Simulate” button and you should see a new queued email entry. Now we will manually execute the processes on our queue using the artisan command. Open a new terminal window and run the command below: queue:listen $ php artisan queue:listen This should start executing any queues it sees. As long as the terminal is open and the command is running, when you click the “Simulate” button the queue will run immediately. If you kill the command, the queue entries will remain there and not be triggered. queue:listen queue:listen 💡 In a production environment, you cannot keep **_queue:listen_** running and you might need a worker running on a background process; something like Supervisor . You can read more about how you can do that here . Conclusion In this article, we have been able to create a realtime Laravel queue monitor using Pusher and Vue. Having queues that you can track and quantify can be useful. Hopefully, you picked something from this article. If you have any questions or feedback, feel free to ask in the comments section. The source code is available on . GitHub This post was first published on Pusher.
