27.3.2015

Petr Bravenec
Twitter: @BravenecPetr
+420 777 566 384
petr.bravenec@hobrasoft.cz

Před pár týdny jsem představil jednoduchý http server pro Qt a univerzální API pro přístup k datům aplikace – dnes si ukážeme, jak používat HTML5 proud událostí.

Odkazy

HTTP server pro C++ a Qt
Univerzálni API
Koukněte se, jak to běhá
Dokumentace
Download

Server používáme v několika případech i pro embedded aplikace postavené na Beaglebone black. Už minule jsem ozřejmil obvyklou strukturu stránek:

• HTML kód servírovaný aplikací je obvykle statický - tvoří pouze šablonu, která je vyplňovaná daty dodatečně.
• Součástí každé stránky je vlastní JavaScript kód, který v součinnosti s univerzálním API získává z aplikace data a vkládá je do stránek.
• JavaScript kód si udržuje trvalé spojení s aplikací a případné změny okamžitě promítne do stránek zobrazených v okně prohlížeče – tuto část si dnes popíšeme.

Podívejte se na živý příklad. Jak to vlastně funguje?

Pohled do zdrojového HTML stránky ukáže celkem jednoduchou tabulku bez dat (ostatní části HTML teď pomíjím):

<table id="tabledata">
<thead><tr><th>ID</th><th>Text</th><th>Value</th><th></th></tr></thead>
<tbody></tbody>
</table>

Tabulka je prázdná – o její naplnění daty se stará JavaScript a mechanismus HTML5 proudu událostí:

$(document).ready(function(){
    var source = new EventSource("/example/events");
    source.addEventListener("status", function(event) {
        var data = JSON.parse(event.data);
        var id = data.id;
        var rowdata = 
            "" + 
            "" + data.id + "" +
            "" + data.text + "" +
            "" + data.counter + "" +
            "detail" +
            "\n";
        var rowelement = $("table#tabledata tbody tr#"+id);
        if (rowelement.text() == "") {
            $("table#tabledata tbody").append( rowdata );
          } else {
            rowelement.replaceWith( rowdata );
            }
        }, false);
});

První řádek je konstrukce z jQuery, druhý řádek instaluje proud událostí a na dalších řádcích je samotné zpracování události. Kód nepracuje v prohlížeči MS Explorer, tento prohlížeč nepodporuje HTML5 proudy událostí. Ostatní prohlížeče obvykle fungují bez problémů.

V JavaScriptu si povšimněte řádku, který instaluje proud událostí:

var source = new EventSource("/example/events");

Řetězec "/example/events" je relativní URL adresa odkazující na proud událostí. Jak vytvořit takovou adresu pomocí HobrasoftHttp serveru jsem popsal v dřívějším zápisku.

HTML5 proudy událostí nejsou nic tajuplného, používají se snadno a efektivně. V češtině najdete o proudech událostí mnohem lépe zpracované vysvětlení třeba zde:

Zdroják: HTML5 EventSource: Serverem zasílané události proudí nepřetržitě…

Závěr

V tomto článku jsem chtěl pouze upozornit na zajímavou a nenáročnou technologi. Moje zkušenosti ukazují, že programátoři embedded aplikací - jednočipové počítače, Beaglebone, Raspberry a podobně - mají často jen mlhavou představu o webových technikách. A platí to i naopak - vývojaři webových aplikací mají o možnostech hardware představy ještě matnější. Přitom oba světy už lze dnes propojit poměrně snadno.