我想与lacho 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中我取消了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;
});
答案 0 :(得分:2)
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。
@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