Hjemmeside » Coding » Hvordan lage en RSS Reader App i JavaScript
Hvordan lage en RSS Reader App i JavaScript
RSS (Really Simple Syndication) er et standardisert format som brukes av nettbaserte utgivere til syndikere innholdet deres til andre nettsteder og tjenester. en RSS-dokument, også kjent som a mate, er en XML-dokument bærer innholdet som en utgiver ønsker å distribuere.
RSS-feeds er tilgjengelig på nesten alle nettbaserte nyhetsnettsteder og blogger for sine lesere til Hold deg oppdatert med innholdet. De kan også bli funnet på ikke-tekstbaserte nettsteder for eksempel YouTube, hvor du kan bruke feed av en YouTube-kanal til å være informert om de nyeste videoene.
Programmer som får tilgang til disse feeds, og leser og viser innholdet blir kalt RSS lesere. Du kan lage et enkelt RSS-leserprogram i JavaScript. I denne opplæringen ser vi hvordan.
Struktur av en RSS-feed
Et RSS-feed har et rotelement kalt , ligner på tag funnet i HTML-dokumenter. Inne i tag, det er en element, liksom i HTML, det inneholder mange delelementer inneholder det distribuerte innholdet på nettstedet.
En fôr bærer vanligvis noen grunnleggende informasjon for eksempel tittelen, nettadressen og beskrivelsen av nettstedet og av individuelle oppdaterte innlegg, artikler eller annet innhold av den nettsiden. Denne informasjonen finnes i </code>, <code><link></code>, og <code><description></code> elementer, henholdsvis.</p> <p>Når disse kodene er <strong>direkte presentere innvendig <code><channel></code></strong>, de holder tittelen, nettadressen og beskrivelsen av nettstedet. Når de er <strong>presentere inne <code><item></code></strong> at <strong>holder informasjonen om de oppdaterte innleggene</strong>, de representerer den samme informasjonen som før, men den av det enkelte innhold som hver <code><item></code> representere.</p> <p>Det er også noen <strong>valgfrie elementer</strong> som kan være til stede i et RSS-feed, og gir tilleggsinformasjon som bilder eller opphavsrett til det distribuerte innholdet. Du kan lære om dem i dette <strong>RSS 2.0 spesifikasjon</strong> på cyber.harvard.edu.</p> <p>Her er et eksempel på hvordan <strong>RSS-feed av et nettsted</strong> kan se ut som:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Designtips, opplæring og inspirasjonen-usVisualiser et hvilket som helst CSS-stilark med CSS-statistikkNoen gang lurt på hvor mange CSS-regler er i et stilark? Eller har du noen gang ønsket å se ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Den nyeste Alexa-drevne Smart DeviceAmazon er ikke fremmed for konseptet med smarte hjemmeanlegg med en innebygd digital assistent. Tross alt, ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/
Henter feedet
Vi må hente feedet med vår RSS leser applikasjon. På et nettsted kan nettadressen til en RSS-feed være funnet inne i tag ved hjelp av application / rss + xml type. For eksempel finner du følgende RSS-feedkobling på Hongkiat.com.
Først, la oss se hvordan få nettadressen til et nettsted bruker JavaScript.
hent (websiteUrl) .then ((res) => res.text (). deretter ((htmlTxt) => var domParser = ny DOMParser () la doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ("link [type =" application / rss + xml "]". href)) .fang (() => console.error ('Feil ved henting av nettstedet'))
De hente () Metoden er en global metode som asynkront henter en ressurs. Det tar URL-adressen til ressursen som et argument (nettadressen til nettstedet i vår kode). Den returnerer a Love objekt, så når metoden henter nettstedet vellykket (dvs. Love er oppfylt), den første funksjonen inne i deretter() uttalelse håndterer den hentede responsen (res i over kode).
Den hentede responsen er da fullt lest inn i en tekststreng bruker tekst() metode. Denne teksten representerer HTML-tekst på vår hentede nettside. Som hente (), tekst() også returnerer a Love gjenstand. Så når det med hell oppretter en svartekst fra responsstrømmen, deretter() vil håndtere denne svarteksten (htmlText i over kode).
Når HTML-teksten til nettstedet er tilgjengelig, bruker vi DOMParser API til analysere det i et DOM-dokument. DOMParser analyserer en XML / HTML-tekststreng i et DOM-dokument. Dens metode, parseFromString (), tar to argumenter: den Tekst som skal analyseres og innholdstype.
Deretter fra det opprettede DOM-dokumentet, vi Finn href verdien av den aktuelle stikkord bruker querySelector () metode for å få nettadressen til feedet.
Parsing og visning av feedet
Når vi fikk nettadressen til nettsiden, må vi hente og les RSS-dokumentet funnet på den nettadressen.
hent (feedUrl) .then ((res) => res.text (). deretter ((xmlTxt) => var domParser = ny DOMParser () la doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .Ekv ()) forEach ((item) => la h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title') .textContent document.querySelector ('output'). appendChild (h1))))
På samme måte som vi hentet og analyserte nettstedet, nå vi få og analysere XML-feedet i et DOM-dokument. For å oppnå dette bruker vi 'Text / xml' innholdstype i parseFromString () metode.
I det analyserte dokumentet, vi velg alle elementer bruker querySelectorAll metode og loop gjennom hver.
