Kuidas luua RSS-lugeja rakendus JavaScriptis

RSS (Really Simple Syndication) on standardiseeritud formaat, mida online-kirjastajad kasutavad nende sisu teistele veebisaitidele ja teenustele. An RSS-dokument, tuntud ka kui a sööda, on XML-dokument sisu, mida avaldaja soovib levitada.

RSS-kanalid on saadaval peaaegu kõigis veebisaitide uudistesaitides ja -logides, mida nende lugejad saavad jääda ajakohaseks oma sisuga. Neid võib leida ka mitte-tekstipõhised veebisaidid näiteks YouTube, kus saate kasutada YouTube'i kanali voogu viimaste videote kohta.

Neid vooge kasutavad programmid ning nende sisu lugemine ja kuvamine on kutsutud RSS-lugejad. JavaScriptis saate luua lihtsa RSS-lugeja programmi. Selles juhendis näeme, kuidas seda teha.

RSS-voo struktuur

RSS-voog on juurelement kutsus , sarnane HTML-dokumentides leiduv silt. Sisse silt on olemas element, sarnane HTML-is sisaldab mitmeid alamelemente veebisaidi jaotatud sisu.

Sööt kannab tavaliselt mõningaid põhiandmed näiteks veebisaidi ja veebisaidi pealkiri, URL ja kirjeldus üksikud värskendatud postitused, artiklid või muu sisu veebisaidi kohta. Need andmed on leitud </code>, <code><link></code>, ja <code><description></code> elemente. Kui need sildid on otse sees <code><channel></code>, neil on veebisaidi pealkiri, URL ja kirjeldus. Kui nad on sees <code><item></code> seda hoiab ajakohastatud postituste kohta teavet, need kujutavad endast sama teavet kui varem, kuid iga üksiku sisu kohta <code><item></code> esindama. On ka mõningaid valikulised elemendid mis võivad esineda RSS-voos, pakkudes jagatud sisule täiendavat teavet, näiteks pilte või autoriõigusi. Neid saate sellest teada saada RSS 2.0 spetsifikatsioon aadressil cyber.harvard.edu. Siin on näide selle kohta, kuidas Veebisaidi RSS-voog võib tunduda: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Disaini näpunäited, õpetused ja inspiratsioonid et-me Visualiseeri CSS-stiilid CSS-statistikaga Kas olete kunagi mõelnud, kui palju CSS-reegleid on stiilitabelis? Või olete kunagi tahtnud näha… 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - uusim Alexa-toega nutikas seade Amazon ei ole võõras mõiste „arukad kodussüsteemid” sisseehitatud digitaalse assistentiga. Lõppude lõpuks… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Sööda hankimine`

 Me peame tõmba sööt meie RSS-lugeja rakendusega. Veebisaidil võib olla RSS-voo URL leitud  sildi abil rakendus / rss + xml tüüp. Näiteks leiate Hongkiat.com-i järgmise RSS-kanali lingi.
   
 Esiteks, vaatame, kuidas saada veebisaidi URL-i JavaScript.
  fetch (websiteUrl) .then ((res) => res.text (). siis ((htmlTxt) => var domParser = uus DOMParser () lase doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)) saak (() => console.error ('Viga veebisaidi hankimisel')) 
 The tõmbama () meetod on globaalne meetod asünkrooniliselt tõmbab ressursi. See võtab ressursi URL-i argumendina (veebisaidi URL meie koodis). See tagastab a Lubadus kui meetod tõmbab veebisaidi edukalt (st Lubadus on täidetud), esimene funktsioon sees siis () avaldus tegeleb tõmmatud vastusega (res ülaltoodud koodis).
  Tõmmatud vastus on siis lugeda täielikult tekstistringiks kasutades tekst () meetod. See tekst esindab Meie meie veebisaidi HTML-tekst. Nagu tõmbama (), tekst () ka tagastab a Lubadus objekti. Niisiis, kui see edukalt loob vastusteksti vastuse voost, siis () tegeleb selle vastuse tekstiga (htmlText ülaltoodud koodis).
 Kui veebisaidi HTML-tekst on saadaval, kasutame seda DOMParseri API kuni selle DOM-dokumendiks. DOMParser analüüsib XML / HTML tekstistringi DOM-dokumendiks. Selle meetod, parseFromString (), võtab kaks argumenti: analüüsitav tekst ja sisu tüüp.
 Seejärel luuakse loodud DOM-dokumendist leida href väärtus  silt kasutades querySelector () sööda URL-i saamiseks.
 Söötme analüüsimine ja kuvamine
 Kui oleme saanud veebisaidi feed-URL, peame seda tegema laadige ja loe RSS-dokument selle URL-i kohta.
  fetch (feedUrl) .then ((res) => res.text (). siis ((xmlTxt) => var domParser = uus DOMParser () lase doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item') .EE ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1)))) 
 Samamoodi nagu me veebilehe hankimisel ja parsimisel, nüüd oleme saada ja analüüsida XML-voog DOM-dokumendis. Selle saavutamiseks kasutame 'text / xml' sisu tüüp parseFromString () meetod.
 Parsitud dokumendis me valige kõik  elemente kasutades querySelectorAll meetod ja silmus läbi.
 Iga elemendi sees võime sildid meeldib </code>, <code><description></code>, ja <code><link></code>, mis sisaldavad sööda sisu. Ja meie lihtne RSS-lugejarakendus on tehtud, saate stiilida tõmmatud kanalite sisu vastavalt soovile.</p> <h4>Githubi demo</h4> <p>Võite vaadata <strong>üksikasjalikum versioon</strong> meie Github repos selles postituses kasutatud koodi kohta. Üksikasjalikum versioon <strong>tõmbab kolm kanalit</strong> (Mozilla Hacks, Hongkiat ja Webkiti blogi) <strong>kasutades JSON-faili</strong> ja lisab RSS-lugejale ka mõned CSS-stiilid.</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">Kuidas luua salajasi varjatud kaust ilma täiendava tarkvarata</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">Windows XP-s turvalise ja lukustatud kausta loomine</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">Kuidas luua reageeriv navigeerimine</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">Järgmine artikkel</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">Kuidas luua otsetee Windowsi töölaual 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Eelmine artikkel</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">Kuidas luua rutiinne Amazon Alexaga</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">
			Kasulik teave ja veebiarenduse näpunäited. Programmeerimine, veebidisain, CSS, HTML, JAVASCRIPT. Seadistage ja installige Windows WINDOWS uuesti. Saidide ja rakenduste loomine nullist.
		</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>