CODEWITHSUNDEEP
phpjavascriptajax
Alexim
Alexim

Reputation: 81

Real time ajax comments

I plan to make this commenting system where comments can be posted and updated without refreshing the page ( you can see this on youtube)

Posting comments is understandable ( post to php page from javascript and run SQL query on server side to import it, than return the comment and fetch in html )

Updating is the part I don't understand. How can I refresh the page automatically on certain intervals and add comments? Isn't that going to be a mess when multiple users try to comment at the same time?

I was wondering if anyone can recommend a good way ( just like word of advice ) to achieve this and save me some time

Upvotes: 7

Views: 1647

Answers (4)

MrTan
MrTan

Reputation: 91

I once used a simple technique (no timer used, no total refresh) with a flaw that it shows only new comments, but not edit and delete by others done to existing displayed comments. Be mindful that refreshing the whole comments panel may be unfeasible if you allow "expand / collapse / view more" comments. My simple technique is to have (i) a hidden input element to store the index/primarykey of the last comment displayed (ii) several uniquely identified divs to hold existing displayed comments and ajax refresh or html dom manipulation only that div when actions are performed on it (iii) a div to hold a view more comments button whereby the button will only be displayed if there are more comments to view.

Therefore, whenever a new comment is posted, "the view more comments panel with a button" will be refreshed saying view [X + (# recent new comments by others) + (# your new comment)] comments. Upon clicking the button, it will display 3 more new comments along with "view Y more comments" button.

Upvotes: 0

Lex
Lex

Reputation: 478

Another really good way would be using a subscribe/publish service.

I'm using PubNub at the moment for Notifications, Comments ect..

Upvotes: 1

sigmus
sigmus

Reputation: 3237

You can use "Long Polling". Basically it is a technique in which you open an Ajax connection and the server doesn't close until it has some response to send. The client upon receiving this response requests a new connection and waits again for a response.

You can check a tutorial: Simple Long Polling Example with JavaScript and jQuery.

Upvotes: 1

ajacian81
ajacian81

Reputation: 7569

The most common way is to call setTimeout or setInterval in javascript to poll every 5-25 seconds. Basically, you store the idea of the last comment you received on the javascript side, then you call a function that sends this id to a remote server. If there are newer messages than this id, you send all of them back via XML or JSON (usually json is easier to deal with on the javascript side, especially if you use a framework like jQuery).

Upvotes: 2

Related Questions