CODEWITHSUNDEEP
javascriptjqueryhtmlcssrss
F16Falcon
F16Falcon

Reputation: 405

Quick updating RSS reader with HTML?

Little bit of background: I know almost nothing about programming, and only began learning about HTML, Javascript, and CSS a couple days ago. I know basic HTML elements, some CSS stuff like colors, and the purpose of Javascript and its libraries (like jQuery). But don't really know how to program anything yet.

What I am trying to do is create a simple HTML webpage that only displays an RSS feed - one that auto-updates the feed every 5-10 seconds.

I found some websites that convert the RSS link (which of course contain XML code) into simple Javascript code (like Feedbucket), which can be pasted into a super-basic HTML page. It works, however, I noticed that even when I refresh the HTML webpage, new items in the feed don't load until about 10-20 minutes after they are published.

I think this is because the websites that convert store the RSS Data in their servers, and my HTML page receives it from them. But they only update their server file every 10-20 minutes, so therefore my feed is only updated every 10-20 minutes. I would like for it to load almost immediately (like 5-10 seconds).

So, I had the idea that I could (in theory) simply open the XML file link for that RSS, and refresh that every 10 seconds. To make the computer do this, I found some simple code that displays the XML document from the original RSS-provider. I also added meta refresh to refresh the page every 10 seconds. My code is shown in the picture below.

I speak four languages, but XML is not one of them. Now that's a problem, as my HTML website only displays the XML. So, I wanted to ask you guys how I could "convert" the XML data displayed into an easy-to-read HTML format (where it displays the title, short description, and published time). I think this is called parsing? But my mind hasn't evolved enough to understand all of the complex tutorials I found online, so I would appreciate it someone could explain how to make this using basic HTML, CSS, and Javascript (and jQuery without plugins if absolutely necessary). It can be a super simple thing, I don't require anything fancy looking. Please let me know if you would like for me to elaborate on anything. Thanks!

EDIT: I tried adding this code (I replaced the URL_OF_XML_DOC), but I'm getting a blank screen. Did I incorporate the Javascript code correctly? enter image description here

Upvotes: 0

Views: 1094

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

RSS is deemed to be a dying technology, and unfortunately there isn't anything you can do from your end to speed up another website's RSS feeds. However, the other website may be able to make use of WebSub to speed up their own RSS feeds, by integrating with a feed provider such as Superfeedr.

If the XML file is more up to date than the RSS feed itself, then you could hook directly into that and output its contents into an HTML document. This is easiest done by loading the XML file with JavaScript using XMLHttpRequest and then updating the HTML document with its contents:

function loadXMLDoc(xml_url) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // Update the HTML with the XML content
      document.getElementByTagName("body")[0].innerHTML = xml.responseXML;
    }
  };
  xmlhttp.open("GET", xml_url, true);
  xmlhttp.send();
}

loadXMLDoc('URL_OF_XML_DOC');

Upvotes: -1

Related Questions