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

【问题标题】：Establishing a connection to Pusher only when needed in a Laravel-Vue js application using Echo仅在需要时使用 Echo 在 Laravel-Vue js 应用程序中建立与 Pusher 的连接
【发布时间】：2020-04-04 14:36:31
【问题描述】：

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

【问题讨论】：

标签： laravel vue.js echo pusher

【解决方案1】：

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

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

【讨论】：