Как создать приложение для чтения RSS на JavaScript

RSS (Really Simple Syndication) — это стандартизированный формат, используемый онлайн-издателями для передачи своего контента на другие веб-сайты и сервисы. Документ RSS, также известный как канал, — это документ XML, содержащий контент, который издатель хочет распространять.

RSS-каналы доступны почти на всех новостных веб-сайтах и ​​в блогах, чтобы их читатели всегда были в курсе своего содержания. Их также можно найти на нетекстовых веб-сайтах, таких как YouTube, где вы можете использовать канал канала YouTube для получения информации о последних видео.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Программы, которые получают доступ к этим каналам, читают и отображают их содержимое, называются программами чтения RSS Вы можете создать простую программу для чтения RSS на JavaScript. В этом уроке мы увидим, как это сделать.
Демоверсия приложения для чтения RSSСтруктура RSS-канала
У RSS-канала есть корневой элемент, который называется , аналогично тег найден в документах HTML. Внутри тег, есть элемент, вроде как в HTML, который включает в себя множество подэлементов, содержащих распределенный контент сайта.

Фид обычно содержит некоторую основную информацию, такую ​​как заголовок, URL и описание веб-сайта, а также отдельные обновленные публикации, статьи или другое содержимое этого веб-сайта. Эта информация находится в,<link>, а также <description> элементы соответственно.</p><p>Когда эти теги непосредственно присутствуют внутри <channel>, они содержат заголовок, URL и описание сайта. Когда они присутствуют внутри <item> который содержит информацию об обновленных сообщениях, они представляют ту же информацию, что и раньше, но информацию об отдельном контенте, который каждый <item> представлять.</p><p>Есть также некоторые дополнительные элементы, которые могут присутствовать в RSS-канале, предоставляя дополнительную информацию, такую ​​как изображения или авторские права на распространяемый контент. Вы можете узнать о них в этой спецификации RSS 2.0 на <a rel="nofollow noopener noreferrer" target="_blank" href="https://cyber.harvard.edu/rss/rss.html">cyber.harvard.edu</a>,</p><div class='code-block code-block-7' style='margin: 8px 0; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5162050706337438" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5162050706337438" data-ad-slot="1932793229" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script> </div><p>Вот пример того, как может выглядеть RSS-лента веб-сайта:</p><div class='code-block code-block-2' style='margin: 8px 0; clear: both;'><div id="yandex_rtb_R-A-1243617-2"></div> <script type="litespeed/javascript">window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:'yandex_rtb_R-A-1243617-2',blockId:'R-A-1243617-2'})})</script> </div><p><rss version="2.0"><br /> <channel><br /><title>Hongkiathttps://www.hongkiat.com/ Советы по дизайну, учебник и вдохновение
ан-нас

Визуализация любой таблицы стилей CSS с помощью статистики CSS
Когда-нибудь задумывались, сколько правил CSS
      находятся в таблице стилей? Или ты когда-нибудь
      хотел увидеть…
18/05/2017https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/


Amazon Echo Show — новейшее интеллектуальное устройство на базе Alexa
Amazon не привыкать к концепции умного дома
      системы со встроенным цифровым помощником.
      В конце концов, …
17/05/2017https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/


Извлечение корма
Нам нужно получить канал с нашим приложением для чтения RSS. На веб-сайте URL-адрес канала RSS можно найти внутри тег, используя тип приложения / rss + xml. Например, вы найдете следующую ссылку RSS-канала на Hongkiat.com.

Во-первых, давайте посмотрим, как получить URL канала веб-сайта с помощью JavaScript.

fetch (websiteUrl) .then ((res) => {
  res.text (). then ((htmlTxt) => {
    var domParser = новый DOMParser ()
    let doc = domParser.parseFromString (htmlTxt, ‘text / html’)
    var feedUrl = doc.querySelector (‘ссылка[type=»application/rss+xml»]«) .Href
  })
}). catch (() => console.error (‘Ошибка при загрузке сайта’))

выборки () Метод — это глобальный метод, который асинхронно выбирает ресурс. Он принимает URL ресурса в качестве аргумента (URL сайта в нашем коде). Он возвращает объект Promise, поэтому, когда метод успешно извлекает веб-сайт (т. Е. Обещание выполнено), первая функция внутри оператора then () обрабатывает извлеченный ответ (res в приведенном выше коде).

Полученный ответ затем полностью считывается в текстовую строку, используя текст() метод. Этот текст представляет собой HTML-текст нашего загруженного веб-сайта. Как и fetch (), text () также возвращает объект Promise. Таким образом, когда он успешно создает текст ответа из потока ответов, then () будет обрабатывать этот текст ответа (htmlText в приведенном выше коде).

