Laravel Broadcast using Pusher

As usual, I was late to understand what these things could offer other than using for chat message, turns out it gives you the ability to give you something more than just pushing message. In real implementation was I needed to give feedback when the job is done.

PUSHER

create an app in pusher.com then get the credential

composer require pusher/pusher-php-server "~3.0"

app_id = "****"
key = "***********"
secret = "**********"
cluster = "ap1"

put in .env

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=*****
PUSHER_APP_KEY=*****
PUSHER_APP_SECRET=*****
PUSHER_APP_CLUSTER=ap1

Uncomment - config/app.php

App\Providers\BroadcastServiceProvider::class,

Example Event - EventService Provider

'App\Events\JobFinishedEvent' => [
	'App\Listeners\JobFinishedListener',
],

php artisan event:generate

In your JobFinishedEvent add ShouldBroadcastclass

class JobFinishedEvent implements ShouldBroadcast

Route Channel.php

Broadcast::channel('job-finished-channel', function () {    
	return true;
});

Laravel Echo

Laravel Echo is a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel.

assets/js/bootstrap.js then add pusher key

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({    
	broadcaster: 'pusher',    
	key: '****',    
	cluster: 'ap1',    
	encrypted: true
});

assets/js/app.js add this

const app = new Vue({    
	el: '#app',    
	created() {      
		Echo.private('job-finished-channel')      
			.listen('JobFinishedEvent', (e) => {        
				alert('it works');      
			});    
}});

Dont forget the id="app" where you want to add the app

Broadcast::channel('job-finished-channel', function () {    
	return true;
});

To make it work add event anywhere you want

event(new JobFinishedEvent());