我正在开发 MPA,使用 Vue.js 作为前端,使用 Laravel 作为后端。我只需要一个页面(一个 Vue js 组件)中的实时功能。我关注了laravel documentation我有事件、广播、Echo 和 Pusher 都已到位并且运行良好。我的问题是效率。我将 Pusher.logToConsole 设置为 true,我注意到当我在我的应用程序中加载任何页面时,它实际上启动了一个 Pusher 实例并建立了连接。我希望这只发生在使用实时功能的 vue 组件中。
这是我的 bootstrap.js 中与 Pusher/Echo 相关的代码:
import Echo from 'laravel-echo';
const client = require('pusher-js');
Pusher.logToConsole = true;
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'my key is here',
cluster: 'eu',
clinet: client,
});
这是具有实时功能的 Vuejs 组件中的代码:
Echo.private('my-channel')
.listen('.App\\Events\\myEvent', (e) => {
console.log(e);
});
有没有办法只在感兴趣的Vue组件中实例化Pusher并建立连接?
最佳答案
在创建 new Echo
实例时,会建立与推送器的连接。由于 laravel 默认将它分配给窗口,大概是为了方便,每次加载 app.js 时都会调用它。
在你的情况下,因为你只需要一次,你可以将 new Echo{(...
移动到你的 vue 组件,在安装或创建的方法中调用它,并将它分配给一个数据变量。import Echo from 'laravel-echo'
将需要在您调用新实例的任何地方可用,因此您可以将其移动到组件脚本的顶部。您将需要仍然将 pusher.js 分配给窗口,因为这由 laravel echo 在幕后调用。
关于laravel - 仅在需要时使用 Echo 在 Laravel-Vue js 应用程序中建立与 Pusher 的连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61029687/