i have 2 separate applications one Vue and the other Laravel Api and I want to connect them by Pusher the event is sent from laravel to Pusher successfully but i can't receive on Vue
// Laravel Event
<?php
namespace App\Events;
use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class UserStatusEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
protected $user;
public function __construct(User $user)
{
$this->user = $user;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('company-1');
}
}
Vue Lisenter
Pusher.logToConsole = true;
var pusher = new Pusher('my-key', {
cluster: 'sa1'
});
var channel = pusher.subscribe('private-company-1');
channel.bind('App\Events\UserStatusEvent', function(data) {
alert('hello')
});
The issue might be with the channel name. In the Laravel event, the channel name is defined as 'company-1', but in the Vue listener, it is subscribed to 'private-company-1'. Make sure that the channel name is consistent in both the Laravel event and the Vue listener.
Also, make sure that the Pusher credentials are correct and that the Vue listener is properly connected to the Pusher server.
Here's an updated Vue listener code with the correct channel name:
Pusher.logToConsole = true;
var pusher = new Pusher('my-key', {
cluster: 'sa1'
});
var channel = pusher.subscribe('private-company-1');
channel.bind('Illuminate\Notifications\Events\BroadcastNotificationCreated', function(data) {
alert('hello')
});
The problem is most likely due to the fact that you didn't define an authentication endpoint, which is needed for Pusher private channels (and presence channels). However, if you would use Laravel Echo instead, it is managed automatically. I have always used and would suggest Laravel Echo, which comes preconfigured in Laravel (uncomment the Echo/Pusher related code in resources/js/bootstrap.js). Don't forget to install the related dependencies. Also, don't forget to authorize the channel, else your private channel won't work.
