AJAX und Comet - se.uni-hannover.dese.uni-hannover.de/priv/lehre_2010sommer_ · AJAX und Comet...

28.04.2010

AJAX und CometAJAX und Comet

WWW-Seminar

Steffen Platte

AJAX und Comet 228.04.2010

GliederungGliederung

1. Motivation

2. Klassische Webseiten

3. AJAX

4. Comet– AJAX Long Polling– Bosh

5. Zusammenfassung


MotivationMotivation

• „Multi page“-Webseiten-Modell führt zu hohen Wartezeiten zwischen Benutzerinteraktionen

• „Single page“-Webseiten-Modell: Es werden nur Daten vom Web-Server angefordert, um veraltete Teile der Webseite aktualisieren zu können

• Ziel: Webanwendungen auf Augenhöhe mit Desktopanwendungen, was Bedienbarkeit und insbesondere Reaktivität angeht

• Software as a Service (SaaS), die von jedem Rechner mit Internetverbindung aus erreichbar ist


Klassische Webseiten-ModelKlassische Webseiten-Model

• Benutzeraktion auf Webseite führt zu Anfrage an den Webserver

• Webserver verarbeitet die Anfrage

• Webserver generiert Antwort-Dokument und schickt es dem Client

• Browser verarbeitet und präsentiert Antwort

aus: http://www.adaptivepath.com/ideas/essays/archives/000385.php, April 2010


Klassische Webseiten – Zeitlicher AblaufKlassische Webseiten – Zeitlicher Ablauf

Benutzer muss warten



Klassische Webseiten – DemoKlassische Webseiten – Demo


AJAX – Zeitlicher AblaufAJAX – Zeitlicher Ablauf



AJAX – ModellAJAX – Modell

User's Browser

User's partial data model (JavaScript)

Clientapplication

Exitpage

Server

Usersession

User'sdata model

Shareddata model

BusinessLogic

Deliver client app

Frequentdata requests

Login

Logout

Originalgrafik aus: Crane, Pascarello, James: „Ajax in Action“, Manning, 2006, Kapitel 1.2


AJAX – HistorieAJAX – Historie

• 1996 führt Microsoft das <iframe>-Tag ein, die asynchrones Laden ohne Plugin ermöglicht

• 1999 führt Microsoft ActiveX-Komponente „XMLHTTP“ ein (seit IE5)

• Mozilla, Safari, Opera und weitere übernehmen diese als natives Objekt mit Namen „XMLHttpRequest“ (XHR)

• In 2005 steigt Bekanntheit durch Googles Webanwendungen

• Begriff AJAX wird 2005 geprägt durch Jesse James Garrett


Das XMLHttpRequest-ObjektDas XMLHttpRequest-Objekt

• Verbindungsaufbau• Senden• Ändern von Parametern

im Anfrage-Header• Behandeln von

Ereignissen mittels Callback-Funktion

• Auslesen der Antwort vom Server

aus: http://de.wikipedia.org/wiki/XMLHttpRequest, April 2010


AJAX – zu FußAJAX – zu Fuß

• Viele Fallunterscheidungen notwendig

aus: http://de.wikipedia.org/wiki/XMLHttpRequest, April 2010


AJAX – mit PrototypeAJAX – mit Prototype

• Eigenheiten verschiedener Browser gekapselt in JS-Library

• Entwickler muss nur URL und Callback-Funktionen angeben

aus: http://www.prototypejs.org/learn/introduction-to-ajax, April 2010


AJAX – DemoAJAX – Demo


AJAX – Netzwerk-TrafficAJAX – Netzwerk-Traffic

0 1 2 3 4 5 6 70

50000

100000

150000

200000

250000

300000

350000

400000

450000

AJAXKlassisch

Anzahl Requests

Ge

sen

det

e B

yte

s

angelehnt an: Crane, Pascarello, James: „Ajax in Action“, Manning, 2006, Kapitel 1.2


CometComet

• Häufig muss der Server dem Client in Echtzeit neue Ereignisse mitteilen („push“)

• Insbesondere in Multi-Benutzer-Webanwendungen wie Google Wave oder Meebo

• basierend auf AJAX

• Dabei muss mit den Beschränkungen von HTTP umgegangen werden

• Verschiedene Implementierungsmöglichkeiten, z.B.:– AJAX Long Polling– BOSH


Comet – ModellComet – Modell

aus: http://alex.dojotoolkit.org/2006/03/comet-low-latency-data-for-the-browser/, April 2010


AJAX Long Polling – AblaufAJAX Long Polling – Ablauf

• Client startet Anfrage an Server

• Server reagiert auf die Anfrage, wenn neue Ereignisse da sind

• Neue Ereignisse können sofort an den Client geschickt werden

• Server kann den Request offen halten oder schließen

• Nach Beenden des Requests oder bei Timeout der Verbindung startet der Client eine neue Anfrage

Client Server

new event

Requestupdates

Sendupdates

Requestupdates


AJAX Long Polling – QuelltextAJAX Long Polling – Quelltext

• Fehlerbehandlung ist wichtig, um den Server nicht mit Anfragen zu überfluten


Comet – BOSHComet – BOSH

• Bidirectional-streams Over Synchronous HTTP

