Cómo crear una aplicación de lector RSS en JavaScript
RSS (Really Simple Syndication) es un formato estandarizado utilizado por los editores en línea para sindicar su contenido a otros sitios web y servicios. Un Documento RSS, también conocido como alimentar, es un Documento XML Llevando el contenido que un editor desea distribuir..
Los canales RSS están disponibles en casi todos los sitios web de noticias y blogs para que sus lectores puedan Manténgase actualizado con sus contenidos.. También se pueden encontrar en sitios web no basados en texto como YouTube, donde puede utilizar la fuente de un canal de YouTube para ser Informados de los últimos videos..
Los programas que acceden a estas fuentes y leen y muestran su contenido se llaman Lectores RSS. Puede crear un programa de lector de RSS simple en JavaScript. En este tutorial, veremos cómo.
Estructura de un feed RSS
Un feed RSS tiene un elemento raíz llamado , Similar a Etiqueta encontrada en documentos HTML. Dentro de etiqueta, hay un elemento, algo así como en HTML, que incluye muchos subelementos Contiene el contenido distribuido del sitio web..
Un feed suele llevar algo de información básica como el título, la URL y la descripción del sitio web y de la Publicaciones individuales actualizadas, artículos u otros contenidos. de ese sitio web. Estas informaciones se encuentran en </code>, <code><link></code>, y <code><description></code> elementos, respectivamente.</p> <p>Cuando estas etiquetas son <strong>directamente presente en el interior <code><channel></code></strong>, tienen el título, la URL y la descripción del sitio web. Cuando estan <strong>presente en el interior <code><item></code></strong> ese <strong>Contiene la información sobre las publicaciones actualizadas.</strong>, representan la misma información que antes pero la de los contenidos individuales que cada uno <code><item></code> representar.</p> <p>También hay algunos <strong>elementos opcionales</strong> que puede estar presente en una fuente RSS, proporcionando información complementaria como imágenes o derechos de autor sobre el contenido distribuido. Puedes aprender sobre ellos en este <strong>Especificación RSS 2.0</strong> en cyber.harvard.edu.</p> <p>Aquí hay una muestra de cómo <strong>RSS de un sitio web</strong> podría verse como</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Consejos de diseño, tutoriales e inspiracionesen-usVisualice cualquier hoja de estilo CSS con estadísticas CSS¿Alguna vez te has preguntado cuántas reglas CSS hay en una hoja de estilo? ¿O alguna vez has querido ver ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - El último dispositivo inteligente con tecnología de AlexaAmazon no es ajeno al concepto de sistemas domésticos inteligentes con un asistente digital integrado. Después de todo, el ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
Recogiendo el feed
Necesitamos que trae el feed con nuestra aplicación de lector RSS. En un sitio web, la URL de una fuente RSS puede ser encontrado dentro del etiqueta usando el aplicación / rss + xml tipo. Por ejemplo, encontrará el siguiente enlace de fuente RSS en Hongkiat.com.
Primero, veamos como obtener la URL del feed de un sitio web usando JavaScript.
fetch (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 ('Error al obtener el sitio web'))
los ha podido recuperar() El método es un método global que asíncronamente obtiene un recurso. Toma la URL del recurso como un argumento (la URL del sitio web en nuestro código). Eso devuelve un Promesa objeto, por lo que cuando el método obtiene con éxito el sitio web (es decir, el Promesa se cumple), la primera función dentro de la entonces() declaración maneja la respuesta obtenida (res en el código anterior).
La respuesta obtenida es entonces. leer completamente en una cadena de texto utilizando la texto() método. Este texto representa la Texto HTML de nuestro sitio web obtenido. Me gusta ha podido recuperar(), texto() además devuelve un Promesa objeto. Entonces, cuando crea con éxito un texto de respuesta de la secuencia de respuesta, entonces() manejará ese texto de respuesta (htmlText en el código anterior).
Una vez que el texto HTML del sitio web está disponible, usamos API de DOMParser a analizarlo en un documento DOM. DOMParser analiza una cadena de texto XML / HTML en un documento DOM. Su metodo, parseFromString (), toma dos argumentos: la texto a ser analizado y el tipo de contenido.
Luego, desde el documento DOM creado, encuentra el href valor de lo relevante etiqueta utilizando la querySelector () Método para obtener la URL del feed..
Análisis y visualización de la alimentación
Una vez que obtuvimos la URL del feed del sitio web, necesitamos buscar y leer el documento RSS encontrado en esa URL.
fetch (feedUrl) .then ((res) => res.text (). then ((xmlTxt) => var domParser = new 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 misma manera en que buscamos y analizamos el sitio web, ahora obtener y analizar el feed XML en un documento DOM. Para lograr esto, utilizamos el 'texto / xml' tipo de contenido en el parseFromString () método.
En el documento analizado, nos seleccione todos los elementos utilizando la querySelectorAll método y recorrer cada uno.