Как только HTML-текст сайта доступен, мы используем DOMParser API разобрать его в документ DOM. DOMParser анализирует текстовую строку XML / HTML в документе DOM. Его метод parseFromString () принимает два аргумента: анализируемый текст и тип содержимого.

Затем из созданного документа DOM мы находим значение href соответствующего тег с помощью querySelector () метод для того, чтобы получить URL-адрес канала.
Разбор и отображение ленты
Как только мы получим URL-адрес канала веб-сайта, нам нужно получить и прочитать документ RSS, найденный по этому URL-адресу.

fetch (feedUrl) .then ((res) => {
  res.text (). then ((xmlTxt) => {
    var domParser = новый 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 ( ‘выход’). AppendChild (h1)
       })
     })
})

Таким же образом, как мы выбирали и анализировали веб-сайт, теперь мы получаем и анализируем XML-канал в DOM-документе. Чтобы достичь этого, мы используем тип содержимого text / xml в методе parseFromString ().

В разобранном документе мы выбираем все элементы, использующие querySelectorAll метод и цикл через каждого.

Внутри каждого элемента мы можем получить доступ к тегам, таким как, <description>, а также<link>, которые несут содержание корма. И наше простое приложение для чтения RSS готово, вы можете стилизовать содержимое выбранных каналов по своему желанию.<br /> Github демо<br /> Вы можете проверить более подробную версию кода, используемого в этом посте в нашем <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/hongkiat/js-rss-reader/">Github репо</a>, Более подробная версия выбирает три канала (<a rel="nofollow noopener noreferrer" target="_blank" href="https://hacks.mozilla.org/">Mozilla Hacks</a>Хонгкиат и <a rel="nofollow noopener noreferrer" target="_blank" href="https://webkit.org/blog/">Блог Webkit</a>) с использованием файла JSON, а также добавляет некоторые стили CSS в программу чтения RSS.</p><div class='ai-viewports ai-viewport-1 ai-insert-5-23908196' style='margin: 8px 0; clear: both;' data-insertion-position='prepend' data-selector='.ai-insert-5-23908196' data-insertion-no-dbg data-code='PGRpdiBjbGFzcz0nY29kZS1ibG9jayBjb2RlLWJsb2NrLTUnIHN0eWxlPSdtYXJnaW46IDhweCAwOyBjbGVhcjogYm90aDsnPgo8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM/Y2xpZW50PWNhLXB1Yi01MTYyMDUwNzA2MzM3NDM4IgogICAgIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pgo8aW5zIGNsYXNzPSJhZHNieWdvb2dsZSIKICAgICBzdHlsZT0iZGlzcGxheTpibG9jayIKICAgICBkYXRhLWFkLWZvcm1hdD0iYXV0b3JlbGF4ZWQiCiAgICAgZGF0YS1hZC1jbGllbnQ9ImNhLXB1Yi01MTYyMDUwNzA2MzM3NDM4IgogICAgIGRhdGEtYWQtc2xvdD0iNjY2Njg0OTA3MiI+PC9pbnM+CjxzY3JpcHQ+CiAgICAgKGFkc2J5Z29vZ2xlID0gd2luZG93LmFkc2J5Z29vZ2xlIHx8IFtdKS5wdXNoKHt9KTsKPC9zY3JpcHQ+Cgo8IS0tIFlhbmRleCBOYXRpdmUgQWRzIEMtQS0xMjQzNjE3LTUgLS0+CjxkaXYgaWQ9ImlkLUMtQS0xMjQzNjE3LTUiPjwvZGl2Pgo8c2NyaXB0PndpbmRvdy55YUNvbnRleHRDYi5wdXNoKCgpPT57CiAgWWEuQ29udGV4dC5BZHZNYW5hZ2VyLnJlbmRlcldpZGdldCh7CiAgICByZW5kZXJUbzogJ2lkLUMtQS0xMjQzNjE3LTUnLAogICAgYmxvY2tJZDogJ0MtQS0xMjQzNjE3LTUnCiAgfSkKfSk8L3NjcmlwdD48L2Rpdj4K' data-block='5'></div><div class='code-block code-block-11' style='margin: 8px 0; clear: both;'><p>Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, <a href="https://t.me/+iju47uXqN9xlMTk6" target="_blank" rel="noopener">в нашем закрытом телеграмм канале - Подписывайтесь:)</a></p></div></div><footer class="entry-footer"></footer></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://triu.ru/povyste-proizvoditelnost-ispolzuya-sketch-s-plaginom-runner/" rel="prev"><div class="post-navigation-sub"><small><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-left-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><title>Назад Назад

Повысьте производительность, используя Sketch с плагином Runner

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *