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

Question

我正在开发 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并建立连接？

Answer 1

在创建 new Echo 实例时，会建立与推送器的连接。由于 laravel 默认将它分配给窗口，大概是为了方便，每次加载 app.js 时都会调用它。

在你的情况下，因为你只需要一次，你可以将 new Echo{(... 移动到你的 vue 组件，在安装或创建的方法中调用它，并将它分配给一个数据变量。import Echo from 'laravel-echo' 将需要在您调用新实例的任何地方可用，因此您可以将其移动到组件脚本的顶部。您将需要仍然将 pusher.js 分配给窗口，因为这由 laravel echo 在幕后调用。