Laravel 5.4 event broadcasting not work with vuejs

Question

I want create a chat with laravel 5.4, vuejs and pusher api with Echo. I did it two time to communicate with pusher but i have no callback and my vue. I work in local with MAPM if its can help.

i have install

composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js

and my blade i put this

<meta name="csrf-token" content="{{ csrf_token() }}">

in my bootstrap.js i have uncomment Echo and i have entry my pusher key

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'my-push-key'
});

my broadcasting config

'default' => env('BROADCAST_DRIVER', 'null'),
    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
             //
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

my .env

BROADCAST_DRIVER=log
PUSHER_APP_ID=my id key
PUSHER_APP_KEY=my app key
PUSHER_APP_SECRET=my secret key

and my app.js

const root = new Vue({
    el: '#root',

    data: {

        messages: []
    },

    methods: {
        addMessage(message){
            this.messages.push(message);

            axios.post('/messages', message).then(response => {

            });
        }
    },

    created() {

        axios.get('/messages').then(response => {
            this.messages = response.data;
        });


        Echo.join('chatroom')
            .here()
            .joining()
            .leaving()
            .listen('MessagePosted', (e) => {
                console.log(e);
        });
    }
});

my controller

public function store(Request $request){

        $user = Auth::user();

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


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

    }

my event

namespace App\Events;

use App\Message;
use App\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

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


    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 Channel|array
     */
    public function broadcastOn()
    {
        return new PresenceChannel('chatroom');
    }
}

and channel route

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

Answer 1

1) Let's start with your .env file

BROADCAST_DRIVER =pusher // instead of log

2) config/app.php

App\Providers\BroadcastServiceProvider::class, //Uncomment it out

3) config/broadcasting.php

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => 'mt1', //mt1 is for east united state, eu for europe. 
    ],
],

You can find cluster information besides your app name in pusher dashboard

4) bootstrap.js file

window.axios.defaults.headers.common = {
    // 'X-CSRF-TOKEN': window.Laravel.csrfToken, <-- Comment it out (if you are extending layouts.app file, you won't require this.)
    'X-Requested-With': 'XMLHttpRequest'
};

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'YOUR_PUSHER_KEY',
    cluster: 'mt1',
    encrypted : true
});

5) Change your chat.blade.php by the following code.

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Chatroom
                    </div>

                    <div id="app">
                        <chat-log :messages="messages"></chat-log>
                        <chat-composer v-on:messagesent="addMessage"></chat-composer>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection