I've integrated Pusher with Laravel Echo to establish presence channels for specific areas within my application. All navigation on the front-end is managed through Vue Router.
I'm facing an issue where Vue Router loads components based on route settings, but Pusher doesn't automatically disconnect users from these channels when switching routes. The disconnection only occurs if a full page refresh is triggered, which is not ideal.
Within my component, the JavaScript code for joining a Pusher channel is in the mounted hook 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: {
// ...
},
Is there a way to disconnect users from the Pusher channels using Vue Router routing without having to refresh the entire page?
Appreciate any help or guidance. Thank you.