I'm making a website that lets users make post right from the front page. Also on the front page I have a live update of the questions posted. Every question in that live feed has its own little container that contains the title of the post and some other details. When the user clicks on a post a (Bootstrap) modal opens. There you can see the title of the post, post details and a live comment feed. Both the post feed on the front page and the comment feed of every post are updated every 15 seconds(the comment feed starts updating when it's modal is open and when any modal is open the post feed on the front page stops updating). All of the 'live' features are working through jQuery/Ajax. What I have noticed is that even on my local server this takes some noticeable time to load. My database is in MySQL and I have made several(around 15) test posts and added comments to some.
The code for the post feed is basically:
function updatePosts({
$("#postContainer").load('post_pull.php');
}
setInterval('updatePosts()', 15000);
And the php file just returns all posts within divs, with the details of posts with a modal and some scripts.
The comment feed of each post is quite similar except it pulls the comments that have the 'parent ID' of the opened modal.
So my question is : what is the most efficient way of doing the live updates, because if the loading time is noticeable now, on a local server and with a handfull of posts, it will be unuseable on a real server with people constantly posting.
When you require updatePosts() tell the server last ID of your posts currently displayed, so server can send only posts which your page doesnt have.
updatePosts(lastID);
function updatePosts(lastid) {
$.get( "post_pull.php?lastid=" + lastid, function() {
$("#postContainer").prepend(data); // or append
});
}
so server will return only new posts and you append them in top of your list.