Laravel broadcast not alerting the message on the frontend - laravel

Question

I am quite new to this laravel event so I am quite unable to get it done correctly.
I am trying to fire an event to notify the user when the job is completed. So, I am triggering an event at the end of the job as
event(new AmenityUploaded($this->data['property_id']));
My event looks like:
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class AmenityUploaded implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $property_id;
public function __construct($property_id)
{
$this->property_id = $property_id;
}
public function broadcastOn()
{
return new PrivateChannel('channel.amenity.'.$this->property_id);
}
public function broadcastAs()
{
return 'amenity-uploaded';
}
}
And in routes/channel.php
Broadcast::channel('channel.amenity.{propertyId}', function ($user, $propertyId) {
// return $user->id === \App\Models\Property::find($propertyId)->updated_by;
return true;
}
And in view, I am using javascript as:
view
<script>
Pusher.logToConsole = true;
var pusher = new Pusher('xxxxxxxxxxxxxxxxxxxxx', {
cluster: 'us3',
forceTLS: true
});
$id = '<?php echo $r->id; ?>';
var channel = pusher.subscribe(`channel.amenity.${$id}`);
channel.bind('amenity-uploaded', function(data) {
alert(JSON.stringify(data));
});
</script>
And my .env looks like:
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=xxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_CLUSTER=us3
So, whenever I run the queue with php artisan queue:work --tries=3. In the end, I could see that App\Events\AmenityUploaded being fired. However, I could not see any alert on the front end.
However, If I try to push notifications from the pusher dashboard, it alerts successfully on the app successfully. While pushing from pusher debug console, I use the channel as channel.amenity.1 and event as amenity-uploaded
##Update
I have added a block in event as broadcastWith:
public function broadcastWith()
{
// This must always be an array. Since it will be parsed with json_encode()
return [
'name' => 'Saroj',
'message' => 'Message',
];
}
And, this is successfully showing in pusher dashboard. However, not alerting in the frontend yet.
update 2
Tried with echo: Added following code in bootstrap.js
import Echo from 'laravel-echo'
import Pusher from "pusher-js"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'xxxxxxxxxxxxxxxxxxxx',
cluster: 'us3',
encrypted: true
});
And in view:
<script>
$id = '<?php echo $r->id; ?>';
Echo.channel(`channel.amenity.${$id}`)
.listen('.amenity-uploaded', (data) => {
alert(JSON.stringify(data));
});
</script>
Still the same, if fired from the pusher dashboard, an alert will be shown in frontend. After finishing jobs, the event can be seen at the pusher dashboard, however not on the frontend.

Answer 1

I think the issue is that you use only Pusher at frontend without laravel-echo which should be required to work with private channels. Pusher itself doesn't know that it must authorise, laravel-echo does that out of the box.
This is how I init Pusher and Echo:
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: fromPHP.PUSHER_APP_KEY,
cluster: fromPHP.PUSHER_CLUSTER,
encrypted: true
});
and this is how I listen for private events:
Echo.private(channel).listen('.amenity-uploaded', data => alert(JSON.stringify(data)));
Notice the leading . before amenity-uploaded. That's required when you customise broadcastAs (https://laravel.com/docs/5.8/broadcasting#broadcast-name)