Real time RSS display on web page (best practices and source codes)

Question

Hello guys, i have a php script who parser a rss and give me the data in a know pattern. Im very new with ASP, JavaScript and Jquery so i dont have any idea of how to autoupdate the script and display the new data with a smooth animation (see this example, that exactly what i want). Thanks for the support and if you know a good script to made this i will appreciate it.

Answer 1

It looks like the script on that example page has an Ajax request running every TOT seconds.

You could simply have your PHP script return the RSS data (in JSON format say) and let JavaScript parse it and generate some HTML with it.

If all of this doesn't make sense to you I advice reading a little about JavaScript and PHP... there's plenty of good books.

Answer 2

Seems like you're looking for this:

http://leftlogic.com/lounge/articles/jquery_spy2/

It's PHP (not ASP), so that might be an issue, though the code is SUPER easy to implement (I've written by own implementation on three separate occasions).

The site itself has some decent documentation on getting things up and running, but if you need some extra help, comment and I'll point you in the right direction :)

Good luck!

Answer 3

The resources people have linked here are helpful and merely mentioning jQuery means you're probably headed in the right direction. But if you're new to this it might still be worth mentioning some of the concepts you'll be looking to play with here.

First of all, you'll probably want to stick with one language on the client side and one on the server side. This means choosing either PHP or ASP -- this isn't clear from your question but I'll assume you're dealing with PHP since that's the language I use for this kind of thing. JavaScript + jQuery is the right choice for the browser (client) side of things.

Like Luca points out, you'll have to set up some JavaScript code that goes live on page load and "polls" the server at a set interval. In JavaScript you do this using something called XMLHttpRequest (or "XHR") and it's pretty complicated. You could use combination of jQuery and a library like the one Matt points to in his answer, or just jQuery -- sample code abounds but it's basically a loop with a function call and sleep timer.

That function call is going to be one of the more difficult parts if you're trying to emulate the Twitter World Cup site. But here's the basic idea: You need to populate a list using jQuery and a data standard like JSON. Since the RSS feed you'll be parsing is written in XML, you'll have to write a server side (PHP/ASP) script that fetches, parses and converts the feed to JSON. In PHP, this is best done through cURL (file_get_contents() if you're lazy), SimpleXML and json_encode(), respectively.

Your JavaScript should load the list based on JSON. To do this, and display any new items, what you'll do is load the JSON from the client (browser) side using a jQuery method like getJSON(). Then you spin through the array object and add any new items to the list by adding new <li> elements to the "DOM." The same jQuery code that does this can easily also do the cross dissolve with something like fadeIn().