Laravel Echo导致邮政路由失败

Question

当我没有在bootstrap.js中指定Laravel Echo时，应用程序工作正常。

作曲家.json

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

包.json

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

引导程序.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，以防有任何影响。

编辑

似乎有什么东西干扰了用公理发送的 CsrfToken。如果我重新排列我的引导程序.js文件，以便在 axios 之前导入 Echo：

import Echo from 'laravel-echo';
etc.
window.axios = require('axios');

发布路由工作正常，但是当我通过 axios post 路由提交它们时，我无法收听任何事件(如果我通过 Artisan 控制台命令提交事件，它工作正常，我可以收听响应并将其输出到控制台(。

如果我dd('test')事件构造函数，则后路由输出test. 如果我在 broadcastOn 方法中dd('test')，则邮政路由不会命中此功能。

Answer 1

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

window.Pusher = require('pusher-js');
import Echo from 'laravel-echo';

Answer 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);
});