Laravel 5.4 diffusion d'événements ne fonctionne pas avec vuejs

Question

Je veux créer une conversation avec laravel 5.4, vuejs et pusher api avec Echo. Je l'ai fait deux fois pour communiquer avec poussoir mais je n'ai aucun rappel et ma vue. Je travaille en local avec MAPM si cela peut aider.

j'ai installer

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

et ma lame-je mettre ce

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

dans mes bootstrap.js j'ai uncomment Echo et j'ai ma clé d'entrée poussoir

import Echo from "laravel-echo" 

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

ma config de radiodiffusion

'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', 
     ], 

    ], 

mon .env

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

et mes 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); 
     }); 
    } 
}); 

mon contrôleur

public function store(Request $request){ 

     $user = Auth::user(); 

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


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

    } 

mon événement

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'); 
    } 
} 

et itinéraire de canal

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

Answer 1

1) Commençons par votre fichier .env

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) fichier bootstrap.js

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) Changez votre chat.blade.php par le code suivant.

@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