laravel和反应按钮设置

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"}}}}

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