Laravel echo 收听已读消息

Question

如果用户看到消息，我如何收听？

我有代码：

 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; }); }

我更新了：

 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(); } },

如何将“未读”类发送到元素 div 其他用户？ 我可以在当前用户上粘贴类，并且我只为我获取元素聊天的颜色，但是当看到消息时，我如何为我和其他用户隐藏元素？

---

如果输入消息，我可以观看。 但是，如果用户看到消息，我如何收听？ 我需要采取行动，如果消息发送看到的消息或如何？

Answer 1

要检测用户是否单击了 textarea，请尝试以下操作：

• 首先，在你的 Vuejs 实例中创建一个 hasSeen 方法。

  \n  ...,\n 方法 ： {\n   发送 : () => {...},\n    getTime: () => {...},\n   已经看到：() => { \n             axios.put('your-api-or-backend-domains/setHasSeenMessage')\n                  .then( response => { //好的 })\n                  .catch(response => { console.log(response)})\n            }\n   }    \n

  • 然后，在您的 textarea 中添加 onclickEvent：

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

Answer 2

如果你想做facebook 之类的事情，我在这里找到了一个逻辑： https : //www.quora.com/How-does-Facebook-know-if-a-chat-message-is-seen

• 案例 1：Facebook 选项卡是焦点，但聊天回复文本字段不是。

当您单击要键入的字段时，它会使用与文本字段关联的焦点事件侦听器发送“已看到”通知 (ajaxRequest)。

• 案例 2：Facebook 选项卡未聚焦

• 如果您已经将文本框置于焦点上，但位于不同的选项卡上，则当您切换到 facebook 选项卡时会发送通知（AjaxRequest）。 JavaScript Window Focus 和 Window Blur 事件可用于检测选项卡是否处于焦点。 这些和文本框的 onfocus 事件可用于发送通知（AjaxRequest）。

所以你可以创建一个可以实现这个逻辑的javascript脚本！

我希望它对你有帮助！