laravel and react pusher setup - php

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":"user1#health.io","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