Kā izveidot RSS lasītāja lietotni JavaScript

RSS (Really Simple Syndication) ir standartizēts formāts, ko izmanto tiešsaistes izdevēji sindicēt to saturu citām tīmekļa vietnēm un pakalpojumiem. An RSS dokuments, pazīstams arī kā a barību, ir XML dokuments saturu, ko izdevējs vēlas izplatīt.

RSS plūsmas ir pieejamas gandrīz visās tiešsaistes ziņu vietnēs un emuāros, lai lasītāji varētu to lasīt palikt atjaunināti ar to saturu. Tās var atrast arī ar tekstu nesaistītas tīmekļa vietnes piemēram, YouTube, kur var izmantot YouTube kanāla plūsmu informēti par jaunākajiem videoklipiem.

Tiek izsauktas programmas, kas piekļūst šīm plūsmām un lasa un parāda to saturu RSS lasītāji. JavaScript var izveidot vienkāršu RSS lasītāju programmu. Šajā apmācībā mēs redzēsim, kā to izdarīt.

RSS plūsmas struktūra

RSS plūsma ir saknes elements sauc , līdzīgs tags atrodams HTML dokumentos. Iekšpusē tag, ir elements, piemēram, HTML, tas ir ietver daudzus apakšelementus satur izplatīto tīmekļa vietnes saturu.

Barība parasti nes dažus Pamatinformācija piemēram, nosaukums, URL un tīmekļa vietnes un atsevišķas atjauninātas ziņas, raksti vai cits saturs tīmekļa vietnes. Šī informācija ir atrodama </code>, <code><link></code>, un <code><description></code> elementiem. Kad tās ir tieši klāt <code><channel></code>, viņiem ir tīmekļa vietnes nosaukums, URL un apraksts. Kad viņi ir klāt <code><item></code> to glabā informāciju par atjauninātajām ziņām, tie ir tādi paši dati kā iepriekš, bet katras atsevišķās informācijas saturs <code><item></code> pārstāvēt. Ir arī daži izvēles elementi kas var būt RSS plūsmā, sniedzot papildu informāciju, piemēram, attēlus vai autortiesības uz izplatīto saturu. Par tiem varat uzzināt šajā RSS 2.0 specifikācija pie cyber.harvard.edu. Šeit ir paraugs, kā Mājas lapas RSS plūsma varētu izskatīties šādi: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Dizaina padomi, apmācība un iedvesmas lv-mums Vizualizējiet jebkuru CSS stilu ar CSS statistiku Kādreiz bija jautājums, cik CSS noteikumi ir stilu lapā? Vai esat kādreiz gribējis redzēt… 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - jaunākais Alexa darbināmais Smart Device Amazon nav svešs priekšstats par viedām mājas sistēmām ar iebūvētu digitālo palīgu. Galu galā,… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Ievades plūsma`

 Mums vajag ielādējiet plūsmu izmantojot mūsu RSS lasītāja programmu. Tīmekļa vietnē var būt RSS plūsmas URL atrodas iekšpusē  tagu, izmantojot application / rss + xml veids. Piemēram, Hongkiat.com atradīsiet šādu RSS plūsmas saiti.
   
 Pirmkārt, pieņemsim, kā to izdarīt iegūt vietnes URL izmantojot JavaScript.
  fetch (websiteUrl) .then ((res) => res.text (). tad ((htmlTxt) => var domParser = jauns DOMParser () ļaujiet doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('saite [type = "application / rss + xml"]'). href)) nozvejas (() => console.error ("Kļūda, ielādējot vietni")) 
 The ielādēt () metode ir globāla metode asinhroni ielādē resursu. Tas aizņem resursa URL kā argumentu (vietnes URL mūsu kodā). Tā atgriež a Solījums objektu, tāpēc, kad metode veiksmīgi ielādē vietni (t.i. Solījums ir izpildīta), pirmā funkcija iekšpusē tad () paziņojums, apgalvojums apstrādā ielādēto atbildi (res iepriekš minētajā kodā).
  Tad ir saņemta atbilde pilnībā izlasīts teksta virknē izmantojot teksts () metodi. Šis teksts ir Mūsu ielādētās vietnes HTML teksts. Tāpat kā ielādēt (), teksts () arī atgriež a Solījums objektu. Tātad, kad tas veiksmīgi izveido atbildes tekstu no atbildes plūsmas, tad () apstrādās šo atbildes tekstu (htmlText iepriekš minētajā kodā).
 Kad būs pieejams HTML tīmekļa vietnes teksts, mēs izmantojam DOMParser API uz analizēt to DOM dokumentā. DOMParser analizē XML / HTML teksta virkni DOM dokumentā. Tās metode, parseFromString (), ņem divi argumenti: izdomāts teksts un satura veids.
 Tad no izveidotā DOM dokumenta mēs Atrodi href attiecīgās vērtības  tag izmantojot querySelector () metodi, lai iegūtu plūsmas URL.
 Plūsmas analīze un attēlošana
 Kad būsim saņēmuši vietnes vietnes URL, mums ir nepieciešams ielādējiet un lasiet RSS dokumentu atrasts šajā URL.
  fetch (feedUrl) .then ((res) => res.text (). tad ((xmlTxt) => var domParser = jauns DOMParser () ļaujiet 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)))) 
 Tāpat kā mēs ielādējām un analizējām tīmekļa vietni, tagad mēs iegūt un analizēt XML plūsmu DOM dokumentā. Lai to panāktu, mēs izmantojam 'text / xml' satura veids parseFromString () metodi.
 Parsētā dokumentā mēs atlasiet visu  elementiem izmantojot querySelectorAll metode un cilpa caur katru.
 Katrā elementā mēs varam piekļuves tagus patīk </code>, <code><description></code>, un <code><link></code>, kas satur barības saturu. Un mūsu vienkāršā RSS lasītāja lietojumprogramma tiek veikta, jūs varat veidot ielādēto plūsmu saturu pēc vēlēšanās.</p> <h4>Github demo</h4> <p>Jūs varat pārbaudīt <strong>detalizētāka versija</strong> no koda, kas izmantots šajā amatā mūsu Github repo. Detalizētāka versija <strong>ielādē trīs plūsmas</strong> (Mozilla Hacks, Hongkiat un Webkit emuārs) <strong>izmantojot JSON failu</strong> un arī pievieno dažus CSS stilus RSS lasītājam.</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">Kā izveidot slepeni slēptu mapi bez papildu programmatūras</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">Kā izveidot drošu un bloķētu mapi operētājsistēmā 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">Kā izveidot atsaucīgu navigāciju</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ākamais raksts</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">Kā izveidot meklēšanas saīsni darbvirsmā Windows 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Iepriekšējais raksts</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">Kā izveidot rutīnas ar 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">
			Noderīga informācija un tīmekļa attīstības padomi. Programmēšana, web dizains, CSS, HTML, JAVASCRIPT. Konfigurējiet un atkārtoti instalējiet Windows. Vietņu un lietojumprogrammu izveide no nulles.
		</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>