laravel和反应按钮设置

Question

I am working on a web project.

I have laravel as my back-end reactjs as my front-end

I have users, posts comments in my DB.

I wanted to implement pusher so i can have this real time posts showing up once any user posted a new post.

I am very close to achieve this behavior.

on laravel

i have this event

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

    public $post;

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('posts');
    }

} 

and once the post stored to my database I trigger this event

event(new NewPostsCast($output)); 

on react

let channel = pusher.subscribe("posts");
// i guess error is here because this function never called
// it's only called at startup
channel.bind("NewPostsCast", post => {
    console.log("pusher::: ", post);
});

might be useful

from pusher logs

Pusher : No callbacks on posts for App\Events\NewPostsCast

however pusher returns this log also

Pusher : Event recd : {"event":"App\\Events\\NewPostsCast","channel":"posts","data":{"post":{"id":19,"title":"sd","body":"eksdl","tags":"[\"ds\",\"dsf\"]","user_id":1,"created_at":"2019-04-18 14:22:00","updated_at":"2019-04-18 14:22:00","votes":0,"user":{"id":1,"name":"user1","username":"user1","email":"[e-mail]","address":null,"state":null,"country":null,"gender":"female","phone":null,"avatar":"http://healthqo.api/public/profile_pics/default/female.png","created_at":"2019-04-09 08:30:12","updated_at":"2019-04-09 08:30:12"}}}}

Answer 1

in case anyone is still struggling with the same problem

from pusher logs it says (No Callbacks on posts for App\Events\NewPostsCast) that quite solves the problem

since react and laravel are separated in my project (NewPostsCast) is not defined so i had to change first parameter of the bind function

like so:
FROM

let channel = pusher.subscribe("posts");
channel.bind("NewPostsCast", post => {
    console.log("pusher::: ", post);
});

TO

let channel = pusher.subscribe("posts");
channel.bind("App\\Events\\NewPostsCast", post => {
    console.log("pusher::: ", post);
});

not sure why double double back slashes but it gives me a syntax error with single back slash