laravel vue.js pusher

Question

i making a test application using laravel 5.5 and vue.js ,im using in pusher laravel echo . when i send message from the application i can see in "pusher.com" Debug Console that the message successful been send so i know its work. but i get nothing from the vue js Echo , i dont even get an error , what is wrong?

vue

  created(){
        window.axios.post('/message')
            .then((res) => {
                this.messages = res.data;
            }),
            Echo.join('chat')
                .listen('MessagePosted',(e)=>{
                    console.log(e)
                });
    }

bootstrap.js

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: '1a67166bcd6eb7ce7e67',
cluster: 'us2',
encrypted: true});

controller

  public function store(Request $request){

    $message = Auth::user()->messages()->create([
        'message' => $request->message,
    ]);

    event(new MessagePosted($message,Auth::user()));
    return ['status' => 'OK'];
}

model

class MessagePosted implements ShouldBroadcast

{ use Dispatchable, InteractsWithSockets, SerializesModels;

/**
 * @var Message
 *
 */

public $message;

public $user;
/**
 * Create a new event instance.
 *
 * @return void
 */
public function __construct(Message $message,User $user)
{

    $this->message = $message;
    $this->user = $user;

}

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

    return new PresenceChannel('chat');
}}

channels.php

Broadcast::channel('chat', function ($user) {
return $user;});

agein , when i send message from my site "pusher.com" recived the message in realtime , but i cant see nothing from the Echo , and i dont have any errors

someone can help?

Answer 1

By default, Laravel's ShouldBroadcast uses a job queue for the broadcast events. You can either set up your queue which is probably the ideal solution. Alternatively, to get it working quickly you can change your MessagePosted event to ShouldBroadcast Now :

class MessagePosted implements ShouldBroadcastNow

and don't forget

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;