我正在使用Vue.js作为前端和Laravel作为后端来开发MPA。我只需要一页（一个Vue js组件）中的实时功能。我关注了laravel文档，并准备了活动，广播，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);
});
有没有一种方法可以实例化Pusher并仅在感兴趣的Vue组件中建立连接？
new Echo创建实例时，将建立与Pusher的连接。由于默认情况下，幼虫默认将其分配给窗口，大概是为了方便起见，每次加载app.js时都会调用它。
在您的情况下，您只需要一次，就可以将其移动new Echo{(...到vue组件，在已挂载或创建的方法中调用它，并将其分配给数据变量。import Echo from 'laravel-echo'无论您在哪里调用新实例，都将需要使用它，因此您可以将其移动到组件脚本的顶部。您仍然需要将pusher.js分配给窗口，因为它在后面被幼虫回声调用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句