How to get connection status / other events in laravel Echo

Question

I have developed a dashboard which gets live notifications through custom events. What I would like to achieve is being able to switch between channels. I am using Vue(x) as a front-end.

created() {
    this.setTeam(this.$router.currentRoute.name);
    this.clearFastlanes();
    this.getSprintInfo('getSprintInfo');
    window.Echo.channel(this.getTeam)
      .listen('.jira.issue', this.jiraIssue)
      .listen('.jira.fastlane', this.jiraFastlane);
  },

This is my main component in which I subscribe to custom events. The only thing is, is this component is also used by another team. So i want to change my channel to the current team (leave current channel and join new team's channel). I can't really find how to do this on the internet.

This is how I connect:

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: '29564c255fe1dae3654b',
  cluster: 'eu',
  encrypted: true,
});

So basically I want to ask laravel echo if I'm currently connected and if so leave the channel and connect to the new team.

Does anyone have any idea on how to achieve this?

Answer 1

For Connection:

    window.Echo.connector.pusher.connection.bind('connected', () => {
      console.log('connected');
    });

For Disconnection:

    window.Echo.connector.pusher.connection.bind('disconnected', () => {
       console.log('disconnected);
    });

Answer 2

Socket IO Solution

Here's how you can listen 'connection', 'disconnection' and 'reconnection' events.

Connection:

window.Echo.connector.socket.on('connect', () => {
  //your code
});

Disconnection:

window.Echo.connector.socket.on('disconnect', () => {
  //your code
});

Reconnection:

window.Echo.connector.socket.on('reconnecting', (attemptNumber) => {
  //your code
  console.log(`%cSocket reconnecting attempt ${attemptNumber}`, 'color:orange; font-weight:700;');
});