仅在需要时在 Laravel-Vue js 应用程序中使用 Echo 建立与 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 实例时会建立与推送器的连接。由于幼虫默认将其分配给 window，大概是为了方便起见，每次加载 app.js.

时都会调用它

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

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

Establishing a connection to Pusher only when needed in a Laravel-Vue js application using Echo

laravel

vue.js

echo

pusher