Laravel 5.4 事件广播不适用于 vuejs

Question

我想用 laravel 5.4、vuejs 和带有 Echo 的 pusher api 创建一个聊天。我做了两次与 pusher 通信，但我没有回调和我的 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;
});

Answer 1

1) 让我们从您的 .env 文件开始

BROADCAST_DRIVER =pusher // instead of log

2) 配置/app.php

App\Providers\BroadcastServiceProvider::class, //Uncomment it out

3) 配置/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