Unable to Listen to Laravel Echo Private Channel

Question

after creating the event "newComment" laravel echo not listen to my event ! although the event is created in the debug console of Pusher ! this is my event

<?php

namespace App\Events;

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;
use App\User ;

class NewComment implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public $user ; 
    public $comment ;
    public function __construct(User $user,$comment)
    {
        $this->user = $user;
        $this->comment= $comment;
        
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('newComment.',$this->comment->post_id);
    }
}

this is my route channel

Broadcast::channel('newComment.{post_id}', function ($user, $post_id) {
    return true;
});

and my listner function in component vueJS

initializeListner(){
      Echo.private(`newComment.${ this.post_id}`)
        .listen('NewComment', (e) => {
        console.log('event work');
        this.comments.unshift(e.comment);

        document.querySelectorAll('.comment').forEach(item =>{
          item.classList.remove('new')
        })
        document.querySelectorAll('.comment')[0].classList.add('new')
        console.log('new listen to event');
    });
    }

anyone can help me pls 🙏

Answer 1

I think this is an authentication issue. There are not many details, if you explain the problem in detail, I can be of more help.

in main.js

// Echo
import Echo from "laravel-echo";

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'APP_KEY',
    authEndpoint: '/broadcasting/auth'
    auth: {
        // update here
        headers: {
            'Authorization': 'Bearer your_api_Toke',
            'X-CSRF-Token': "CSRF_TOKEN"
         }
      }
    });