Laravel Echo 导致 post 路由失败答案

【问题标题】：Laravel Echo causing post routes to failLaravel Echo 导致 post 路由失败
【发布时间】：2017-08-10 18:41:55
【问题描述】：

当我没有在 bootstrap.js 中指定 Laravel Echo 时，应用程序运行良好。

composer.json

"require": {
    "laravel/framework": "5.4.*",
    "pusher/pusher-php-server": "~2.6",
},

package.json

"dependencies": {
    "laravel-echo": "^1.3.2",
    "pusher-js": "^4.1.0",
}

bootstrap.js

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'app-key',
    cluster: 'eu',
    encrypted: true
});

广播.php

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => 'eu',
        'encrypted' => true
    ],
],

我在我的本地主机上，并尝试了多个教程和许多变体，但没有一个能够解决问题。应用程序正确加载了所有 get api 路由，但是当我尝试登录时出现 500 错误。

我也在使用 Vue 和 VueRouter，以防有任何影响。

编辑

好像有东西干扰了用 axios 发送的 CsrfToken。如果我重新排列我的 bootstrap.js 文件，以便在 axios 之前导入 Echo：

import Echo from 'laravel-echo';
etc.

window.axios = require('axios');

post 路由运行良好，但是当我通过 axios post route 提交它们时，我无法监听任何事件（如果我通过 Artisan 控制台命令提交事件，它工作正常，我可以监听响应并输出它到控制台）。

如果我在事件构造函数中dd('test')，则发布路由输出test。如果我在broadcastOn方法中dd('test')，post route不会打到这个函数。

【问题讨论】：

试试这个：取消注释config > app.php文件中的App\Providers\BroadcastServiceProvider::class,行，并在.env文件中指定你的PUSHER_APP_ID、PUSHER_APP_KEY和PUSHER_APP_SECRET？
我已经取消注释它并且我的.env 文件设置正确，因为事件使用控制台命令可以正常工作。
下一步是在 Pusher 中检查您的集群信息。就我而言，它是mt1 而不是eu。您可以在推送器仪表板中找到集群信息。

标签： laravel pusher laravel-echo

【解决方案1】：

您可能需要在laravel-echo 之前导入pusher-js。

window.Pusher = require('pusher-js');

import Echo from 'laravel-echo';

【讨论】：

【解决方案2】：

如果有人遇到类似问题，解决方案：不要使用 Laravel Echo。

删除 Echo 并在主应用程序 js 之前直接拉入 Pusher (https://js.pusher.com/4.1/pusher.min.js)。然后在bootstrap.js文件的底部：

window.Pusher = new Pusher('app-key', {
    cluster: 'your-cluster',
    encrypted: (true/false),
    auth: {
        headers: {
            'X-CSRF-Token': token.content
        }
    }
});

现在您可以执行类似以下的操作：

var channel = Pusher.subscribe('channel-name');
channel.bind('broadcast-event-name', function(data) {
    console.log(data);
});

【讨论】：