我正在使用Laravel、laravel-echo、laravel-echo-server和redis的实时聊天网站工作。我的聊天能够接收和发送消息，但我想在用户开始键入时添加消息("用户 x 正在键入..."(。但客户端事件typing触发
我在这个聊天中有不同的vue.js组件，
ChatApp.vue <-主要组件
...
mounted() {
Echo.private(`message.${this.user.id}`)
.listenForWhisper('.typing', (e) => { // This is listening for client event named typing
console.log(e);
setTimeout(function() {
console.log('works');
}, 900);
})
Echo.private(`messages.${this.user.id}`)
.listen('.NewMessage', (e) => { //This is listening for a backend event named New Message
this.handleIncoming(e.message);
this.playSoundNotification();
});
axios.get('/user/contacts')
.then((response) => {
console.log(response.data);
this.contacts = response.data;
});
},
....
MessageComposer.vue component
<template>
<div class="composer">
<span @typing="typing_handler" v-show="typing" class="help-block" style="font-style: italic;">
Tú amigo esta escribiendo...
</span>
<textarea v-model="message" @keydown="isTyping" @keydown.enter="send" placeholder="Message..."></textarea>
</div>
</template>
<script >
export default {
data(){
return {
message: '',
typing:false,
};
},
methods: {
send(e){
e.preventDefault();
if(this.message == ''){
return;
}
this.$emit('send', this.message);
this.message = '';
},
typing_handler(trigger){
this.typing = trigger;
},
isTyping() {
let self_user_id = parseInt($('#self_user_id').val());
var channel = Echo.private(`message.${self_user_id}`); //Client auth
setTimeout(function() {
channel.whisper('typing', {
typing: true
});
}, 300);
},
}
}
</script>
我的拉维尔回声服务器没有任何错误，所以我不知道问题是什么？ 我做错了什么？
有时您可能希望将事件广播到其他连接的客户端，而无需访问Laravel应用程序。这对于"键入"通知之类的操作特别有用，您希望提醒应用程序的用户另一个用户正在给定屏幕上键入消息。
要广播客户端事件，您可以使用 Echo 的耳语方法：
Echo.private('chat')
.whisper('typing', {
name: this.user.name
});