Včera jsem začal implementovat aktualizaci času na výpisu typu friend feed. Dnes se podíváme na to, jak si zjednodušit práci s asynchronním voláním na server. Samozřejmě opět s využitím jQuery a Reactive Extensions.
Asynchronní volání
Asynchronní volání je z pohledu šetření zdroji výhodné, ovšem z hlediska psaní a údržby kódu už to taková sláva není. Proto nám na pomoc přicházejí Rx, které asynchronní operace převádějí na neblokující lineární kód.
Pojďme hned k dnešní ukázce, která bude o dost jednodušší než včera. Ale použitá technika a principy zůstávají stejné:
Rx.Observable.
Interval(60000).
Select(getFeedUpdates).
Switch().
SelectMany(function(result) {
return $(result).find('.hentry').toArray().reverse().toObservable();
}).
Subscribe(function(entry) {
var feed = $('.hfeed')
feed.prepend(entry);
$('.hentry:last', feed).remove();
});Opět vytvářím Observable objekt, který něco vystřelí
jednou za minutu. Tajemství funkce getFeedUpdates si nechám na
později. A rovnou se vrhnu na zpracování dorazivších výsledků.
Výsledkem mého asynchronního volání je kus HTML kódu s vygenerovaným
feedem s novými příspěvky. Z tohohle kusu HTML si vyberu jen elementy
s třídou hentry. Ty jsou seřazeny podle data sestupně, ale já
chci feed aktualizovat postupně od nejstarších příspěvků
k nejnovějším, takže je otočím funkcí reverse a pošlu je
do světa jako Observable objekty.
Nakonec se přihlásím k odběru těchto jednotlivých příspěvků
pomocí operátoru Subscribe. Když mi nějaký příspěvek
přilítne, tak ho vezmu a dám ho na začátek feedu a potom odeberu poslední
záznam, aby se nám feed na stránce nenatahoval. Takže jsme elegantně
zvládli příjem nových příspěvků. A jak je vlastně načítáme?
function getLastActivityDate() {
return $('.hfeed>.hentry .updated .value-title').first().attr('title');
}
function getFeedUpdates() {
var subject = new Rx.AsyncSubject();
var data = { lastActivity: getLastActivityDate() };
jQuery.post("url", data, function(result, status) {
if (status == "success") {
subject.OnNext(result);
subject.OnCompleted();
}
else {
subject.OnError(result);
}
});
return subject.AsObservable();
}Funkce getLastActivityDate načte datum posledního zobrazeného
příspěvku, které slouží k načtení novějších příspěvků ze
serveru. Opět k tomu využívám mikroformátu hAtom a jeho
konkrétní implementaci v mé stránce.
Podívejme se ale raději na další funkci. To je výše zmiňovaná
getFeedUpdates, která nám transformuje asynchronní volání na
objekt Observable a to pomocí třídy AsyncSubject.
Povšimněte si, že v callbacku asynchronního volání vrátím přes closure
data do subjektu, který už je tou dobou pozorován první ukázkou kódu.
Když přijde odpověď od serveru, je zavolána metoda OnNext,
která vyhodí přijatá data dál ke zpracování. A vzhledem k tomu, že na
jeden dotaz asi více odpovědí nepřijde, tak taky ukončíme vysílání
výsledků pomocí metody OnComplete. Kdyby náhodou něco na
serveru selhalo, máme tu ještě metodu OnError, jejíž
zpracování nikde neřeším. :)
Ale vězte, že chyby můžete zpracovávat stejně snadno jako normální data.
No a to je pro dnešek vše. Tuhle ukázku si bohužel vyzkoušet nemůžete, protože k ní už je zapotřebí i serverová část a ta ještě není venku. Příště se možná podíváme, jak pomocí Rx snadno a rychle vytvořit poměrně sofistikovaný našeptávač.
Jmenuji se Aleš Roubíček
a jsem vývojář webových aplikací na platformě ASP.NET. Pracoval jsem v portálu Atlas.cz na katalogových aplikacích. Nyní pracuji v Twaregu na web
2.0 projektech a na reklamním systému. Zajímám se o webové technologie všeho druhu
v poslední době především o 
