Πώς να δημιουργήσετε μια εφαρμογή ανάγνωσης RSS στο JavaScript

RSS (Really Simple Syndication) είναι μια τυποποιημένη μορφή που χρησιμοποιείται από τους εκδότες σε απευθείας σύνδεση συνδικάτο το περιεχόμενό τους σε άλλους ιστότοπους και υπηρεσίες. Ενα Έγγραφο RSS, επίσης γνωστή ως a ταίζω, είναι ένα Έγγραφο XML μεταφέροντας το περιεχόμενο που ένας εκδότης επιθυμεί να διανείμει.

Οι τροφοδοσίες RSS είναι διαθέσιμες σε σχεδόν όλες τις ιστοσελίδες ειδήσεων σε απευθείας σύνδεση και τα blogs για τους αναγνώστες τους παραμείνετε ενημερωμένοι με το περιεχόμενό τους. Μπορούν επίσης να βρεθούν στο ιστοσελίδες που δεν βασίζονται σε κείμενο όπως το YouTube, όπου μπορείτε να χρησιμοποιήσετε τη ροή του καναλιού YouTube ενημερωμένα για τα πιο πρόσφατα βίντεο.

Προβλέπονται προγράμματα που έχουν πρόσβαση σε αυτές τις τροφοδοσίες και διαβάζουν και εμφανίζουν το περιεχόμενό τους Αναγνώστες RSS. Μπορείτε να δημιουργήσετε ένα απλό πρόγραμμα ανάγνωσης RSS στο JavaScript. Σε αυτό το σεμινάριο, θα δούμε πώς να.

Δομή μιας ροής RSS

Μια ροή RSS έχει ένα ριζικό στοιχείο που ονομάζεται , παρόμοια με την tag που βρέθηκαν σε έγγραφα HTML. μεσα στην ετικέτα, υπάρχει ένα στοιχείο, είδος όπως σε HTML, ότι περιλαμβάνει πολλά επιμέρους στοιχεία που περιέχει το διανεμόμενο περιεχόμενο του ιστότοπου.

