Я хочу создать чат с laravel 5.4, vuejs и pusher api с Echo. Я сделал это два раза, чтобы общаться с толкателем, но у меня нет обратного вызова и моего vue. Я работаю на местном уровне с MAPM, если это может помочь.
я установил
composer require pusher/pusher-php-server npm install --save laravel-echo pusher-js и мой клинок я положил это
<meta name="csrf-token" content="{{ csrf_token() }}">
в моем bootstrap.js у меня есть uncomment Echo, и у меня есть запись моего ключа-толкателя
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', ], ],
мой .env
BROADCAST_DRIVER=log PUSHER_APP_ID=my id key PUSHER_APP_KEY=my app key PUSHER_APP_SECRET=my secret key
и мой 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; });
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. ], ],
Вы можете найти информацию о кластере, кроме имени вашего приложения, в панели инструментов толкателя
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 на следующий код.
@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