Hi all please i am missing something listening to Echo Private channel in Vue js.
Pusher setup is connected I can Listen, Join, Leave Presence channel with no issue
Working with Private channel everything seems connected just the listening part
I can pass data to push from my event
Packages
"pusher-js": "^6.0.3",
"laravel/framework": "^7.0",
"laravel-echo": "^1.8.0",
"pusher/pusher-php-server": "~3.0",
Pusher Debug Console
// Event in my pusher debug console
5636.9188820 Channel: private-Chat.4, Event: App\Events\Account\PrivateChatEvent
{
"message": {
"id": 121,
"created_at": "2020-07-17T11:48:03.000000Z",
"updated_at": "2020-07-17T11:48:03.000000Z",
"content": "hi",
"media": null,
"media_type": null,
"user_chat_session_id": 4
}
}
after saving into the database in the controller
broadcast(new PrivateChatEvent($message));
I added channel in channels.php which got authenticated
Broadcast::channel('Chat.{session}', function($user, UserChatSession $session ){
if($user->id === $session->user1_id || $user->id === $session->user2_id){
return true;
}else {
return false;
};
});
//Component is loaded on click event, after click event, I get the auth response
//Request
socket_id=5636.9188820&channel_name=private-Chat.4
//Response
{"auth":"ec3807a0856e09614819:7189f26cde23e38e93b66a941e7f72622a5e850de01c771821e782f59ec64f19"}
PrivateChatEvent.php
<?php
namespace App\Events\Account;
use App\Models\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class PrivateChatEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
/**
* Create a new event instance.
*
* @param $message
*/
public function __construct($message)
{
//
$this->message = $message;
$this->dontBroadcastToCurrentUser();
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('Chat.'.$this->message['user_chat_session_id']);
}
}
Here is my view component
created() {
Echo.private(`Chat.${this.friend.session.id}`).listen(
"PrivateChatEvent",
(e) => {
console.log(e)
}
);
},
Nothing shows up in the console
I am lost because each time I save the data in the database there is API Message in pusher but i am on able to listen to the message in frontend.
Thank you so much