Laravel + vue pusher dialog system?

Question

Laravel

How to solve problems:

1. When I selected a dialog, I connected to the messaging channel, everything works, but when I click on Favorites, for example, the selected dialogs are loaded, but if the user still writes to me with whom I corresponded, then on the Favorites from tab there are messages, it turns out that I did not unsubscribe from the channel? how to do it?

2. When I selected a dialog and chat with the user, for some reason the `isTyping`

DialogMessage event method does not work

public $data;
    public $chat_id;
    public function __construct($data,$chat_id)
    {
        $this->data = $data;
        $this->chat_id = $chat_id;
    }
    public function broadcastOn()
    {
        return new PrivateChannel('chat.' . $this->chat_id);
    }

there is a menu to enter a message

<button type="button" @click.prevent="Dialogs()"> Все сообщения</button>
    <button type="button" @click.prevent="dialogFavorites()"> Избранное</button>

list of dialogs

<div class="contact-list__items" v-for="(dialog, index) in dialogs" @click.prevent="selectUser(dialog.id,dialog.user,index,dialog.avatar,dialog.fullname)">
            <p class="username">{{dialog.fullname}}</p>
    </div>

message output

<ul class="chat--messages__wrapper">
      <li class="chat--messages__item" v-for="(message,index) in messages">
        <div class="chat--user__data">
          <p class="last--massage" v-html="message.replay"></p>
        </div>
      </li>
    </ul>

text input field

<p v-if="isTyping">{{ isTyping.name}} набирает сообщение</p>
    <textarea v-model="message" @keydown="actionUser"></textarea>

Vue code

export default {
            name: "Dialogs",
            data: function () {
                return {
                    userAuth: {
                        id: 0,
                        avatar: '',
                        fullname: ''
                    },
                    isTyping: false, //Пользователь набирает сообщение
                    typingTimer: false,
                    dialogs: [],
                    messages: [],
                    message: "",
                    dialogSelect: 0,
                    userSelect: {
                        id: 0,
                        avatar: '',
                        fullname: ''
                    },
                    dialogIndex: 0,
                    messageDate: '',
                    offset: 0,
                    limit: 40,
                    activeFilter : 'all',
                    dialog: { //Для выпадающего меню, с дествиями над диалогом
                        like : 0,
                        favorite: 0,
                        ignore: 0
                    }
                }
            },
            created(){
    
            },
            watch: {
            },
            computed: {
                channel(){
                    return  window.Echo.private('chat.' + this.dialogSelect);
                }
            },
            mounted() {
                this.User();
                this.Dialogs();
            },
            methods: {
                pushMessage(){
                    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 => {});
                },
                actionUser(){
                    console.log(this.userAuth.fullname);
                    this.channel
                        .whisper('typing', {
                            name: this.userAuth.fullname
                        });
                },
                selectUser(id,user,x,avatar, fullname){
                  this.dialogSelect  = id;
                  this.userSelect.id  = user;
                  this.userSelect.avatar  = avatar;
                  this.userSelect.fullname  = fullname;
                  this.dialogIndex  = x;
                    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;
                            this.pushMessage();
                        })
                        .catch(error => {});
                },
                dialogFavorites(){
                    this.dialogNone();
                    axios.get('/profile/dialogs/favorites')
                        .then((response) => {
                            this.dialogs = response.data;
                            this.activeFilter = 'f';
                        })
                        .catch(error => {});
                },
                Dialogs(){
                    this.dialogNone();
                    axios.get('/profile/dialogs')
                        .then((response) => {
                            this.dialogs = response.data;
                            this.activeFilter = 'all';
    
                        })
                        .catch(error => {});
                },
                User(){
                    axios.get('/profile/me/auth')
                        .then((response) => {
                            this.userAuth.id = response.data.id;
                            this.userAuth.avatar = response.data.avatar;
                            this.userAuth.fullname = response.data.fullname;
    
                        })
                        .catch(error => {});
                },
            }
        }

Answer 1

You must leave the channel as described in the documentation . You can implement this as a separate method and then use it in a Vuejs beforeDestroy hook or on some other event