A live stream updating system like facebook

Question

i am really stuck on this one , i got the system to work , but it actually refreshes the whole update stream per second ,this is my ajax request ,

setInterval(function(){
          $.ajax({type:"GET",url:"read_new_post.php?account_id="+currentuser,success:function(response){

                            $(".new_update").html(response);        
            }
        });
        },1000);

and this is my php script,imean that the echo part gets returned as response

if($i==0)
            {
                echo "<div class='new_update'></div>";
            }
        echo "
          <div id='post' postid=".$posts[$i]["postid"].">
                    <div id='poster_img'>&nbsp;&nbsp;<img src='images/icons/Actions-list-add-user-icon.png' name='profile_img_for_post' width='40' id='profile_img_for_post' /><span id='poster_name'>".$poster_details[0]["firstname"]." ".$poster_details[0]["lastname"]."</span></div>
                    <div id='content'><br />
                    <span id='content_container'>".nl2br($posts[$i]["post_content"])."</span>
                    <br />
                    </div>
                    <div id='attributes'>
                        <span id='totallikes'><span id='like_dot' ></span>
<span id='text_tlikes'>10</span></span>
                      <span id='like'> </span>
                        <span id='share'><span id='share_txt'>SHARE</span><span id='share_circle_one'></span><span id='share_circle_two'></span></span>
                         <span id='comment' class='cmnt_cls'><img src='images/comment.png' width='32' height='32' /></span>
                         <span id='post_time'>".$posts[$i]["post_date"]."</span>
                         <br />
                         <br>
                         <br>
                            <br />
                            <br />
                      <div id='total_comments' class='total_comment_slider'>

                      </div>
                      <div id='comments'>
                            <img src='images/image.jpg' width='30' height='30' />
                        <span id='cmntbox'>
                        <textarea name='your_comment' placeholder='Say Something'></textarea>

                        <input type='submit' value='Comment' id='comment_submit' /></span>
                      </div>

            </div>
                </div>";

my question is that is there any way i can just add the returned ajax data from the php page to the div "center",so that my update stream won't get refreshed ?

Answer 1

You should use WebSockets to fetch data dynamically. Making ajax requests every 1000ms is rather inefficient. Here is a plugin which makes implementing WebSockets hassle free and it works with many environments php, nodejs, ruby etc:

http://socket.io/