提问者:小点点

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


我正在用Vue开发MPA。js作为前端,Laravel作为后端。我只需要一个页面(一个Vue js组件)中的实时功能。我遵循了laravel的文档,我的活动、广播、回声和推进器都准备就绪,工作正常。我的问题是效率。我有推手。logToConsole设置为true,我注意到当我在应用程序中加载任何页面时,它实际上启动一个Pusher实例并建立连接。我希望这只发生在使用实时功能的vue组件中。

这是我的引导程序中与Pusher/Echo相关的代码。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);


        });   

是否有方法实例化Pusher并仅在感兴趣的Vue组件中建立连接?


共1个答案

匿名用户

创建新Echo实例时,将连接到pusher。幼虫默认情况下会将其分配给窗口,可能是为了方便起见,每次加载应用程序时都会调用它。js。

在你的情况下,你只需要一次,您可以移动新回显{(…到您的vue组件,在mounted或created方法中调用它,并将其分配给一个数据变量。从“laravel Echo”导入Echo需要在您调用新实例的任何地方都可用,因此您可以将其移动到组件脚本的顶部。您仍然需要将pusher.js分配给窗口,如下所示:被幼虫回声称为幕后。