How to exit laravel + Vue broadcast channel?

Question

Vue.js

where am i doing it wrong?

when I select a dialog, I subscribe to the chat.{id dialoga} channel, the chat

is going on, the broadcast is working,



but when I go to the favorite dialogs tab, the dialogsFavorites() method then I exit the chat.{id of the previous dialoga} channel, I call the destroyChannel() method,

but messages come all smoothly, even when the dialogue is not selected

export default {
    name: "Dialogs",
    created(){
    },
    watch: {
    },
    computed: {
        channel(){
            return  window.Echo.private('chat.' + this.dialogSelect);
        },
    },
    mounted() {
        this.User();
        this.Dialogs();
    },
    methods: {
        addChanel(){
            console.log('chat.' + this.dialogSelect);
            if (this.dialogSelect > 0){

                this.channel
                    .listen('DialogMessage',({data}) => {
                        this.messages.push(data);
                        this.isTyping = false;
                    })
                    .listenForWhisper('typing', (e) => {
                        console.log(e);
                        this.isTyping = e;

                        if (this.typingTimer) clearTimeout(this.typingTimer);

                        this.typingTimer = setTimeout(() => {
                            this.isTyping = false;
                        }, 2000);
                    });
            }

        },
        sendMessage(){
            axios.post('/profile/dialogs/send',{
                message:this.message,
                chat_id: this.dialogSelect,
                user_id: this.userSelect.id,
                type: 1
            })
                .then((response) => {
                    this.message = '';
                })
                .catch(error => {});
        },
        destroyChannel(){
            window.Echo.leaveChannel('chat.' + this.dialogSelect);
        },
        selectUser(id,user,x,avatar, fullname){
          this.destroyChannel();
          this.dialogSelect  = id;
          this.userSelect.id  = user;
          this.userSelect.avatar  = avatar;
          this.userSelect.fullname  = fullname;
          this.dialogIndex  = x;

            this.addChanel();

            axios.post('/profile/dialogs/messages',{
                dialog_id: id,
                offset: this.offset,
                limit: this.limit
            })
                .then((response) => {
                    this.messages = response.data.messages;
                    this.dialog.like = response.data.like;
                    this.dialog.favorite = response.data.favorite;
                    this.dialog.ignore = response.data.ignore;
                })
                .catch(error => {});
        },
        dialogFavorites(){
            this.destroyChannel();
            this.dialogNone();
            axios.get('/profile/dialogs/favorites')
                .then((response) => {
                    this.dialogs = response.data;
                    this.activeFilter = 'f';
                })
                .catch(error => {});
        },
    }
}

Answer 1

Maxim , I already wrote to you, look at the documentation , it also says about private channels that you should use not .leaveChannel(), but .leave() then there will be a complete unsubscribe from any broadcast.

If you want to leave a channel and its associated private and presence channels, you can call the exit method:
Echo.leave('orders');

Also try to see what the method unsubscribes you from

destroyChannel(){
    console.log('chat.' + this.dialogSelect)
    window.Echo.leaveChannel('chat.' + this.dialogSelect);
},