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

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

Guttmann Krisztián

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 aböngésző között

Elosztott arhitektúrájú kliens (Mesh-up)

Rendszer demonstrációja Web Szenzor hardver illetveszoftver segítségével

Futtató környezet tervezése

OOP alapú HTML5 web alkalmazás

Osztály fogalmánakbevezetése nyelvbe aJavaScript prototypeproperty tulajdonságánaksegítségével

extend függvénymegvaló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

WebSocket API (RFC szabvány)

Korszerű böngészőktámogatják

Szerver oldal

Saját webszerver

Python HTTP Szerver

(Korábban Chunked Response)

WebSocket implementáció

Kérés

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==

Válasz

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

A kívánt elosztott architektúrát a Same Origin Policyszabály ellehetetlenítené. (Ajax kérések, WebSocketfelé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)

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)

JDE - circuit

Web Szenzor hardver

$C:\Documents and Settings\szakdoga\My Documents\Letöltések\20130424_171457.jpg$

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

Web Szenzor szoftver

Web Szenzor szoftver

GuttmannKrisztiánOTDKdolgozat_html_md3882c8

Köszönettel

Guttmann Krisztián