HTML5 alapú fejlesztő és futtató környezet megvalósítása Óbudai Egyetem Neumann János Informatikai Kar Informatikai Rendszerek Intézet HTML5 alapú fejlesztő és futtató környezet megvalósítása Hallgató neve: Guttmann Krisztián Törzskönyvi száma: NIK-O-EI-06-028 Intézményi konzulens: Dr. Schubert Tamás

Probléma felvetése OOP alapú webes fejlesztőkörnyezet hiánya Fix, eseményvezérelt kommunikáció hiánya a böngésző és a szerverek között Kliensek (böngészők) terhelésének hiánya (szerverek tehermentesítése) Böngészőkre írt összetett alkalmazások nem jellemzőek (célalkalmazások, célhardverek)

Futtató környezet tervezése OOP alapú HTML5 alkalmazás fejlesztés Alapvető vezérlők megvalósítása, átlátható osztálydiagramm Fix eseményvezérelt kapcsolat a web szerver és a böngésző között Elosztott arhitektúrájú kliens (Mesh-up) Rendszer demonstrációja Web Szenzor hardver illetve szoftver segítségével

OOP alapú HTML5 web alkalmazás Osztály fogalmának bevezetése nyelvbe a JavaScript prototype property tulajdonságának segítségével extend függvény megvalósítása

OOP alapú HTML5 web alkalmazás function A() {} function B() {} B.prototype = new A; X = new B; var MyClass = Class.extend({ init: function() { }, prop1: 10, method1: function() {} });

Osztálydiagram

Folyamatjelző vezérlő 3 db HTML DIV Elem CSS3 stíluslap JavaScript kód var Progressbar = Div.extend({ init: function(p) { }, value: { get: function() { }, set: function(value) { } });

Fix, eseményvezérelt, kétirányú kommunikáció Kliens oldal Szerver oldal WebSocket API (RFC szabvány) Korszerű böngészők támogatják Saját webszerver Python HTTP Szerver (Korábban Chunked Response)

WebSocket implementáció Kérés Válasz GET /ws HTTP/1.1 Host: pmx Upgrade: websocket Connection: Upgrade Sec-WebSocket-Version: 6 Sec-WebSocket-Origin: http://pmx Sec-WebSocket-Extensions: deflate-stream Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

WebSocket támogatottság

Elosztott architektúra (Mesh-up) Honlap egy forrásból Webalkalmazás több forrásból

Elosztott architektúra (Mesh-up) A kívánt elosztott architektúrát a Same Origin Policy szabály ellehetetlenítené. (Ajax kérések, WebSocket felépítés) Megoldás: CORS (Cross-Origin Resource Sharing) Pl.: Access-Control-Allow-Origin: * (bármely domainről érkező kérés elfogadása)

Elosztott architektúra (Mesh-up) HTTP/1.1 200 OK Date: Sat, 24 Mar 2012 16:49:31 GMT Content-type: text/plain Access-Control-Allow-Origin : * Pragma: no-cache Connection: Keep-Alive Content-Length: 5 25 C°

Web Szenzor hardver PIC18F2685 ENC28J60 (PHY, MAC)

Web Szenzor hardver

Web Szenzor szoftver new (Application.extend({ init: function() { /* konstruktor */ this.base(); }, toggleLED0: function() { /* XMLHTTPRequest háttérben */ /* http://server.com?led0=ON */ } }))();

Web Szenzor szoftver

Köszönöm a figyelmet