Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bidirektionale Verbindungen für
Webanwendungen
JAX 2012, Mainz

Marco Rico Gomez
@mricog
Weigle Wilczek GmbH

Roman Roelof...
Agenda
➔

Warum … ?

➔

Wie … ?


Techniken



Bibliotheken

➔

Live Demo

➔

What's next …
Warum … ?
➔

moderne Webanwendungen ähneln immer mehr
RichClient-Applikationen




für derartige Anwendungen ist das HTT...
AJAX & Comet
AJAX (Asynchronous JavaScript and XML)

5
Comet (Server push)

6
Comet - Long-Polling
➔

Browser setzt eine AJAX Anfrage ab






bleibt geöffnet bis neue Daten vom Server gesendet
wer...
Comet - Streaming
➔

eine persistente HTTP Verbindung

➔

Daten werden inkrementell verarbeitet


➔

ohne die Verbindung ...
Comet - „Hacks“
➔

Nur 2 gleichzeitige persistente Verbindungen je Client
zu einem Server erlaubt (HTTP 1.1)


➔

Komplex...
HTML5 Server-Sent Event (SSE)

10
HTML5 Server-Sent Event (SSE)
➔

Unidirektionale Kommunikation Server->Client

➔

Client abonniert einen Stream

➔

➔

Bei...
SSE – JavaScript API
if (!!window.EventSource) {
var source = new EventSource('sse-stream.html');
} else {
// Result to xh...
SSE - Server-response
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
id: m...
SSE – Jetty EventSourceServlet
class StockEventServlet extends EventSourceServlet {
def newEventSource(request: HttpServle...
HTML5 WebSockets

15
HTML5 WebSockets
➔

➔

➔

„TCP für das Web“
bidirektionale Kommunikation über eine TCP
Verbindung
eliminiert „HTTP-Overhea...
WebSocket – Server (Java)

17
WebSocket – Handshake
➔

WebSocket Verbindung anfordern

➔

HTTP-Kompatibel


einfacher HTTP GET Request

18
WebSocket – Handshake (Client)
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebS...
WebSocket – Handshake (Server)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accep...
WebSocket – JavaScript API
var websocket = new WebSocket('ws://ws.example.com/chat', ['foo', 'bar']);
websocket.onopen = f...
WebSocket – Jetty WebSocketServlet
class ChatWebSocketServlet extends WebSocketServlet {
def doGet(request: HttpServletReq...
WebSocket – Jetty WebSocketServlet
class ChatWebSocket extends WebSocket {
private var outbound: Outbound = null
def onCon...
WebSocket – Probleme
➔

Wird (noch) nicht von allen Browsern unterstützt


➔

WebSocket-Handshake wird von einigen ProxyS...
Live Demo „Hello World“

25
Live Demo - Architektur

26
leon.io
27
What's next …

28
SPDY „http 2.0?“

29
SPDY

30
SPDY – spdy-jetty-http Modul
➔

SPDY wird von Jetty ab Version 7.6.2 und 8.1.2
unterstützt

➔

setzt OpenJDK 1.7+ voraus

...
SPDY – jetty-spdy.xml
<Configure id="Server" class="org.eclipse.jetty.server.Server">
...
<Call name="addConnector">
<Arg>...
Q &A

33
Upcoming SlideShare
Loading in …5
×

Bidirektionale Verbindungen für Webanwendungen

4,930 views

Published on

Vortrag "Bidirektionale Verbindungen für Webanwendungen" über Websocket und Server-Push Technologien auf der JAX 2012 in Mainz.

Published in: Technology
  • Be the first to comment

Bidirektionale Verbindungen für Webanwendungen

  1. 1. Bidirektionale Verbindungen für Webanwendungen JAX 2012, Mainz Marco Rico Gomez @mricog Weigle Wilczek GmbH Roman Roelofsen @romanroe
  2. 2. Agenda ➔ Warum … ? ➔ Wie … ?  Techniken  Bibliotheken ➔ Live Demo ➔ What's next …
  3. 3. Warum … ? ➔ moderne Webanwendungen ähneln immer mehr RichClient-Applikationen   für derartige Anwendungen ist das HTTP Protokoll nicht gemacht es braucht „Hacks“ bzw. Erweiterungen
  4. 4. AJAX & Comet
  5. 5. AJAX (Asynchronous JavaScript and XML) 5
  6. 6. Comet (Server push) 6
  7. 7. Comet - Long-Polling ➔ Browser setzt eine AJAX Anfrage ab    bleibt geöffnet bis neue Daten vom Server gesendet werden Daten werden in der „onreadystatechange“ CallbackFunktion verarbeitet neue Verbindung wird aufgebaut 7
  8. 8. Comet - Streaming ➔ eine persistente HTTP Verbindung ➔ Daten werden inkrementell verarbeitet  ➔ ohne die Verbindung zu schließen zwei Varianten:  „hidden iframe“  XMLHttpRequest ● Daten werden in der „onreadystatechange“ CallbackFunktion verarbeitet 8
  9. 9. Comet - „Hacks“ ➔ Nur 2 gleichzeitige persistente Verbindungen je Client zu einem Server erlaubt (HTTP 1.1)  ➔ Komplex  ➔ seit 2008 haben die meisten Browser jedoch auf 6 Verbindungen erweitert Bidirektionale Verbindung muss über zwei Kanäle simuliert werden HTTP–Overhead  Request-/ Response-Header 9
  10. 10. HTML5 Server-Sent Event (SSE) 10
  11. 11. HTML5 Server-Sent Event (SSE) ➔ Unidirektionale Kommunikation Server->Client ➔ Client abonniert einen Stream ➔ ➔ Bei neuen Ereignissen wird der Client benachrichtigt Verbindung bleibt geöffnet  geschlossene Verbindungen werden automatisch wieder geöffnet 11
  12. 12. SSE – JavaScript API if (!!window.EventSource) { var source = new EventSource('sse-stream.html'); } else { // Result to xhr polling :( } // new message callback function source.addEventListener('message', function(e) { console.log(e.data); }, false); // register open callback (optional) source.addEventListener('open', function(e) { ... }, false); // register error callback (optional) source.addEventListener('error', function(e) { ... }, false); // cancel source.close(); 12
  13. 13. SSE - Server-response HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive id: my-unique-connection-id event: foo data: This is the 1st line data: Here comes the 2nd line 13
  14. 14. SSE – Jetty EventSourceServlet class StockEventServlet extends EventSourceServlet { def newEventSource(request: HttpServletRequest) = new StockEventSource() } class StockEventSource extends EventSource { private var emitter: Emitter def onOpen(emitter: Emitter) { this.emitter = emitter } def emitEvent(data: String) { emitter.data(data) } def onClose() { /* NOP */ } } 14
  15. 15. HTML5 WebSockets 15
  16. 16. HTML5 WebSockets ➔ ➔ ➔ „TCP für das Web“ bidirektionale Kommunikation über eine TCP Verbindung eliminiert „HTTP-Overhead“ 16
  17. 17. WebSocket – Server (Java) 17
  18. 18. WebSocket – Handshake ➔ WebSocket Verbindung anfordern ➔ HTTP-Kompatibel  einfacher HTTP GET Request 18
  19. 19. WebSocket – Handshake (Client) GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: foo, bar Sec-WebSocket-Version: 13 19
  20. 20. WebSocket – Handshake (Server) HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: bar 20
  21. 21. WebSocket – JavaScript API var websocket = new WebSocket('ws://ws.example.com/chat', ['foo', 'bar']); websocket.onopen = function () { websocket.send('Ping'); // Send the message 'Ping' to the server }; // process new message from the server websocket.onmessage = function (e) { console.log('Server: ' + e.data); }; // register error callback function websocket.onerror = function (error) { ... } 21
  22. 22. WebSocket – Jetty WebSocketServlet class ChatWebSocketServlet extends WebSocketServlet { def doGet(request: HttpServletRequest, response: HttpServletResponse) {} def doPost(request: HttpServletRequest, response: HttpServletResponse) {} def doWebSocketConnect(request: HttpServletRequest, protocol: String) = new ChatWebSocket() // shared resource (thread-safe !!!) private val members = new CopyOnWriteArraySet<ChatWebSocket>() } class ChatWebSocket extends WebSocket { ... } 22
  23. 23. WebSocket – Jetty WebSocketServlet class ChatWebSocket extends WebSocket { private var outbound: Outbound = null def onConnect(outbound: Outbound) { this.outbound = outbound } def onMessage(frame: Byte, data: String) { for(member <- members) { member.outbound.sendMessage(data) } } } def onDisconnect() { members.remove(this) } 23
  24. 24. WebSocket – Probleme ➔ Wird (noch) nicht von allen Browsern unterstützt  ➔ WebSocket-Handshake wird von einigen ProxyServern unterbunden  ➔ daher Frameworks wie „Atmosphere“ verwenden, die einen automatischen „Fallback“ auf Comet bieten. „Connection: Upgrade“ wird nicht verstanden Low-Level API   Verbindungsabbrüche müssen selbst erkannt und repariert werden keine garantierte Verarbeitung von Nachrichten 24
  25. 25. Live Demo „Hello World“ 25
  26. 26. Live Demo - Architektur 26
  27. 27. leon.io 27
  28. 28. What's next … 28
  29. 29. SPDY „http 2.0?“ 29
  30. 30. SPDY 30
  31. 31. SPDY – spdy-jetty-http Modul ➔ SPDY wird von Jetty ab Version 7.6.2 und 8.1.2 unterstützt ➔ setzt OpenJDK 1.7+ voraus ➔ kann transparent aktiviert werden  keine Änderung der Applikation nötig 31
  32. 32. SPDY – jetty-spdy.xml <Configure id="Server" class="org.eclipse.jetty.server.Server"> ... <Call name="addConnector"> <Arg> <New class="org.eclipse.jetty.spdy.http.HTTPSPDYServerConnector"> <Arg> <Ref id="sslContextFactory" /> </Arg> <Set name="Port">8443</Set> </New> </Arg> </Call> </Configure> 32
  33. 33. Q &A 33

×