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
AJAX und Comet 328.04.2010
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
AJAX und Comet 428.04.2010
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
AJAX und Comet 528.04.2010
Klassische Webseiten – Zeitlicher AblaufKlassische Webseiten – Zeitlicher Ablauf
Benutzer muss warten
aus: http://www.adaptivepath.com/ideas/essays/archives/000385.php, April 2010
AJAX und Comet 628.04.2010
Klassische Webseiten – DemoKlassische Webseiten – Demo
AJAX und Comet 728.04.2010
AJAX – Zeitlicher AblaufAJAX – Zeitlicher Ablauf
aus: http://www.adaptivepath.com/ideas/essays/archives/000385.php, April 2010
AJAX und Comet 828.04.2010
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 und Comet 928.04.2010
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
AJAX und Comet 1028.04.2010
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 und Comet 1128.04.2010
AJAX – zu FußAJAX – zu Fuß
• Viele Fallunterscheidungen notwendig
aus: http://de.wikipedia.org/wiki/XMLHttpRequest, April 2010
AJAX und Comet 1228.04.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 und Comet 1328.04.2010
AJAX – DemoAJAX – Demo
AJAX und Comet 1428.04.2010
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
AJAX und Comet 1528.04.2010
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
AJAX und Comet 1628.04.2010
Comet – ModellComet – Modell
aus: http://alex.dojotoolkit.org/2006/03/comet-low-latency-data-for-the-browser/, April 2010
AJAX und Comet 1728.04.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 und Comet 1828.04.2010
AJAX Long Polling – QuelltextAJAX Long Polling – Quelltext
• Fehlerbehandlung ist wichtig, um den Server nicht mit Anfragen zu überfluten
AJAX und Comet 1928.04.2010
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
AJAX und Comet 2028.04.2010
BOSH – ArchitekturBOSH – Architektur
Server
Connection Manager
Client
unwrapped data streams
HTTP data streams
AJAX und Comet 2128.04.2010
BOSH – AblaufBOSH – Ablauf
Connection Manager
Client
Long-standingrequest
Client sendetAnfrage
Server antwortetauf altem Request
Neuer Long-standingRequest
AJAX und Comet 2228.04.2010
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
AJAX und Comet 2328.04.2010
Comet – Benchmark (2)Comet – Benchmark (2)
• 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
AJAX und Comet 2428.04.2010
Comet – Benchmark (3)Comet – Benchmark (3)
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
AJAX und Comet 2528.04.2010
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
AJAX und Comet 2628.04.2010
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
AJAX und Comet 2728.04.2010
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
AJAX und Comet 2828.04.2010
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
AJAX und Comet 2928.04.2010
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 3028.04.2010