Reputation: 11
Jquery ajax live feed
I've tried searching for a solution to this off and on for several months and haven't even come close to an answer - tbh I don't even know what keywords to use when searching and I hope someone here has the answer or atleast can point me in the direction I should be searching for.
Within my company I have set up an Intranet page which people are able to add issues to (much like a helpdesk ticket system). Updates can be added to these issues by users and and when they need to. Therefore I have two database tables (amongst others) - one has the issues and the other has the updates to those issues.
I have set-up a website which uses jquery's ajax request to poll the database for all the currently open issues the users' desk has and the latest update (if any) to that issue. These are listed in updated or issue opened order depending on the users preference.
Every 7 seconds this entire div is updated with a refresh of the entire list. Therefore if I highlight some text in an issue half way down the page in my browser everytime it gets refreshed I loose that highlight. This refresh also has a large load on my server - if everyone's browser keeps refreshing the contents of the entire database every 7 seconds it takes a lot on the database.
What I would like to do is have the browser only update the items that are different since the last refresh. I have set it up to update the users database on when they're view was last refreshed so every 7 seconds (if they are viewing the front page) this field gets a new unix timestamp. I've also got create times on the issues and the updates as well as an updated timestamp on issues (when a new update is created for that issue the update timestamp gets updated with the new unix time).
This is what as far as I can tell facebook's news feed does. Every now and then new posts gets added to the top, replies to old posts gets added under them, new likes and shares are updated etc etc. If I highlight some text on my facebook page that highlight doesn't get lost which means that facebook is only updating sections of the feed and not the whole feed itself. This is what I want to happen.
Do you know of any tutorials on how to do something like this at all? or how to search because when I search for a facebook type newsfeed system all I get is how to interface with facebook's API's! Thanks in advance.
Upvotes: 1
Views: 531
Answers (1)
Reputation: 12508
You might try looking into push technology:
Push Technology - Long Polling
Push technology, and long polling in particular can be useful in situations like this. This is the concept that phone apps use when transmitting new data or updates to their users or subscribers. In this case, a connection to the server is kept alive. The user's machine will occasionally poll the server for new information. The server only answers the response however, if there is new information to provide to the user. In this case, you could poll the server every 7 seconds but the server wouldn't respond or re-paint the div until there was new information.
As far as updating the div goes, you could try adding each of the new items in its own span using the jquery .clone and .append options.
For example:
HTML:
<span id="itemX"></span>
On Ajax Success:
var tile = $('#itemX').clone().attr('id','item1').text("Text returned from ajax call.");
$('#divName').append(tile);
In this way you can modify each new item from the ajax call as it comes back to you and append it below without affecting the items above it.
Good luck. Hope this helps.
Upvotes: 1