Μια τροφή συνήθως φέρει μερικές Βασικές πληροφορίες όπως ο τίτλος, η διεύθυνση URL και η περιγραφή της ιστοσελίδας και του μεμονωμένες ενημερωμένες δημοσιεύσεις, άρθρα ή άλλο περιεχόμενο του εν λόγω δικτυακού τόπου. Αυτές οι πληροφορίες βρίσκονται στο </code>, <code><link></code>, και <code><description></code> στοιχεία, αντίστοιχα. Όταν αυτές οι ετικέτες είναι άμεσα παρόντες μέσα <code><channel></code>, κρατούν τον τίτλο, τη διεύθυνση URL και την περιγραφή του ιστότοπου. Όταν είναι παρόν μέσα <code><item></code> ότι διατηρεί τις πληροφορίες σχετικά με τις ενημερωμένες θέσεις, Αντιπροσωπεύουν τις ίδιες πληροφορίες όπως πριν, αλλά εκείνες των μεμονωμένων περιεχομένων που περιέχονται σε κάθε μία από αυτές <code><item></code> εκπροσωπώ. Υπάρχουν επίσης κάποιες προαιρετικά στοιχεία που μπορεί να υπάρχουν σε μια ροή RSS, παρέχοντας συμπληρωματικές πληροφορίες όπως εικόνες ή πνευματικά δικαιώματα στο διανεμόμενο περιεχόμενο. Μπορείτε να μάθετε γι 'αυτά σε αυτό Προδιαγραφές RSS 2.0 στο cyber.harvard.edu. Εδώ είναι ένα δείγμα του πώς το Τροφοδοσία RSS ενός δικτυακού τόπου μπορεί να μοιάζει με: <pre name="code"> <rss version="2.0"> <channel> <title>Χονγκκιάτ https://www.hongkiat.com/ Συμβουλές Σχεδιασμού, Εκμάθηση και Εμπνεύσεις en-us Προβολή οποιουδήποτε φύλλου στυλ CSS με στατιστικά στοιχεία CSS Αναρωτηθήκατε πόσοι κανόνες CSS υπάρχουν σε ένα φύλλο στυλ; Ή μήπως ήθελες να δεις ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Η πιο πρόσφατη έξυπνη συσκευή με Alexa Το Amazon δεν είναι ξένο προς την έννοια των έξυπνων οικιακών συστημάτων με ενσωματωμένο ψηφιακό βοηθό. Μετά από όλα ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Λήψη της τροφοδοσίας`

 Εμείς πρέπει να φέρε την τροφή με την εφαρμογή ανάγνωσης RSS. Σε έναν ιστότοπο, μπορεί να είναι η διεύθυνση URL μιας ροής RSS βρέθηκαν μέσα στο  ετικέτα χρησιμοποιώντας το εφαρμογή / rss + xml τύπος. Για παράδειγμα, θα βρείτε τον παρακάτω σύνδεσμο ροής RSS στο Hongkiat.com.
   
 Πρώτον, ας δούμε πώς να πάρτε τη διεύθυνση URL ροής ενός ιστοτόπου χρησιμοποιώντας JavaScript.
  fetch (webUrl) .then ((res) => res.text ()) τότε ((htmlTxt) => var domParser = new DOMParser feedUrl = doc.querySelector ('σύνδεσμος [type = "application / rss + xml"]) href)) catch (() => console.error 
 ο φέρω() μέθοδος είναι μια παγκόσμια μέθοδος που παραλαμβάνει ασύγχρονα έναν πόρο. Λαμβάνει τη διεύθυνση URL του πόρου ως επιχείρημα (η διεύθυνση URL του ιστότοπου στον κώδικα μας). Το επιστρέφει a Υπόσχεση αντικείμενο, έτσι όταν η μέθοδος προσελκύει με επιτυχία τον ιστότοπο (δηλ. το Υπόσχεση πληρούται), η πρώτη λειτουργία μέσα στο έπειτα() δήλωση χειρίζεται την απάντηση που έχει παραληφθεί (res στο παραπάνω κώδικα).
  Η ληφθείσα απάντηση είναι τότε να διαβαστεί πλήρως σε μια συμβολοσειρά κειμένου χρησιμοποιώντας το κείμενο() μέθοδος. Αυτό το κείμενο αντιπροσωπεύει το Το κείμενο HTML του ιστότοπου που ανακτήσαμε. Σαν φέρω(), κείμενο() επίσης επιστρέφει a Υπόσχεση αντικείμενο. Έτσι, όταν δημιουργεί με επιτυχία ένα κείμενο απόκρισης από τη ροή απόκρισης, έπειτα() θα χειριστεί αυτό το κείμενο απόκρισης (htmlText στο παραπάνω κώδικα).
 Μόλις είναι διαθέσιμο το κείμενο HTML του ιστότοπου, χρησιμοποιούμε API DOMParser προς το αναλύστε το σε ένα έγγραφο DOM. DOMParser αναλύει μια συμβολοσειρά κειμένου XML / HTML σε ένα έγγραφο DOM. Η μέθοδος του, parseFromString (), παίρνει δύο επιχειρήματα: ο κείμενο προς ανάλυση και το Τύπος περιεχομένου.
 Στη συνέχεια, από το έγγραφο DOM που δημιουργήσαμε, εμείς βρες το href αξία των σχετικών  ετικέτα χρησιμοποιώντας το querySelector () για να λάβετε τη διεύθυνση URL της ροής δεδομένων.
 Ανάλυση και προβολή της ροής δεδομένων
 Μόλις λάβουμε τη διεύθυνση URL ροής του ιστοτόπου, πρέπει να το κάνουμε φέρετε και διαβάστε το έγγραφο RSS που βρέθηκαν σε αυτήν τη διεύθυνση URL.
  fetch (feedUrl) .then ((res) => res.text ()) τότε ((xmlTxt) => var domParser = νέο DOMParser .querySelectorAll ('στοιχείο') forEach ((item) => ας h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title') textContent document.querySelector. appendChild (h1)) 
 Με τον ίδιο τρόπο που τραβήξαμε και αναλύσαμε τον ιστότοπο, τώρα εμείς να λάβετε και να αναλύσετε τη ροή XML σε ένα έγγραφο DOM. Για να το επιτύχουμε, χρησιμοποιούμε το 'text / xml' τύπος περιεχομένου στο parseFromString () μέθοδος.
 Στο αναλυτικό έγγραφο, εμείς επιλέξτε όλα τα  στοιχεία χρησιμοποιώντας το querySelectorAll μέθοδος και βρόχο μέσα από κάθε ένα.
 Μέσα σε κάθε στοιχείο, μπορούμε ετικέτες πρόσβασης σαν </code>, <code><description></code>, και <code><link></code>, που φέρουν το περιεχόμενο της ροής. Και, η απλή εφαρμογή ανάγνωσης RSS γίνεται, μπορείτε να διαμορφώσετε το περιεχόμενο των τροφοδοτούμενων τροφοδοσιών όπως επιθυμείτε.</p> <h4>Github demo</h4> <p>Μπορείτε να δείτε το <strong>πιο λεπτομερή έκδοση</strong> του κώδικα που χρησιμοποιείται σε αυτή τη θέση στο Github repo. Η λεπτομερέστερη έκδοση <strong>τροφοδοτεί τρεις τροφοδοσίες</strong> (Mozilla Hacks, Hongkiat και το ιστολόγιο Webkit) <strong>χρησιμοποιώντας ένα αρχείο JSON</strong> και προσθέτει επίσης ορισμένα στυλ CSS στον αναγνώστη RSS.</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">Πώς να δημιουργήσετε έναν κρυμμένο φάκελο χωρίς επιπλέον λογισμικό</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</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">Πώς να δημιουργήσετε μια ευαίσθητη πλοήγηση</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">Επόμενο άρθρο</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">Πώς να δημιουργήσετε μια συντόμευση αναζήτησης στην επιφάνεια εργασίας στα Windows 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Προηγούμενο άρθρο</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">Πώς να δημιουργήσετε μια ρουτίνα με το 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">
			Χρήσιμες πληροφορίες και συμβουλές ανάπτυξης ιστού. Προγραμματισμός, σχεδιασμός ιστοσελίδων, CSS, HTML, JAVASCRIPT. Διαμορφώστε και επανεγκαταστήστε τα παράθυρα WINDOWS. Δημιουργία ιστοσελίδων και εφαρμογών από την αρχή.
		</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>