Laravel 5.4 事件广播不适用于 vuejs

Posted 2023-02-21

【中文标题】Laravel 5.4 事件广播不适用于 vuejs

【英文标题】：Laravel 5.4 event broadcasting not work with vuejs

【发布时间】：2017-08-02 22:03:50

【问题描述】：

我想用 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;
);

【参考方案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

【讨论】：

Pusher 还有其他更便宜且相关的替代品吗？这是非常昂贵的

[socket.io/] 是 Pusher 的替代品，也是开源的。我从未在项目中尝试过。 Pusher.js 易于与系统集成。

@Rutvij Kothari，看来你可以帮助我。看看这个：***.com/questions/45877837/…