我正在用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组件中建立连接?
创建新Echo
实例时,将连接到pusher。幼虫默认情况下会将其分配给窗口,可能是为了方便起见,每次加载应用程序时都会调用它。js。
在你的情况下,你只需要一次,您可以移动新回显{(…
到您的vue组件,在mounted或created方法中调用它,并将其分配给一个数据变量。从“laravel Echo”导入Echo
需要在您调用新实例的任何地方都可用,因此您可以将其移动到组件脚本的顶部。您仍然需要将pusher.js分配给窗口,如下所示:被幼虫回声称为幕后。