Question

I was curious how facebook can show content live. For example, when one user comments, another person from somewhere else in the world can see that comment appear right after the user comments.

I know ajax/jquery can do an .append(data) without refreshing the page, but that won’t show on other users. Would it?

Answer 1

I’m not sure exactly how Facebook does it, but heres how it probably works.

1. User comments on item
2. Comment is posted to server
3. Server processes comment
4. Server finds who is subscribed to that item (post, image etc.) and pings them with a notification of a new comment
5. The other clients (ones who didn’t post the comment) request a page which returns the number of comments
6. They compare there comment count with FB’s comment count. If they aren’t the same, request new comments

See https://www.facebook.com/notes/facebook-engineering/inside-facebook-messages-application-server/10150162742108920

EDIT:

To go in deeply with what function you should use.
Firstly you have a list of comments.

<ul id="comments" style="list-style-type: none;">

</ul>

I set the list-style-type to none so the bullets would not show.

When the page loads, you use a jquery AJAX function, to perform a HTTP GET Request to the page serving comments. You then inject them into the DOM, using

$('#comments').html(loadedAJAXData);

Where loadedAJAXData is the data you got from a GET request.

So the injected data looked like this –

<li>Comment 1
<li>Comment 2
<li>Foo

and now the comments list looks like this –

<ul id="comments" style="list-style-type: none;">
<li>Comment 1
<li>Comment 2
<li>Foo
</ul>

So you have your comments now. Someone makes a new comment? It is sent to your website, which inserts a new comments row into the database.

Say you have another page, which you request the number of comments from. Lets call it comments.php?count.

// set interval
var tid = setInterval(getCommentsCount, 2000);
function getCommentsCount() {
//AJAX will request comment count from comments.php?count . 
//Comment count is stored  in the variable newCommentCount. Previous or cached comment //count is stored in oldCommentCount.
  if(oldCommentCount != newCommentCount){ //If we have a different number of comments
    for(int i = oldCommentCount;i<newCommentCount;i++){
       //For each new comment
       //Make a request to comments.php?get=commentOffset
       //Then inject it into the DOM using
       $('#comments').append(comment);
       oldCommentCount++;
       }
  }
  // no need to recall the function (it's an interval, it'll loop forever)
}

For example, in this script, the browser is requesting comment count every 2 seconds. Our oldCommmentCount was 0. Our newCommentCount is 2. For each new comment, we will make a request to comments.php?get=commentOffset. Where commentOffset is i. Requesting the new comment, we get its data, append it to the comments list, and then increment oldCommentCount.