Як створити додаток RSS Reader у JavaScript

RSS (Really Simple Syndication) - це стандартизований формат, який використовують видавці в мережі синдикувати їх зміст на інші веб-сайти та служби. An Документ RSS, також відомий як a корм, є XML-документ несе вміст, який видавець бажає розповсюджувати.

RSS-канали доступні практично на всіх веб-сайтах та блогах для онлайн-новин для своїх читачів залишайтеся в курсі їхнього вмісту. Їх також можна знайти на нетекстові веб-сайти наприклад, YouTube, де можна використовувати канал каналу YouTube повідомили про останні відео.

Називаються програми, які отримують доступ до цих каналів, а також читають і показують їх вміст Читачі RSS. Ви можете створити просту програму для читання RSS у JavaScript. У цьому підручнику ми побачимо, як це зробити.

Структура каналу RSS

Канал RSS має кореневий елемент називається , схожий на тег знайдено в документах 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>Hongkiat 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 - Останній смартфон на базі Алекса Amazon не чуже концепції розумних домашніх систем з вбудованим цифровим помічником. Адже… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Отримання каналу`

 Ми потребуємо витягувати канал з нашою програмою для читання RSS. На веб-сайті може бути URL-адреса каналу RSS знайдено всередині  з використанням тега application / rss + xml тип. Наприклад, на сайті Hongkiat.com можна знайти посилання на канал RSS.
   
 Спочатку подивимося, як це зробити отримати URL-адресу каналу веб-сайту використовуючи JavaScript.
  fetch (websiteUrl). then ((res) => res.text ().) потім ((htmlTxt) => var domParser = новий DOMParser () дозволить doc = domParser.parseFromString feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)).) catch (() => console.error ("Помилка при виборі веб-сайту")) 
 The fetch () Метод є глобальним методом, який асинхронно вибирає ресурс. URL-адреса ресурсу приймається як аргумент (URL-адреса веб-сайту в нашому коді). Це повертає a Обіцянка об'єкт, тому, коли метод успішно вибирає веб-сайт (тобто Обіцянка виконується), перша функція всередині потім() заяву обробляє отриманий відповідь (res у наведеному вище коді).
  Потім отриманий відповідь повністю прочитати в текстовий рядок за допомогою текст () метод. Цей текст являє собою Текст HTML нашого придбаного веб-сайту. Люблю fetch (), текст () також повертає 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 () доз. doc = domParser.parseFromString forEach ((item) => нехай h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1)))) 
 Так само, як ми прибирали та аналізували веб-сайт, тепер ми отримати і проаналізувати канал XML у документ DOM. Для цього ми використовуємо 'text / xml' тип вмісту в parseFromString () метод.
 У розібраному документі ми виберіть усі  елементи за допомогою querySelectorAll метод і петля через кожну.
 Усередині кожного елемента ми можемо теги доступу люблю </code>, <code><description></code>, і <code><link></code>, що несуть вміст корму. Наші прості програми для читання RSS-файлів робляться, ви можете накреслити вміст завантажених каналів за вашим бажанням.</p> <h4>Демо Github</h4> <p>Ви можете перевірити <strong>більш детальна версія</strong> коду, який використовується в цій посаді в нашому Github repo. Більш детальна версія <strong>отримує три канали</strong> (Mozilla Hacks, Hongkiat і блог Webkit) <strong>за допомогою файлу JSON</strong> а також додає деякі стилі CSS до читача RSS.</p>


<div class="rek-block ads-block" data-ads-size="netboard">
		
	</div>


		</div>
	</div>

	<div class="col-md-4">
<div class="bar">

    <div class="rek-block ads-block" data-ads-size="square">
            
        </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="rek-block ads-block" data-ads-size="vertical">
            
        </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 class="rek-block ads-block" data-ads-size="vertical">
        </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.  T</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.phhsnews.com"><i class="flag flag-FR"></i></a></li>
        <li class="site-lang"><a href="https://lt.phhsnews.com"><i class="flag flag-LT"></i></a></li>
        <li class="site-lang"><a href="https://it.phhsnews.com"><i class="flag flag-IT"></i></a></li>
        <li class="site-lang"><a href="https://cs.phhsnews.com"><i class="flag flag-CZ"></i></a></li>
        <li class="site-lang"><a href="https://es.phhsnews.com"><i class="flag flag-ES"></i></a></li>
        <li class="site-lang"><a href="https://no.phhsnews.com"><i class="flag flag-NO"></i></a></li>
        <li class="site-lang"><a href="https://pt.phhsnews.com"><i class="flag flag-PT"></i></a></li>
        <li class="site-lang"><a href="https://de.phhsnews.com"><i class="flag flag-DE"></i></a></li>
        <li class="site-lang"><a href="https://nl.phhsnews.com"><i class="flag flag-NL"></i></a></li>
        <li class="site-lang"><a href="https://da.phhsnews.com"><i class="flag flag-DK"></i></a></li>          
        <li class="site-lang"><a href="https://sv.phhsnews.com"><i class="flag flag-SE"></i></a></li>

        <li class="site-lang"><a href="https://th.phhsnews.com/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://tr.phhsnews.com/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.phhsnews.com/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.phhsnews.com/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="/">PHHSNEWS</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>

<script src="js/ads.js"></script>

</body>
</html>