Laravel options to init pusher and echo without taking up connections

Question

If I init echo and pusher in the bootstrap.js file I can see in pushers dashboard that a new connection is taken every time I visit/open my app in another tab even though I dont subscribe to any channels:

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

This is very bad since I only need pusher/echo on a singel page in my app and not all.

So instead I have setup a page.vue file in my app where I load 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);
      });

But is there any way I can add Echo/pusher window.Echo window.Pusher to my window DOM without making ut connect to pushers websocket? Eg only connect once I call .listen()

Answer 1

How about this?

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: ....,  
    }

Then in your vue page:

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

You may also need to disconnect from the pusher on component destroyed

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