Laravel 在不占用连接的情况下初始化 pusher 和 echo 的选项

Question

如果我在 bootstrap.js 文件中初始化 echo 和 pusher，我可以在 pushers 仪表板中看到每次我 visit/open 在另一个选项卡中使用我的应用程序时都会建立一个新连接，即使我没有订阅任何频道：

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
     broadcaster: 'pusher',
     key: process.env.MIX_PUSHER_APP_KEY,
     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
     encrypted: true
 });

这非常糟糕，因为我只需要 pusher/echo 在我的应用程序的单个页面上，而不是全部。

所以我在我的应用程序中设置了一个 page.vue 文件，我在其中加载 echo/pusher:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

mounted() {

this.Echo = new Echo({
        broadcaster: 'pusher',
        key: process.env.MIX_PUSHER_APP_KEY,
        cluster: 'us',
        encrypted: true
      });

      this.Echo.channel('post')
      .listen('NewPost', (item) => {
          console.log(item);
      });

但是有什么方法可以将 Echo/pusher window.Echo window.Pusher 添加到我的 window DOM 而无需连接到推送器 websocket？例如，仅在我调用 .listen()

后连接

Answer 1

这个怎么样？

import Echo from 'laravel-echo';        
window.EchoService = {
           init: () =>
     new Echo({
         broadcaster: 'pusher',
         key: process.env.MIX_PUSHER_APP_KEY,
         cluster: process.env.MIX_PUSHER_APP_CLUSTER,
         encrypted: true
     }),
     otherFunctions: ....,  
    }

然后在你的vue页面：

mounted() {
      this.newEcho = window.EchoService.init();
      this.newEcho.channel('post')
      .listen('NewPost', (item) => {
          console.log(item);
      });
}

您可能还需要在组件销毁时断开与推送器的连接

  destroyed() {
    this.newEcho.leave('post');
    // or this.newEcho.leave();
  }

Laravel 在不占用连接的情况下初始化 pusher 和 echo 的选项

Laravel options to init pusher and echo without taking up connections

laravel

echo

pusher