jorge_dev96
1 month ago

ListenWhisper doesn't receive an client event (Larave-echo & Vue.jsl)

Posted 1 month ago by jorge_dev96

I'm working in a realtime chat website using Laravel, laravel-echo,laravel-echo-server, and redis. My chat is able to receive and send messages, but I want to add a message when a user start to typing ('User x is typing...'). But the client event is typing triggered

I have diferent vue.js components in this chat,

ChatApp.vue <- Main component

...
        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>

I don't get any error in my laravel-echo-server so I don't know what the problem is? What I'm doing wrong?

Please sign in or create an account to participate in this conversation.