Статьи

Разбор RSS-каналов в JavaScript — Параметры

Некоторое время назад я использовал  Google Feed API  для анализа RSS-каналов в JavaScript. Он отлично справился с преобразованием различных разновидностей RSS в простой набор записей, с которыми можно легко работать. К сожалению, Google отказался от API, и, хотя он все еще работал в последний раз, когда я его использовал, я настоятельно рекомендую людям как можно скорее перенести свои приложения из него. Хотя это меня огорчает, ты должен идти дальше.

2000px-Sad_panda.svg

Итак, какие у вас есть варианты?

Разбор вручную

Итак, помните, что RSS — это всего лишь XML, а XML — это просто строка, и анализ строки очень прост, верно? Конечно, есть два основных варианта RSS и несколько версий обоих вариантов, но если вы просто анализируете один известный канал RSS, вы можете написать именно этот вариант и версию. (Подробнее о различных версиях можно найти в  ВикипедииК сожалению, если вы попробуете просто XHR для RSS-канала, вы натолкнетесь на прекрасный браузер с несколькими источниками, который не позволяет вам отправлять запросы на другой сервер. Конечно, если RSS находится в одном домене, это не проблема. И, конечно, если вы что-то строите в Apache Cordova, то это тоже не проблема. (Только не забудьте обновить CSP!) И, наконец, если вы управляете RSS, вы можете добавить к нему заголовок CORS, чтобы его могли использовать современные браузеры. К сожалению, если ни один из них не подходит, вам не повезло, пытаясь сделать это полностью на стороне клиента. (Хорошо, пока мы не перейдем к следующим вариантам!) Давайте представим, что ни одно из препятствий не применимо к вам, и рассмотрим простой пример. (В качестве краткого примечания, ни один из моего примера кода на самом деле ничего не отобразит. Он просто получит дерьмо, проанализирует его и зарегистрирует данные.Я предполагаю, что люди знают, как манипулировать DOM. Я слышал, что есть хорошая библиотека  для этого.)

$(document).ready(function() {
//feed to parse
var feed = "http://feeds.feedburner.com/raymondcamdensblog?format=xml";

$.ajax(feed, {
accepts:{
xml:"application/rss+xml"
},
dataType:"xml",
success:function(data) {
//Credit: http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript

$(data).find("item").each(function () { // or "item" or whatever suits your feed
var el = $(this);
console.log("------------------------");
console.log("title      : " + el.find("title").text());
console.log("link       : " + el.find("link").text());
console.log("description: " + el.find("description").text());
});


}
});

});

Итак, все, что я здесь делаю, это использую jQuery для запроса моего RSS-канала. Затем я использую встроенный в JQuery синтаксический анализ XML, чтобы перебрать блоки <item> в моей ленте RSS. Как видите, я использую пример кода из  ответа StackOverflow,  который я чуть-чуть изменил. В частности, ответ повторяется по блокам <entry>, а не по <item>. Помните, когда я сказал, что были разные вкусы RSS? Это пример проблемы прямо здесь. Если вы должны написать код для обработки обоих случаев, вам нужно сначала найти <item>, а затем <entry>. Но это в основном так. Если вам интересно, я протестировал это на Canary с параметром -disable-web-security в качестве флага командной строки.

Shot1

YQL

Помните  YQL (Yahoo Query Language) ? В последний раз я писал об этом в далеком 2010 году ( Proof of Concept 911 Viewer ). Как грубое упрощение, YQL действует как «язык запросов» для Интернета. Вы можете буквально запускать контент, похожий на SQL, по URL-адресам и получать от него отформатированные данные. Они предоставляют мощную консоль для тестирования, и разве вы этого не знаете, один из примеров — парсер RSS:

Shot2

На случай, если этот скриншот слишком мал, вот как выглядит оператор YQL:

select title from rss where url="http://rss.news.yahoo.com/rss/topstories"

У меня есть одно слово для этого. Плохая задница! Мол, котенок в доспехах, плохая задница!

shot3

Я тестировал с двумя различными вариантами RSS, и у YQL также не было проблем с обработкой. Обратите внимание на URL запроса REST внизу. Я скопировал это в новый файл:

$(document).ready(function() {

var yql = "https://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%2Cdescription%20from%20rss%20where%20url%3D%22http%3A%2F%2Ffeeds.feedburner.com%2Fraymondcamdensblog%3Fformat%3Dxml%22&format=json&diagnostics=true&callback=";

$.getJSON(yql, function(res) {
console.log(res);
}, "jsonp");

});

И это сработало как шарм. Обратите внимание на использование JSON / P, чтобы обойтись без CORS. И вот результат:

shot4

Большое спасибо Адди Османи из Google за напоминание о том, что YQL все еще существует. Google, я прощаю тебя за убийство Feed API сейчас.

Feednami

И последнее, но не менее важное — это совершенно новый сервис  Feednami , созданный как раз к смерти API Google Feeds. Чтобы использовать его, вы просто добавляете новый скрипт в свой код и затем используете feednami.load (), чтобы получить ваш фид. Вот пример:

$(document).ready(function() {

var url = 'http://feeds.feedburner.com/raymondcamdensblog?format=xml';

feednami.load(url,function(result){
if(result.error) {
console.log(result.error);
} else {
var entries = result.feed.entries;
for(var i = 0; i < entries.length; i++){
var entry = entries[i];
console.dir(entry);
}
}
});

});

Это также чертовски просто в использовании. Вот результат:

shot5

Резюме

Итак, у вас есть варианты. Какой из них лучше? Честно говоря, я не знаю. YQL требует наименьшего количества кода из того, что я вижу, но я немного поищу в Feednami. Если вы использовали какой-либо из них в производстве, напишите мне свой комментарий ниже!