如何构建一个即时更新的评论系统?

我有一个即时更新的评论系统(这意味着,当任何人评论它都会实时更新,而不是重新加载页面)。它使用setInterval执行Ajax并将其发送到服务器并重新加载注释,所以,评论一直在闪烁。也就是说,我需要一种只在它看到一个phpMyadmin SQL行已经被添加时更新注释的方法。

我的网站: http://learntc.net/index.php

感谢任何的帮助!如果你需要更多的信息,只需评论即可。

You can have the AJAX request send the id of the last comment the user sees (you can keep it in a hidden input or as an id of a div, etc.). Using this you can return only new comments to the user. In the response function you can append any new comments to the list of the ones you already have. This will prevent the blinking of all comments and will definitely be healthy for your bandwidth ;)

I did a system like that. Code itself is large enough, but main idea (the simplest one) is to collect ids of comments available on page(or maybe it's enough to use latest comment time) and load comments not available on a page for now. (pass a marker in AJAX call and use it in your query to get only items you really need) If your comments are always added - you can simply load a piece of HTML and add it to the end of comments list. If comment may be removed and you should show that - it is better to use JSON.

About your current implementation - why do you need so frequent update? I see it happens each second or so. You just load your server. Also - you do not need to to return html, body etc. That is just a garbage in your case. Also - there is a jquery script which is included into response body. Why??? You already have it there.

Take a look at other AJAX functions of jquery. .load is not the only one.

  1. Return either the last comment id or its timestamp (if table has the time recorded).
  2. For the next Ajax request, send the above as paramater and query only those records which are greater than the existing value.
  3. Append the results.

When you load the comments, each record will have an ID. You will know the highest record ID that is loaded on the page.

When your JS timer makes the ajax call, have it send that highest loaded ID back to server. Your query can then specify only to load records where the ID is higher than the supplied value. You will then only get records that are newer than the ones on the page.

Then, when this data is sent back to your page, rather than replacing the whole comment block, simply append the new data onto the end of the existing comment block.

This will prevent the existing comments from having to be reloaded. It will prevent the flickering, and will also make your SQL queries more efficient, and save you bandwidth from sending the same data over and over again.

Hope that's enough of an explanation to get you started.

Finally, one other thing. Off topic, but I should mention it: I would recommend avoiding the Javascript setInterval() function. Use setTimer() instead, and re-trigger it on each iteration.

The reason for this is that setInterval() can get itself into problems if any JS code causes a delay. For example, if you have an alert() that the user leaves on screen for a length of time, the setInterval() calls that would have happened while the alert() was blocking the system will all get stacked up and will all be fired in quick succession one after the other as soon as JS gets control back. This can be a serious problem. If you use setTimer() instead, you will avoid this issue.

For a better explaination, read here: http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts