Page d'accueil » Codage » Comment créer une application de lecteur RSS en JavaScript
Comment créer une application de lecteur RSS en JavaScript
RSS (syndication vraiment simple) est un format normalisé utilisé par les éditeurs en ligne pour syndiquer leur contenu vers d'autres sites et services. Un Document RSS, également connu sous le nom d'un alimentation, est un Document XML portant le contenu qu'un éditeur souhaite distribuer.
Les flux RSS sont disponibles sur presque tous les sites d’information en ligne et les blogs pour que leurs lecteurs rester à jour avec leur contenu. Ils peuvent également être trouvés sur sites Web non textuels tels que YouTube, où vous pouvez utiliser le fil d'une chaîne YouTube pour être informé des dernières vidéos.
Les programmes qui accèdent à ces flux, lisent et affichent leur contenu sont appelés Lecteurs RSS. Vous pouvez créer un programme de lecteur RSS simple en JavaScript. Dans ce tutoriel, nous verrons comment.
Structure d'un flux RSS
Un flux RSS a un élément racine appelé , semblable à la balise trouvée dans les documents HTML. À l'intérieur de tag, il y a un élément, un peu comme en HTML, que comprend de nombreux sous-éléments contenant le contenu distribué du site.
Un aliment en porte généralement Informations de base tels que le titre, l’URL et la description du site Web et de la Articles, articles ou autres contenus mis à jour individuellement de ce site. Ces informations se trouvent dans </code>, <code><link></code>, et <code><description></code> éléments, respectivement.</p> <p>Quand ces balises sont <strong>directement présent à l'intérieur <code><channel></code></strong>, ils contiennent le titre, l'URL et la description du site. Quand ils sont <strong>présent à l'intérieur <code><item></code></strong> cette <strong>détient les informations sur les messages mis à jour</strong>, ils représentent la même information qu'auparavant mais celle du contenu individuel que chaque <code><item></code> représenter.</p> <p>Il y en a aussi <strong>éléments optionnels</strong> qui peuvent être présents dans un flux RSS, fournissant des informations supplémentaires telles que des images ou des droits d'auteur sur le contenu distribué. Vous pouvez apprendre à leur sujet dans cette <strong>Spécification RSS 2.0</strong> à cyber.harvard.edu.</p> <p>Voici un exemple de la façon dont le <strong>Flux RSS d'un site web</strong> pourrait ressembler à:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Conseils de conception, tutoriels et inspirationsen-nousVisualisez n'importe quelle feuille de style CSS avec les statistiques CSSVous êtes-vous déjà demandé combien de règles CSS sont dans une feuille de style? Ou avez-vous déjà voulu voir… 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Le dernier appareil intelligent alimenté par AlexaAmazon n'est pas étranger au concept de systèmes de maison intelligente avec un assistant numérique intégré. Après tout, le… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
Aller chercher le fil
Nous devons le faire aller chercher le fil avec notre application de lecteur RSS. Sur un site Web, l’URL d’un flux RSS peut être trouvé à l'intérieur du tag en utilisant le application / rss + xml type. Par exemple, vous trouverez le lien de flux RSS suivant sur Hongkiat.com.
Tout d'abord, voyons comment récupère l'URL d'un site Web en utilisant JavaScript.
chercher (websiteUrl) .then ((res) => res.text (). then ((htmlTxt) => var domParser = new DOMParser () let doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [type = "application / rss + xml"] "). href). catch (() => console.error (" Erreur lors de l'extraction du site Web "))
le chercher () méthode est une méthode globale qui récupère une ressource de manière asynchrone. Il prend l'URL de la ressource en argument (l'URL du site dans notre code). Il renvoie un Promettre objet, donc lorsque la méthode récupère avec succès le site Web (c.-à-d. le Promettre est remplie), la première fonction à l'intérieur du puis() déclaration gère la réponse récupérée (res dans le code ci-dessus).
La réponse recherchée est alors lire complètement dans une chaîne de texte en utilisant le texte() méthode. Ce texte représente le Texte HTML de notre site Web récupéré. Comme chercher (), texte() également renvoie un Promettre objet. Donc, quand il crée avec succès un texte de réponse à partir du flux de réponses, puis() gérera ce texte de réponse (htmlText dans le code ci-dessus).
Une fois que le texte HTML du site est disponible, nous utilisons API DOMParser à analyser dans un document DOM. DOMParser analyse une chaîne de texte XML / HTML dans un document DOM. Sa méthode, parseFromString (), prend deux arguments: la texte à analyser et le type de contenu.
Ensuite, à partir du document DOM créé, nous trouvez le href valeur de la pertinente étiquette en utilisant le querySelector () méthode afin d'obtenir l'URL du flux.
Analyser et afficher le flux
Une fois que nous avons reçu l’URL du site Web, nous devons chercher et lire le document RSS trouvé à cette URL.
fetch (feedUrl) .then ((res) => res.text (). then ((xmlTxt) => var domParser = nouveau DOMParser () let doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item'). forEach ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1))))
De la même manière que nous avons récupéré et analysé le site, maintenant nous obtenir et analyser le flux XML dans un document DOM. Pour ce faire, nous utilisons le 'text / xml' type de contenu dans le parseFromString () méthode.
Dans le document analysé, nous sélectionner tous les éléments en utilisant le querySelectorAll méthode et boucle à travers chacun.
