HTML5 alapú fejlesztő és futtató környezet megvalósítása Guttmann Krisztián

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önettel Guttmann Krisztián