Aktuální vydání

celé číslo

12

2022

Automatizace výrobních, montážních a balicích strojů a linek

Elektrické, pneumatické a hydraulické pohony

celé číslo

Ukážka SOA s webovou službou a využitím metódy Ajax

Pavel Horovčák
 
V čísle 7/2008 časopisu Automa na str. 53–55 bol publikovaný článok Architektúra SOA, Ajax a webové služby. V tomto referáte autor naväzuje na obecné princípy, ktoré boli opísané v tomto článku, a uvádza jednoduchý príklad použitia, blízky priemyselnej praxi.
 

1. Príklad monitorovania procesu

Pre jednoduchosť uvažujme proces s dvoma monitorovanými veličinami – teplotou a tlakom, ktoré sú v pravidelných časových intervaloch merané a spolu s hodnotou času ukladané do databázovej tabuľky, ktorá má teda tri stĺpce (čas, teplota, tlak). Čas je pre zjednodušenie v podobe celého čísla (auto_increment). Na takto definovanom dátovom zdroji sa pokúsime jednoducho ilustrovať prístup SOA k vytváraniu služieb na báze webových služieb a ich kompozícii do výsledného riešenia v podobe klienta webovej služby, ilustrujeme využitie metódy Ajax a rovnako aj prístup SOA formou prepojenia metódy Ajax a webových služieb.
 

2. Štruktúra ukážkovej úlohy

Úloha pozostáva z niekoľkých spolupracujúcich častí, umiestnených na serveri klienta, na serveri webovej služby a na počítači s popisom webovej služby.
 
Popis webovej služby (WS) je uložený v súbore typu WSDL (Web Service Description Language), ktorý predstavuje spojovaciu časť medzi webovou službou (serverom) a jej klientom. Základným predpokladom úspešnej spolupráce klientskej a serverovej strany je správne zostavený súbor WSDL, ktorý je vždy umiestnený na inom serveri ako samotná webová služba (obr. 1). V našej ukážke je server služby umiestnený na serveri ccdec a súbor WSDL na serveri lipko. V súbore WSDL (obr. 2; súbor WSDL je dostupný na http://lipko.tuke.sk/~horovcak/php_ws/wsdl/temp.wsdl a obsahuje adresu URL webovej služby, čím umožní skriptu brána nadviazať komunikáciu so serverom webovej služby) sú štyri sekcie, ktoré špecifikujú parametre a návratové hodnoty jednotlivých funkcií servera (<message>), typ portu s názvami jednotlivých funkcií (<portType>, <operation>), väzby jednotlivých funkcií na typ portu (<binding>) a názov služby s uvedením URL serverovej strany služby (<service>).
 
Serverová časť úlohy (WS) zabezpečuje poskytovanie webovej služby jednotlivým klientom.
 
Klientska časť je tvorená troma súbormi – skriptami. Skript brána zabezpečuje obojsmerné prepojenie Ajax-klienta so serverom WS a takisto obojsmernú komunikáciu so súborom JavaScript. Súbor HTML je nositeľom formulára úlohy, kde prijíma vstup používateľa a zobrazuje výsledky. Súbor JavaScript zabezpečuje prenos vstupov z HTML na skript brána (to sú parametre WS) a spätný prenos výsledkov WS do formulára HTML.
 
Webová služba ukážky (súbor tempserver.php) je založená na databázovej tabuľke s troma stĺpcami. Nad touto tabuľkou definujeme päť rôznych funkcií podľa tab. 1. Volanie služby má teda tri parametre – rezim, od a do. Parameter rezim určuje konkrétnu funkciu, parametre od a do začiatok a koniec časového intervalu, hodnoty ktorého služba vracia (všetky, maximum alebo priemer). Pre hodnoty rezim 4 a 5 na hodnotách od, do nezáleží, ale pri volaní musia byť zadané (napr. 0, 0).
 
Každá funkcia má dve zložky. Prvá zložka (metóda getTemp()) realizuje príslušný výber hodnôt z tabuľky, druhá zložka (metóda createName()) z týchto hodnôt vytvára zodpovedajúcu štruktúru v XML, ktorá je následne odosielaná na klienta. V tejto ukážke vracia server webovej služby pre každú službu rovnakú štruktúru v XML (t. j. so všetkými stĺpcami tabuľky). Ak to situácia vyžaduje, je možné vytvárať vhodnú štruktúru XML individuálne pre každú konkrétnu službu. Pri vytvorení servera služby je uprednostňovaný objektový prístup, je však možné pracovať aj v štruktúrovanom modeli – na úrovni funkcií. Pri objektovom prístupe jedinou metódou (SoapServer->setClass()) sú zaradené všetky metódy danej triedy do súboru funkcií servera. Pri funkčnom prístupe je potrebné zaradiť každú funkciu do súboru funkcií servera príslušnou metódou (SoapServer->addFunction()) zvlášť. Situáciu ilustruje úryvok zdrojového kódu servera služby na obr. 3. Trieda Sluzba-Temp okrem konštruktora a deštruktora má dve spomínané metódy pre výber údajov z databázy a pre vytvorenie štruktúry XML.
 

3. Klientska časť úlohy

 

3.1 Skript v HTML

Samotná klientska časť úlohy (formulár) je vytvorená v HTML (popr. v PHP). Prijíma vstupné hodnoty od používateľa, odovzdáva ich príslušnej metóde JavaScriptu a po získaní odpovede webovej služby zobrazí správnym spôsobom odpoveď, vytvorenú v JavaScripte. Táto odpoveď sa zobrazuje vždy v konkrétnom (pomenovanom) vstupnom prvku alebo v prvku typu <div> alebo <span>. Zdrojový kód ilustruje obr. 4. Formulár umožňuje používateľovi vybrať jednu z pripravených funkcií webovej služby a odoslať tri parametre (rezim, param1, param2) súboru klienttempajax.js (obr. 6), konkrétne funkciu process(). Po získaní odpovede od webovej služby a jej spracovaní je príslušný výsledok zobrazený v elemente <div id="myDivElement" />, kde atribút id udáva jeho označenie (identifikáciu). Ukážka konkrétneho tvaru výstupu úlohy je na obr. 5, kde sú v jeho pravej časti znázornené aj jednotlivé voľby (element <select>) formulára.
 

3.2 JavaScript

Kód spojovacej časti v JavaScripte (súbor klienttempajax.js) predstavuje obr. 6. Funkcia process() je volaná z HTML pri každej zmene výberového poľa – parameter rezim. Prevezme zadané vstupné polia (tri parametre), vytvorí z nich dotazovací reťazec a prostredníctvom vytvoreného objektu XMLHttpRequest nadviaže spojenie so serverovou časťou označenou ako skript brána (obr. 1). Po úspešnom získaní odpovede vytvára z prijatej štruktúry XML zodpovedajúce elementy HTML s ich obsahmi, ktoré potom vhodne publikuje do príslušného pomenovaného elementu (funkciou innerHTML).
 
Tento prenos údajov zo servera môže byť orientovaný do jedného alebo viacerých elementov HTML. Podobne jeden objekt XMLHttpRequest môže obstarávať rôzne režimy komunikácie, alebo každej komunikácii môže byť priradený samostatný objekt XMLHttpRequest, popr. môže byť využívané celé pole týchto objektov. To všetko závisí na rozložení vstupných prvkov stránky, na koncepcii ich funkcií a na koncepcii asynchrónnej komunikácie medzi klientom a serverom. V našom prípade komunikáciu zabezpečuje jeden objekt XMLHttpRequest, ktorý odosiela na server vždy jednu trojicu vstupných parametrov a prijíma jednu alebo viac trojíc údajov z tabuľky.
 
Súbor klienttempajax.js je tvorený skupinou funkcií, ktoré budú popísané v poradí, v akom sa nachádzajú v súbore. Funkcia createXmlHttp RequestObject() vytvára inštanciu objektu XmlHttpRequest podľa typu prehliadača, ktorá zabezpečuje komunikáciu so skriptom brána. Funkcia createRequestString() zabezpečuje jednoduché spojenie troch reťazcov – parametrov volania skriptu brána. Funkcia process() vykonáva volanie skriptu brána (súbor tempbrana.php) a pri zmene jeho stavu (príchode odpovede webovej služby) volá funkciu handleRequestStateChange(), ktorá prekontroluje úspešnosť komunikácie a v prípade jej správnosti volá funkciu handleServerResponse(). Táto funkcia „rozoberá“ prijatú správu vo formáte XML s využitím DOM (Document Object Model) a vytvára z jej častí (v našom prípade <cas>, <temp>, <press>) príslušnú štruktúru v HTML (v našom prípade <table>). Následne je vytvorený prvok HTML zapísaný do príslušnej položky formulára pomocou funkcie innerHTML (myDiv.innerHTML). Posledná funkcia removeTable() má za úlohu „zmazať“ zapísané hodnoty z formulára.
 
Je potrebné poznamenať, že klientsky skript dostáva výsledok webovej služby vždy v tvare XML štruktúry odoslanej serverom (napr. pre funkciu posledné (aktuálne) hodnoty má tvar <response><data><cas>7. </cas><temp>85.00</temp><press>130.00. </press></data></response>), pre ktorú je potrebné vhodným spôsobom zabezpečiť zodpovedajúce zobrazenie. V našej ukážke je zobrazenie riešené s využitím kaskádového štýlu (súbor styles.css).
 

3.3 Spojovací skript brána

Spojovací skript brána zabezpečuje vlastné volanie webovej služby (konzumáciu) na základe znalosti jej rozhrania, ktoré poskytuje súbor WSDL služby (obr. 7), takže je vlastne klientom webovej služby. Výsledok volania webovej služby – funkcia getTemp() s príslušnými parametrami, získava skript v premennej $xm (vo formáte XML), ktorá je následne zapisovaná na obrazovku klienta úlohy, to znamená je vstupom súboru v JavaScripte. Pritom je dôležité správne nastavenie prehliadača (typ súboru text/xml, nedovoliť „kešovanie“ vzhľadom na kontinuálnu komunikáciu medzi formulárom a WS). Klientska časť webovej služby sa tak po doplnení o jednotlivé nastavenia prehliadača (pomocou hlavičiek header) stáva serverom JavaScriptu, ktorý zabezpečuje obojsmernú komunikáciu s využitím objektu XmlHttpRequest. Skript ďalej zabezpečuje preberanie vstupných parametrov ($_GET[]), vytvorenie komunikácie so serverom WS (premenná $my), volanie príslušnej funkcie WS s danými parametrami (premenná $xm) a jej odovzdanie na klienta Ajax (echo $xm).
 

4. Záver

V rámci zostavenej ukážky sme sa pokúsili naznačiť možnosti a výhody servisne orientovanej architektúry. Použitie Ajaxu zjednodušuje a zrýchľuje úlohu z používateľského hľadiska, pripojenie jednej alebo viacerých webových služieb do aplikácie je veľmi jednoduché. Naopak najmä prácnosť manuálneho zostavenia a ladenia súboru v JavaScripte narastá. Webové služby je možné kombinovať na úrovni úlohy, ako aj priamo na úrovni webovej služby. Ukážka zostavenej úlohy v prostredí PHP5 (technológia Ajax v spojení s WS) je dostupná na adrese: http://omega.tuke.sk/pavel.horovcak/php_ws/ajaxwsom/temp/klienttempajax.php
 
Úloha bola vypracovaná v rámci riešenia projektov VEGA 1/4194 /07 (L), VEGA 1/0194/08 (S) a VEGA 1/0365/08 (T).
 
doc. Ing. Pavel Horovčák, CSc.,
Ústav riadenia a informatizácie
výrobných procesov, fakulta BERG,
Technická univerzita v Košiciach
 
Tento článek, jako i předchozí s názvem Architektúra SOA, Ajax a webové služby, lektoroval Petr Klán, Ústav informatiky AV ČR, v. v. i., a Fakulta strojní, České vysoké učení technické v Praze.
 
Obr. 1. Štruktúra úlohy
Obr. 2. Kód súboru temp.wsdl
Obr. 3. Ukážka kódu servera webovej služby
Obr. 4. Klient úlohy s Ajaxom – kód súboru v HTML
Obr. 5. Výstup úlohy SOA (Ajax plus WS)
Obr. 6. Kód spojovacej časti v JavaScripte – súbor klienttempajax.js
Obr. 7. Spojovací skript brána (klienttempbrana.php)
 
Tab. 1. Význam a parametre webovej služby