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

要检测用户是否点击了文本区域，试试这个：

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

  ..., 方法 ： { 发送 : () => {...}, getTime: () => {...}, hasSeen: () => { axios.put('your-api-or-backend-domains/setHasSeenMessage') .then( response => { //好的 }) .catch(response => { console.log(response)}) } }
  • 然后，在您的文本区域中添加 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脚本！

希望对你有帮助！