仅在需要使用Echo的Laravel-Vue js应用程序中建立与Pusher的连接

Question

我正在以Vue.js为前端，以Laravel为后端来开发MPA。我只需要一页中的实时功能（一个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);


        });   

有没有一种方法可以实例化Pusher并仅在感兴趣的Vue组件中建立连接？

Answer 1

创建new Echo实例时已建立与Pusher的连接。由于默认情况下，幼虫默认将其分配给窗口，大概是为了方便起见，每次加载app.js时都会调用它。

在您的情况下，您只需要一次，就可以将new Echo{(...移动到vue组件，在已安装或创建的方法中调用它，并将其分配给数据变量。无论您在何处调用新实例，import Echo from 'laravel-echo'都将可用，因此您可以将其移到组件脚本的顶部。您仍然需要将pusher.js分配给窗口，因为它在后面被幼虫回声调用。