Laravel选项可在不占用连接的情况下初始化推流器和回显

Question

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

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);
      });

但是，有没有什么方法可以将回声/推送器window.Echo window.Pusher添加到我的窗口DOM中，而不使ut连接到推送器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();
  }