How to make the functionality of viewing messages in the chat?

Question

Laravel

Hello everyone, I have a Laravel application. There is a functionality of dialogs and a chat with the user, only sending messages and showing it to the interlocutor works in real time. I want to make the functionality of viewing messages, that is, the status is read or not read. For example, if a person is not online, we mark this with some style for the message, for example, with a background, as in VK. But in principle, I know how to do this using php, the question is different, how to make this functionality logically on the side of vuejs, javascript? For example, if a user is in a chat and he received a message from an interlocutor, then immediately read this message. If it is not on the page, then accordingly mark the message as unread, what logic should this functionality have? Can someone tell me how VK catches whether a person has viewed a message or not?

Answer 1

If a person, roughly speaking, sees a message, we send an ajax (socket) request to the server to read the message

Answer 2

I won’t tell you how it’s done in VK, but I would do something like this:
1. initially, new messages are unviewed / unread
2. we make messages read in the following cases:
- when opening a dialog
- if a dialog was opened and text was entered in the field for messages (catching onKeyDown, for example)
- if a dialog was opened and the mouse moved in the dialog area (catching mousemove)
, other options may be needed, but it also depends on the application itself