Laravel 5.4事件广播不适用于vuejs [英] Laravel 5.4 event broadcasting not work with vuejs
问题描述
我想使用laravel 5.4,vuejs和pusher api与Echo创建聊天.我做了两次与pusher的通信,但是没有回调和提示.如果有帮助,我可以在MAPM本地工作.
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.
我已经安装
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() }}">
在bootstrap.js中,我没有注释Echo,并且已经输入了推键
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'
});
我的广播配置
'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文件开始
1) Let's start with your .env file
BROADCAST_DRIVER =pusher // instead of log
2)config/app.php
2) config/app.php
App\Providers\BroadcastServiceProvider::class, //Uncomment it out
3)config/broadcasting.php
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文件
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)通过以下代码更改chat.blade.php.
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
这篇关于Laravel 5.4事件广播不适用于vuejs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!