• Ehemals HTTP-Binding, aus der Jabber-Community

• Bietet Proxy-Bypassing

• Kompatibel mit HTTP/1.0

• Polling-Modus als Fallback für Clients, die nur eine einzige HTTP-Verbindung aufbauen dürfen

• Fortsetzen der Session bei Verbindungsabbrüchen


BOSH – ArchitekturBOSH – Architektur

Server

Connection Manager

Client

unwrapped data streams

HTTP data streams


BOSH – AblaufBOSH – Ablauf

Connection Manager

Client

Long-standingrequest

Client sendetAnfrage

Server antwortetauf altem Request

Neuer Long-standingRequest


Comet – Benchmark (1)Comet – Benchmark (1)

• Durchschnittliche Dauer bis erzeugtes Ereignis beim Client ankommt für versch. Client-Anzahlen und Veröffentlichungsintervalle

• Push-Verfahren erheblich kürzere Verzögerungen

• Stetig zunehmende Veröffentlichungsdauer bei Push-Verfahren bedingt durch höhere Last bei vielen Clients

aus: Bozdag, Mesbah, Deursen: „A Comparison of Push and Pull Techniques for AJAX“, WSE '07: Proceedings of the 2007 9th IEEE International Workshop on Web Site Evolution, 2007



• durchschnittliche Anzahl der empfangenen Nachrichten bei verschiedenen Client-Anzahlen und Veröffentlichungsintervallen

• erfolglose Anfragen nach neuen Ereignissen zählen mit

• Pull-Client erzeugt unnötigen Netzwerkverkehr

• Push-Verfahren benötigt nicht mehr Nachrichten als erzeugte Ereignisse



time0 15 30 45 6050

Poll

no event

Poll Poll Poll Poll

no event no event no event event!

Client

Server

• Zur Entstehung der lilafarbenden Linie bei 100 Clients• Ereignis wird bei Sekunde 50 auf Server erzeugt• Client fragt alle 15 Sekunden nach neuen Ereignissen• 4 erfolglose Poll-Anfragen• 1 erfolgreiche Poll-Anfrage


Comet – Weitere TechnologienComet – Weitere Technologien

• Bayeux– Protokoll-Spezifikation für die Comet-Technologie– Verwendet AJAX Long Polling– Client muss sich zu Beginn beim Server registrieren– Client kann sich dann für Channel anmelden, über die Ereignisse

verteilt werden

• WebSockets– Teil von HTML5, schon unterstützt von Google Chrome– Client und Server können eine full-duplex Verbindung über das

WebSocket-Protokoll aufbauen– Kann AJAX und Comet vollständig ersetzen


Praktiken des Software EngineeringPraktiken des Software Engineering

• Usability– Software soll gut bedienbar sein– Klassische Webseiten haben eine schlechte Benutzbarkeit– Entwicklung von AJAX und Comet soll die Reaktivität der

Webanwendung verbessern

• Comet ist eine Best Practice– Implementierung einer Push-Methode mit den Beschränkungen durch

HTTP– Es ist evolutionär gewachsen und verbessert worden– Daraus entstanden Spezifikationen, die nun standardisiert werden

sollen (BOSH, Bayeux)

• Häufig benutzen Quelltext in Bibliotheken auslagern, wo er zentral gepflegt werden kann


Kritische Würdigung (1)Kritische Würdigung (1)

• AJAX und Comet erhöhen die Reaktivität von Webanwendungen und verbessern die Benutzbarkeit

• Implementierungsaufwand ist höher, wird aber abgemildert durch JavaScript-Bibliotheken wie jQuery

• AJAX ist auf jedem modernen Browser ohne Installation von Plugins (z.B. Flash oder Java) verfügbar

• Dennoch sollte es ein Fallback geben für Clients ohne AJAX-Unterstützung


Kritische Würdigung (2)Kritische Würdigung (2)

• Neue Anforderungen an die Benutzeroberfläche. Benutzer muss z.B. Rückmeldung erhalten, dass noch AJAX-Anfragen im Hintergrund laufen

• „Zurück“-Button ist nicht mehr ohne Weiteres wie gewohnt verwenbar

• Comet reduziert Netzwerkverkehr und Last auf dem Server im Vergleich zu einem pollenden Client

• Comet ermöglich das Versenden von Ereignissen an den Client in Echtzeit


ZusammenfassungZusammenfassung

• Klassische Webseiten verursachen lange Wartezeiten durch häufiges Laden kompletter Dokumente

• Mit AJAX können aktualisierte Daten im Hintergrund abgefragt und in die aktuell gezeigte Seite eingepflegt werden

• Comet ermöglicht dem Server, aufgetretene Ereignisse in Echtzeit an den Client zu schicken

• AJAX und Comet sind technisch ausgereifte und bewährte Technologien

• Es gilt, das volle Potenzial auszuschöpfen und neue Einsatzgebiete zu finden

AJAX und Comet - se.uni-hannover.dese.uni-hannover.de/priv/lehre_2010sommer_ · AJAX und Comet...

Documents

Transcript of AJAX und Comet - se.uni-hannover.dese.uni-hannover.de/priv/lehre_2010sommer_ · AJAX und Comet...