Hemsida » Kodning » Så här skapar du en RSS Reader-app i JavaScript

    Så här skapar du en RSS Reader-app i JavaScript

    RSS (Really Simple Syndication) är ett standardiserat format som används av utgivare online till syndikera deras innehåll till andra webbplatser och tjänster. En RSS-dokument, även känd som a utfodra, är en XML-dokument bär innehållet som en utgivare vill distribuera.

    RSS-flöden är tillgängliga på nästan alla online-nyheter webbplatser och bloggar för sina läsare att håll dig uppdaterad med innehållet. De kan också hittas på webbplatser utan text till exempel YouTube, där du kan använda flödet av en YouTube-kanal för att vara informerad om de senaste videon.

    Program som åtkomst till dessa flöden, och läsa och visa innehållet heter RSS läsare. Du kan skapa ett enkelt RSS-läsareprogram i JavaScript. I den här handledningen ser vi hur.

    Struktur av ett RSS-flöde

    Ett RSS-flöde har ett rotelement kallad , liknar tagg som finns i HTML-dokument. Inuti tagg, det finns en element, typ av liknande i HTML, det innehåller många delelement innehåller innehållet på webbplatsen.

    En matning bär vanligtvis några grundläggande information såsom titel, URL, och beskrivning av webbplatsen och av individuella uppdaterade inlägg, artiklar eller annat innehåll av den webbplatsen. Dessa uppgifter finns i </code>, <code><link></code>, och <code><description></code> element, respektive.</p> <p>När dessa taggar är <strong>direkt närvarande inuti <code><channel></code></strong>, De har titeln, webbadressen och beskrivningen av webbplatsen. När de är <strong>presentera inuti <code><item></code></strong> den där <strong>håller informationen om de uppdaterade inläggen</strong>, De representerar samma information som tidigare men den för det enskilda innehållet som varje <code><item></code> representera.</p> <p>Det finns också några <strong>valfria element</strong> som kan vara närvarande i ett RSS-flöde, som tillhandahåller kompletterande information som bilder eller upphovsrätt på det distribuerade innehållet. Du kan lära dig om dem i det här <strong>RSS 2.0 specifikation</strong> på cyber.harvard.edu.</p> <p>Här är ett exempel på hur <strong>RSS-flöde av en webbplats</strong> kan se ut som:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Designtips, handledning och inspiration en-us Visualisera alla CSS-stilark med CSS-statistik Har du någonsin undrat hur många CSS-regler som finns i ett stilark? Eller har du någonsin velat se ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Den senaste Alexa-powered Smart Device Amazon är inte främmande för begreppet smarta hemsystem med en inbäddad digital assistent. När allt kommer omkring ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    Hämtar matningen

    Vi måste hämta matningen med vår RSS-läsare applikation. På en webbplats kan webbadressen till ett RSS-flöde vara hittade inuti tagg med hjälp av application / rss + xml typ. Till exempel hittar du följande RSS-matlänk på Hongkiat.com.

    Låt oss först se hur få webbadressen till en webbplats använder JavaScript.

     hämta (websiteUrl) .then ((res) => res.text (). då ((htmlTxt) => var domParser = ny DOMParser () låt doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('länk [typ = "application / rss + xml"] ". Href)). fångst (() => console.error (" Fel vid hämtning av webbplatsen "))

    De hämta() Metod är en global metod som asynkront hämtar en resurs. Det tar URL-adressen till resursen som ett argument (webbadressen till webbplatsen i vår kod). Det returnerar a Löfte objekt, så när metoden framgångsrikt hämtar webbplatsen (dvs Löfte är uppfylld), den första funktionen inne i sedan() påstående hanterar det hämtade svaret (res i ovanstående kod).

    Det hämtade svaret är då läs fullständigt i en textsträng använda text() metod. Denna text representerar HTML-text på vår hämtade webbplats. Tycka om hämta(), text() också returnerar a Löfte objekt. Så, när det lyckas skapa en svartext från svarströmmen, sedan() kommer att hantera den här svartexten (htmltext i ovanstående kod).

    När HTML-text på webbplatsen är tillgänglig använder vi DOMParser API till analysera det i ett DOM-dokument. DOMParser analyserar en XML / HTML-textsträng i ett DOM-dokument. Dess metod, parseFromString (), tar två argument: text som ska analyseras och den innehållstyp.

    Sedan, från det skapade DOM-dokumentet, vi hitta href värde av relevanta märka använda querySelector () metod för att få URL-adressen till flödet.

    Parsing och visning av flödet

    När vi fått webbadressens webbadress måste vi hämta och läs RSS-dokumentet hittades på den webbadressen.

     hämta (feedUrl) .then ((res) => res.text (). sedan ((xmlTxt) => var domParser = ny DOMParser () låt doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item') .Envänd ((item) => låt h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title') .textContent document.querySelector ('output'). appendChild (h1))))

    På samma sätt som vi hämtade och analyserade webbplatsen, nu vi få och analysera XML-flödet i ett DOM-dokument. För att uppnå detta använder vi 'Text / xml' innehållstyp i parseFromString () metod.

    I det analyserade dokumentet, vi välj alla element använda querySelectorAll metod och loop genom varje.

    Inom varje element kan vi access taggar tycka om </code>, <code><description></code>, och <code><link></code>, som bär foderinnehållet. Och vår enkla RSS-läsare ansökan är klar, du kan ställa in innehållet i de hämtade flödena som du önskar.</p> <h4>Github demo</h4> <p>Du kan kolla in <strong>mer detaljerad version</strong> av koden som används i detta inlägg i vårt Github repo. Den mer detaljerade versionen <strong>hämtar tre flöden</strong> (Mozilla Hacks, Hongkiat och Webkit bloggen) <strong>använder en JSON-fil</strong> och lägger också till några CSS-stilar till RSS-läsaren.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">Hur man skapar en hemligt förtäckt mapp utan extra programvara</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">Så här skapar du en säker och låst mapp i Windows XP</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">Så här skapar du en Responsive Navigation</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Nästa artikel</div> <div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html"> <img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">Så här skapar du en genvägssökning på skrivbordet i Windows 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Föregående artikel</div> <div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html"> <img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">Hur man skapar en rutin med Amazon Alexa</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Användbar information och tips om webbutveckling. Programmering, webbdesign, CSS, HTML, JAVASCRIPT. Konfigurera och installera om WINDOWS. Skapa webbplatser och applikationer från början. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>