Pusher and Vue.js components not leaving channel when using Vue Router

Question

I'm using Pusher with Laravel Echo to create presence channels for certain areas in my application. All my front-end routing is done using Vue Router.

When switching between routes, Vue router will load certain components based on my routes settings. It works great, however, Pusher doesn't automatically disconnect the users from these channels. It will happen only if I run a full page refresh, which is not what I want.

In my component, the js code to join a Pusher channel is inside mounted, like this:

    data() {
        return {
            users: [],
        }
    },
    mounted() {
        Echo.join('transaction.' + this.tid)
            .here(users => {
                this.users = users;
                }
            })
            .joining(user => {
                this.users.push(user);
            })
            .leaving(user => {
                this.users.splice(this.users.indexOf(user), 1);
            });
    },
    methods: {
        // ...
    },

How do I disconnect the users from the channels using Vue Router routing, without refreshing the page?

Thank you.

Culberson

Echo.leave('transaction.' + this.tid);? – Wilden

Answer 1

I believe that Vue Router may keep the component instance alive for performance reasons. Because of that, the websocket channel could still be connected even when routing between components.

To prevent this issue, you can manually leave the channel using Vue's component destroyed method.

Since you are using Laravel's Echo, all you need to do is: Echo.leave('channel-name')

...
methods: {
    // ...
},
destroyed() {
    Echo.leave('transaction.' + this.tid);
}

Katzen

i have the reverse case of this issue here @Katzen once i navigate to another route via vue-router then come back to my homepage i want it to load the list of all online users, but echo doesnt fire except i do a full page refresh #53693868 – Object

@dapo I posted an answer there for what I think it could fix the issue. I hope it helps. – Katzen