AJAX 附加而不是使用 .HTML 进行聊天

Question

So basically, my chat right now works like this:

• Every 2nd second it checks for my PHP file, loadchat.php.
• Loadchat.php will get every row that is newer than their session.
• It then replaces all current data in my div: #chatbox by using .html() function.

Now here is the deal. This seems very resource heavy, to load all the rows again and again and again. I know there is a way to optimize this, by using .append() function.

All though, I can't seem to wrap my head around it.

I need to make some kind of a counter, or a timestamp when the last message was loaded to check if there is newer content (rows) than since last time it loaded, if there is, append that new content.

If I replace the .html function with .append, I will just keep getting the same messages over and over again, as right now.

How would I go about making this?

Thanks in advance.

//AJAX Timeout Loop Load Chat Function:
function loadChat() {
  $.ajax({
    method: 'POST',
    url: 'ajax/load_chat.php',
    success: function(data) {
      $('#chatbox').html(data);
      //console.log($('#chatbox')[0].scrollHeight - $('#chatbox').innerHeight());
      //console.log($('#chatbox').scrollTop());
      if(atBottom) {
        $("#chatbox").stop().animate({ scrollTop: $('#chatbox')[0].scrollHeight}, 500);
      }
    },    
  });
}

EXAMPLE OF WHAT LOADCHAT WILL SEND BACK:

<script type="text/javascript">var imAdmin = true</script>
<div data-chat-sid="76561198216640736" data-chat-msid="76561198216640736" data-chat-sun="deinhoin" class="chat-box__content--single chat-box--mychat">
  <div class="chat-box__content__single--avatar">
     <div class="admin" style="background-image:url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/83/83b9e88c1f88451dcc97d2537416bbd413247ad6_full.jpg);"><span>Mod</span></div>
  </div>
  <div class="chat-box__content__single--title">deinhoin</div>
  <div class="chat-box__content__single--message">adada</div>
</div>

It should only send the var imAdmin variable once. (works with .html()).

Answer 1

Try using .slice()

 // `section` : container for chat message elements var html = $("section div"); // `data` : `html` returned from server var data = "<div>1</div><div>2</div><div>3</div>"; // if `data` `.length` greater than existing `section` `div` `.length`, if ($(data).length > $(html).length) { // `.slice()` elements greater than existing `section div` length var newdata = $(data).slice($(html).length); // append new elements to `section div` $("section").append(newdata); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section> <div>1</div><div>2</div> </section>

Answer 2

Try making use of the 'data' attribute. You could have something like 'data-timestamp' on each chat item and use that to work out what was placed when.