Laravel 5.4イベントブロードキャストがvuejsで動作しない

Question

laravel 5.4、vuejs、pusher api with Echoでチャットを作成します。プッシャーとコミュニケーションをとるのに2回はしましたが、コールバックと私のvueはありません。 MAPMが役立つならば、私はMAPMでローカルで働いています。

は、私は私がコメントを解除エコー持っている私のbootstrap.jsでこの

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

を入れ

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

と私のブレードをインストールしていると私は私のプッシャーキー入力を持って

import Echo from "laravel-echo" 

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

私のブロードキャスト設定

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

    ], 

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

私.envと私の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); 
     }); 
    } 
}); 

私のコントローラ

public function store(Request $request){ 

     $user = Auth::user(); 

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


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

    } 

私のイベント

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

チャネルルート

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

Answer 1

1）のは、あなたの.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）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ファイル）次のコードで、あなたのchat.blade.phpを変更します。