On my old project, I always run a script every three (3) seconds. It submits the last ID of the latest message, and the script checks if there is an ID higher than the latest message ID of the current conversation, if so it will load those messages.
<div id="49" class="mes">User 1: What's up?</div>
<div id="50" class="mes">User 2: Okay. How about you?</div>
<div id="51" class="mes">User 1: Pretty fine.</div>
My script will run every three (3) seconds, and submit the latest ID using Ajax (with the example above which is 51). It will check if there is an ID higher than 51 and then append() it to #message-div.
Just make sure when you append a new message, it includes the ID of that message.
var new-message = '<div id="52" class="mes">User 2: That is good to hear.</div>'; /* THIS COMES FROM AN AJAX REQUEST */
I did not use a status column or whatsoever. What I did for the read feature is to have an extra table for storing the date and time when a user read a message.
read_id | message_id | user_id | read_date
1 | 51 | 2 | 2016-06-03 14:29:30 /* USER 2 READ MESSAGE 51 IN JUNE 3, 2016 AT 2:26 PM */
2 | 52 | 1 | 2016-06-03 14:30:10
i have to maintain last id, and to keep check that if that incremented in table or not, if incremented then i'll show that, right ?
@Adas - yes, that is right. It will check your table in your database if there is a higher message_id, if so, it will load that/those message/s.
well i do not want read_date like column because i already using timestamp and will check time from that. But let me change my code and implement your solution, i'll definitely chose your answer.
@adas - you can have the data type of the read_date column to DATETIME or TIMESTAMP.