Question

I’m making simple php chat, and i need to refresh messages in one div.I tried with jquery load function but it’s making computer slow.

Is there simple ajax refresh, something like facebook have in their chat ?

Thanks.

Answer 1

In case of a chat the best solution might be not to replace the whole DIV but to simply append new messages to the end. A more durable approach is then to keep a stack of say 500 messages and do a First In First Out operation with javascript.

The client then simply polls the backend for new messages only, ignoring the rest. This should make your back-end AND front-end fast.

Update:

For example, the HTML might look like this:

<div id="chat">
  <ul id="messages">
    <li><span class="time">12:13</span> User A: Hello Everybody</li>
    <li><span class="time">12:16</span> User B: Hello A!</li>
  </ul>
</div>

Then you would use some kind of polling technique, for example Prototype.js has a periodical updater available out of the box – http://prototypejs.org/api/ajax/periodicalupdater – which would send a request to your backend alongside a client id and a timestamp.

The backend then in turn needs to lookup if anything has changed since the last time the selected client did a request and send any new data back to the client.

The client side could then use Prototype.js’ insert (eg. http://bobobobo.wordpress.com/2008/05/22/the-stupidly-brief/) to simply add new messages to the end of the stack.

Apparently you could also count the number of LI elements in the UL and in case it is greater than X remove the oldest ones.