Как решить проблемы:
1. Когда выбрал диалог - подключился к каналу для обмена сообщениями, все работает, но когда я нажимаю например на Избранные, то загружаются избранные диалоги, но если пользователь мне еще пишет, с которым я переписывался, то на вкладке избранные от него идут сообщения, получается что я не отписался от канала? как это сделать?
2. Когда я выбрал диалог и переписываюсь с пользователем, то почему-то не срабатывает метод
`isTyping`
событие DialogMessage
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);
}
есть меню, для ввода сообщение
<button type="button" @click.prevent="Dialogs()"> Все сообщения</button>
<button type="button" @click.prevent="dialogFavorites()"> Избранное</button>
вывод списка диалогов
<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>
вывод сообщений
<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>
поле для ввода текста
<p v-if="isTyping">{{ isTyping.name}} набирает сообщение</p>
<textarea v-model="message" @keydown="actionUser"></textarea>
код Vue
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 => {});
},
}
}
Средний
Сложный
