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

Question

我正在开发Vue.js作为前端和Laravel作为后端的MPA。我只需要在一个页面(一个Vue js组件)的实时功能。我关注了laravel documentation，我有活动，广播，回声和推进器都在适当的地方，工作得很好。我的问题是效率。我将Pusher.logToConsole设置为true，并且我注意到当我在应用程序中加载任何页面时，它实际上会启动一个Pusher实例并建立一个连接。我希望这只发生在使用实时特性的vue组件中。

这是我的bootstrap.js中与推流/回显相关的代码：

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并建立连接？

Answer 1

与推流器的连接是在创建new Echo实例时建立的。由于larval默认情况下会将其分配给窗口，可能是为了方便起见，因此每次加载app.js时都会调用它。

在您的情况下，因为只需要一次，所以可以将new Echo{(...移动到vue组件，在mounted或created方法中调用它，并将其分配给一个数据变量。无论您在何处调用新实例，import Echo from 'laravel-echo'都必须可用，因此您只需将其移动到组件脚本的顶部即可。您仍然需要将pusher.js赋值给窗口，因为这是由larval echo在幕后调用的。