Laravel echo 收听已读消息

Question

How I can listen, if message seen by user?

I have code:

 watch: { message() { Echo.private('chat') .whisper('typing', { name: this.message }); } }, methods: { send(){ if(this.message.length != 0 && this.message.length <= 4000) { this.chat.message.push(this.message); this.chat.user.push('you'); this.chat.time.push(this.getTime()); axios.post('/sendMessage', { message: this.message, //lastName: 'Flintstone' }) .then(response => { console.log(response); this.message = ''; }) .catch(error => { console.log(error); }); } }, getTime() { let time = new Date(); return time.getHours() + ':' + time.getMinutes(); } }, mounted() { Echo.private('chat') .listen('ChatEvent', (e) => { this.chat.message.push(e.message); this.chat.user.push(e.user); this.chat.time.push(this.getTime()); console.log(e); }) .listenForWhisper('typing', (e) => { if(e.name != '') this.typing = 'typing..'; else this.typing = null; }); }

I updated:

 methods: { seenMessage() { axios.post('/setMessagesSeen/' + this.convId) .then( response => { this.chat.seen = ''; }) .catch( response => { console.log(response) } ) }, send(){ if(this.message.length != 0 && this.message.length <= 4000) { this.chat.message.push(this.message); this.chat.user.push(this.user); this.chat.time.push(this.getTime()); this.chat.seen.push('unread'); axios.post('/sendMessage/' + this.convId, { message: this.message, }) .then(response => { console.log(response); this.message = ''; }) .catch(error => { console.log(error); }); } }, getTime() { let time = new Date(); return time.getHours() + ':' + time.getMinutes(); } },

How I can send class "unread" to element div other user? I can paste class on current user, and I get color on element chat only for me, but how I can hide element for me and other user, when message is seen?

---

I can watch, if message typing. But How I can listen if message seen by user? I need do actions, if message sended for seen message or how?

Answer 1

To detect if user clicked to textarea, try this :

• First, create a method hasSeen in your Vuejs Instance.

  \n ..., \n methods : {\n   send : () => {...},\n   getTime: () => {...}, \n   hasSeen: () => { \n            axios.put('your-api-or-backend-domains/setHasSeenMessage') \n                 .then( response => { //Okay }) \n                 .catch(response => { console.log(response)}) \n           } \n  }     \n

  • Then, in your textarea just add onclickEvent:

  <textarea> name="message" @click="hasSeen"></textarea>

Answer 2

If you want to do things like facebook I found a logic here : https://www.quora.com/How-does-Facebook-know-if-a-chat-message-is-seen

• Case 1: The Facebook tab is in focus but the chat-reply text field is not.

It sends out a "seen" notification (ajaxRequest) when you click on the field to type, using the focus event listener associated with the text-field.

• Case 2: The Facebook tab is not in focus

• In case you already had the text box in focus, but were on a different tab, the notification(AjaxRequest) is sent when you switch to the facebook tab. The JavaScript Window Focus and Window Blur events can be used to detect if the tab is in focus. These and the onfocus event for the textbox can be used to send out the notification(AjaxRequest).

So you can create a javascript script that can implement this logic!

I hope it helped you!