मुखपृष्ठ » कोडिंग » जावास्क्रिप्ट में आरएसएस रीडर ऐप कैसे बनाएं

    जावास्क्रिप्ट में आरएसएस रीडर ऐप कैसे बनाएं

    RSS (वास्तव में सरल सिंडिकेशन) एक मानकीकृत प्रारूप है जिसका उपयोग ऑनलाइन प्रकाशकों द्वारा किया जाता है उनकी सामग्री को सिंडिकेट करें अन्य वेबसाइटों और सेवाओं के लिए। एक RSS दस्तावेज़, a के नाम से भी जाना जाता है चारा, है एक XML दस्तावेज़ वह सामग्री ले जाना जो एक प्रकाशक वितरित करना चाहता है.

    आरएसएस फ़ीड लगभग सभी ऑनलाइन समाचार वेबसाइटों और ब्लॉग पर अपने पाठकों के लिए उपलब्ध हैं उनकी सामग्री के साथ अद्यतित रहें. उन पर भी पाया जा सकता है गैर-पाठ आधारित वेबसाइट जैसे कि YouTube, जहाँ आप YouTube चैनल के फ़ीड का उपयोग कर सकते हैं नवीनतम वीडियो की सूचना दी.

    प्रोग्राम जो इन फ़ीड्स तक पहुंचते हैं, और उनकी सामग्री को पढ़ते हैं और प्रदर्शित करते हैं उन्हें कहा जाता है आरएसएस के पाठक. आप जावास्क्रिप्ट में एक साधारण आरएसएस रीडर प्रोग्राम बना सकते हैं। इस ट्यूटोरियल में, हम देखेंगे कि कैसे.

    आरएसएस फ़ीड की संरचना

    एक आरएसएस फ़ीड एक जड़ तत्व है बुलाया , के समान HTML दस्तावेज़ों में टैग मिला। के अंदर टैग, एक है तत्व, तरह की तरह HTML में, कि कई उप-तत्व शामिल हैं वेबसाइट की वितरित सामग्री युक्त.

    एक फ़ीड आमतौर पर कुछ किया जाता है मूलभूत जानकारी जैसे कि शीर्षक, URL और वेबसाइट का विवरण और व्यक्तिगत अपडेट की गई पोस्ट, लेख या अन्य सामग्री उस वेबसाइट का। ये जानकारी में पाए जाते हैं </code>, <code><link></code>, तथा <code><description></code> तत्वों, क्रमशः.</p> <p>जब ये टैग हैं <strong>सीधे अंदर मौजूद है <code><channel></code></strong>, वे वेबसाइट का शीर्षक, URL और विवरण रखते हैं। जब वे कर रहे हैं <strong>अंदर मौजूद है <code><item></code></strong> उस <strong>अद्यतन पदों के बारे में जानकारी रखता है</strong>, वे पहले जैसी ही जानकारी का प्रतिनिधित्व करते हैं, लेकिन व्यक्तिगत सामग्री के प्रत्येक <code><item></code> का प्रतिनिधित्व.</p> <p>कुछ हैं भी <strong>वैकल्पिक तत्व</strong> आरएसएस फ़ीड में मौजूद हो सकता है, वितरित सामग्री पर छवियों या कॉपीराइट जैसी पूरक जानकारी प्रदान करता है। इसमें आप उनके बारे में जान सकते हैं <strong>आरएसएस 2.0 विनिर्देश</strong> cyber.harvard.edu पर.</p> <p>यहाँ कैसे का एक नमूना है <strong>RSS एक वेबसाइट का फ़ीड</strong> ऐसा लग सकता है:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ डिजाइन टिप्स, ट्यूटोरियल और प्रेरणा en-us सीएसएस आँकड़े के साथ किसी भी सीएसएस स्टाइलशीट की कल्पना करें कभी सोचा है कि एक स्टाइलशीट में कितने सीएसएस नियम हैं? या क्या आप कभी देखना चाहते हैं ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ अमेज़ॅन इको शो - नवीनतम एलेक्सा-संचालित स्मार्ट डिवाइस अमेज़न एक एम्बेडेड डिजिटल सहायक के साथ स्मार्ट होम सिस्टम की अवधारणा के लिए अजनबी नहीं है। आखिरकार,… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    चारा लाना

    हमारे लिए आवश्यक है चारा लाना हमारे आरएसएस रीडर आवेदन के साथ। किसी वेबसाइट पर, RSS फ़ीड का URL हो सकता है अंदर पाया गया टैग का उपयोग कर आवेदन / rss + xml प्रकार. उदाहरण के लिए, आपको Hongkiat.com पर निम्नलिखित आरएसएस फ़ीड लिंक मिलेगा.

    सबसे पहले, आइए देखें कि कैसे किसी वेबसाइट का फ़ीड URL प्राप्त करें जावास्क्रिप्ट का उपयोग कर.

     fetch (websiteUrl) .then ((res) => res.text ()। तब ((htmlTxt) => var domParser = new DOMParser () let doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('लिंक [प्रकार = "एप्लिकेशन / आरएसएस + xml]]')। href))। पकड़ना () => कंसोल। फेरर (वेबसाइट लाने में त्रुटि)))

    लाने () विधि एक वैश्विक विधि है अतुल्यकालिक रूप से एक संसाधन प्राप्त करता है. यह संसाधन के URL को एक तर्क के रूप में लेता है (हमारे कोड में वेबसाइट का URL)। यह एक रिटर्न पक्का वादा ऑब्जेक्ट, इसलिए जब विधि सफलतापूर्वक वेबसाइट लाती है (अर्थात पक्का वादा पूरा हो गया है), के अंदर पहला कार्य फिर() बयान प्राप्त प्रतिक्रिया को संभालता है (रेस उपरोक्त कोड में).

    भ्रूण की प्रतिक्रिया तब है पूरी तरह से एक पाठ स्ट्रिंग में पढ़ा का उपयोग करते हुए पाठ () तरीका। यह पाठ प्रतिनिधित्व करता है हमारी लुभावनी वेबसाइट का HTML टेक्स्ट. पसंद लाने (), पाठ () भी एक रिटर्न पक्का वादा वस्तु. इसलिए, जब यह सफलतापूर्वक प्रतिक्रिया स्ट्रीम से प्रतिक्रिया पाठ बनाता है, फिर() कि प्रतिक्रिया पाठ संभाल लेंगे (htmlText उपरोक्त कोड में).

    वेबसाइट का HTML टेक्स्ट उपलब्ध होने के बाद, हम उपयोग करते हैं DOMParser API सेवा मेरे इसे DOM दस्तावेज़ में पार्स करें. DOMParser एक DOM दस्तावेज़ में XML / HTML टेक्स्ट स्ट्रिंग को पार्स करता है। इसकी विधि है, parseFromString (), लेता है दो तर्क: द पाठ पार्स किया जाना है और यह सामग्री प्रकार.

    फिर, निर्मित DOM दस्तावेज़ से, हम खोजो href प्रासंगिक का मूल्य टैग का उपयोग करते हुए querySelector () फ़ीड का URL प्राप्त करने के लिए विधि.

    फ़ीड को पार्स करना और प्रदर्शित करना

    एक बार जब हमें वेबसाइट का फीड URL मिल जाता है, तो हमें इसकी आवश्यकता होती है आरएसएस दस्तावेज़ को प्राप्त करें और पढ़ें उस URL पर मिला.

     fetch (feedUrl) .then ((res) => res.text ()। तब ((xmlTxt) => var domParser = new DOMParser () let doc = domParser .parseFromString (xmlTxt, 'text / xml') doc। .querySelectorAll ('आइटम')। forEach ((आइटम) => let h1 = document.createElement ('h1') h1.textContent = item.querySeetor ('शीर्षक')। TextContent document.querySelector ('output')। appendChild (h1))))

    उसी तरह जैसे हमने वेबसाइट को प्राप्त और पार्स किया, अब हम एक डोम डॉक्यूमेंट में XML फीड प्राप्त करें और पार्स करें. इसे प्राप्त करने के लिए, हम इसका उपयोग करते हैं 'Text / xml' सामग्री प्रकार में parseFromString () तरीका.

    पार्स किए गए दस्तावेज़ में, हम सभी का चयन करें तत्वों का उपयोग करते हुए querySelectorAll विधि और प्रत्येक के माध्यम से पाश.

    प्रत्येक तत्व के अंदर, हम कर सकते हैं पहुंच टैग पसंद </code>, <code><description></code>, तथा <code><link></code>, कि फ़ीड सामग्री ले जा रहे हैं। और, हमारे सरल आरएसएस रीडर एप्लिकेशन को किया जाता है, आप अपनी इच्छानुसार प्राप्त फीड की सामग्री को स्टाइल कर सकते हैं.</p> <h4>गिथब डेमो</h4> <p>आप बाहर की जाँच कर सकते हैं <strong>अधिक विस्तृत संस्करण</strong> हमारे Github रेपो में इस पोस्ट में उपयोग किए गए कोड। अधिक विस्तृत संस्करण <strong>तीन फीड लाती है</strong> (मोज़िला हैक्स, हांगकीट और वेबकिट ब्लॉग) <strong>JSON फ़ाइल का उपयोग करना</strong> और RSS रीडर में कुछ CSS शैलियाँ भी जोड़ता है.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </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="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> </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">विंडोज 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">अमेज़ॅन एलेक्सा के साथ रूटीन कैसे बनाएं</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.savtec.org/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://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/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.savtec.org/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.savtec.org/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="/">Savtec</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> </body> </html>