SlideShare ist ein Scribd-Unternehmen logo
1 von 33
Bidirektionale Verbindungen für
Webanwendungen
JAX 2012, Mainz

Marco Rico Gomez
@mricog
Weigle Wilczek GmbH

Roman Roelofsen
@romanroe
Agenda
➔

Warum … ?

➔

Wie … ?


Techniken



Bibliotheken

➔

Live Demo

➔

What's next …
Warum … ?
➔

moderne Webanwendungen ähneln immer mehr
RichClient-Applikationen




für derartige Anwendungen ist das HTTP Protokoll
nicht gemacht
es braucht „Hacks“ bzw. Erweiterungen
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
werden
Daten werden in der „onreadystatechange“ CallbackFunktion verarbeitet
neue Verbindung wird aufgebaut

7
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
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
HTML5 Server-Sent Event (SSE)

10
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
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
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
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
HTML5 WebSockets

15
HTML5 WebSockets
➔

➔

➔

„TCP für das Web“
bidirektionale Kommunikation über eine TCP
Verbindung
eliminiert „HTTP-Overhead“

16
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-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: foo, bar
Sec-WebSocket-Version: 13

19
WebSocket – Handshake (Server)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: bar

20
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
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
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
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
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

➔

kann transparent aktiviert werden


keine Änderung der Applikation nötig

31
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
Q &A

33

Weitere ähnliche Inhalte

Was ist angesagt?

Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Florian Holzhauer
 
Internet Information Services (deutsch)
Internet Information Services (deutsch)Internet Information Services (deutsch)
Internet Information Services (deutsch)Joerg Krause
 
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...OPEN KNOWLEDGE GmbH
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch CachingAOE
 
Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Dennis Oderwald
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Intro to scaling Databases
Intro to scaling DatabasesIntro to scaling Databases
Intro to scaling DatabasesHeiko Seebach
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroidsBlogwerk AG
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHPFrank Kleine
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEARCH ONE
 
Exchange 2013 Migration
Exchange 2013 MigrationExchange 2013 Migration
Exchange 2013 MigrationGWAVA
 
Tipps zur Performanceoptimierung für Liferay Portal
Tipps zur  Performanceoptimierung für Liferay PortalTipps zur  Performanceoptimierung für Liferay Portal
Tipps zur Performanceoptimierung für Liferay PortalStefan Hilpp
 

Was ist angesagt? (16)

Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012Varnish PHP Unconference Hamburg 2012
Varnish PHP Unconference Hamburg 2012
 
Internet Information Services (deutsch)
Internet Information Services (deutsch)Internet Information Services (deutsch)
Internet Information Services (deutsch)
 
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
Rufen Sie nicht an – wir rufen Sie an! | Server-sent Events und Web-Sockets i...
 
Dockerize It - Mit apex in die amazon cloud
Dockerize It - Mit apex in die amazon cloudDockerize It - Mit apex in die amazon cloud
Dockerize It - Mit apex in die amazon cloud
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
 
Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016Startups in „Die Höhle der Löwen“ - SEODAY 2016
Startups in „Die Höhle der Löwen“ - SEODAY 2016
 
Java Servlets und AJAX
Java Servlets und AJAX Java Servlets und AJAX
Java Servlets und AJAX
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Intro to scaling Databases
Intro to scaling DatabasesIntro to scaling Databases
Intro to scaling Databases
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroids
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Rest
RestRest
Rest
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
Wordpress Security
Wordpress SecurityWordpress Security
Wordpress Security
 
Exchange 2013 Migration
Exchange 2013 MigrationExchange 2013 Migration
Exchange 2013 Migration
 
Tipps zur Performanceoptimierung für Liferay Portal
Tipps zur  Performanceoptimierung für Liferay PortalTipps zur  Performanceoptimierung für Liferay Portal
Tipps zur Performanceoptimierung für Liferay Portal
 

Ähnlich wie Bidirektionale Verbindungen für Webanwendungen

Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Kai Donato
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoOliver Lemm
 
HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?JanWeinschenker
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht SkriptsprachenA. LE
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and PollingKai Donato
 
HTTP und Java Servlets Programmierung
HTTP und Java Servlets ProgrammierungHTTP und Java Servlets Programmierung
HTTP und Java Servlets ProgrammierungChristian Baranowski
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungAndreas Roth
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?GFU Cyrus AG
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungAndreas Roth
 
Apple iOS - Webservices
Apple iOS - WebservicesApple iOS - Webservices
Apple iOS - Webservicesmesseb
 
MK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas HahnMK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas HahnVerein FM Konferenz
 
Hypermedia mit der ASP.NET Web API
Hypermedia mit der ASP.NET Web APIHypermedia mit der ASP.NET Web API
Hypermedia mit der ASP.NET Web APIAlexander Zeitler
 
Making the internet faster HTTP/3 und QUIC
Making the internet faster HTTP/3 und QUICMaking the internet faster HTTP/3 und QUIC
Making the internet faster HTTP/3 und QUICQAware GmbH
 
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Manfred Steyer
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
MVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichMVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichThomas Kraehe
 
XML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit FlashXML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit FlashStephan Schmidt
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!Kai Donato
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG
 

Ähnlich wie Bidirektionale Verbindungen für Webanwendungen (20)

Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & Co
 
HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?HTTP/2 – Ist das auch gut für java-basierte Webservices?
HTTP/2 – Ist das auch gut für java-basierte Webservices?
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
HTTP und Java Servlets Programmierung
HTTP und Java Servlets ProgrammierungHTTP und Java Servlets Programmierung
HTTP und Java Servlets Programmierung
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und Implementierung
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 
Sockets – Theorie und Implementierung
Sockets – Theorie und ImplementierungSockets – Theorie und Implementierung
Sockets – Theorie und Implementierung
 
Apple iOS - Webservices
Apple iOS - WebservicesApple iOS - Webservices
Apple iOS - Webservices
 
MK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas HahnMK2014 FileMaker Server 13 by Thomas Hahn
MK2014 FileMaker Server 13 by Thomas Hahn
 
Hypermedia mit der ASP.NET Web API
Hypermedia mit der ASP.NET Web APIHypermedia mit der ASP.NET Web API
Hypermedia mit der ASP.NET Web API
 
Making the internet faster HTTP/3 und QUIC
Making the internet faster HTTP/3 und QUICMaking the internet faster HTTP/3 und QUIC
Making the internet faster HTTP/3 und QUIC
 
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
MVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichMVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreich
 
XML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit FlashXML-Socket-Server zur Kommunikation mit Flash
XML-Socket-Server zur Kommunikation mit Flash
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
 

Bidirektionale Verbindungen für Webanwendungen

  • 1. Bidirektionale Verbindungen für Webanwendungen JAX 2012, Mainz Marco Rico Gomez @mricog Weigle Wilczek GmbH Roman Roelofsen @romanroe
  • 2. Agenda ➔ Warum … ? ➔ Wie … ?  Techniken  Bibliotheken ➔ Live Demo ➔ What's next …
  • 3. Warum … ? ➔ moderne Webanwendungen ähneln immer mehr RichClient-Applikationen   für derartige Anwendungen ist das HTTP Protokoll nicht gemacht es braucht „Hacks“ bzw. Erweiterungen
  • 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. 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. 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
  • 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. 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. 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. 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
  • 16. HTML5 WebSockets ➔ ➔ ➔ „TCP für das Web“ bidirektionale Kommunikation über eine TCP Verbindung eliminiert „HTTP-Overhead“ 16
  • 17. WebSocket – Server (Java) 17
  • 18. WebSocket – Handshake ➔ WebSocket Verbindung anfordern ➔ HTTP-Kompatibel  einfacher HTTP GET Request 18
  • 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. WebSocket – Handshake (Server) HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: bar 20
  • 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. 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. 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. 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. Live Demo „Hello World“ 25
  • 26. Live Demo - Architektur 26
  • 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. 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

Hinweis der Redaktion

  1. seit 2005 wird die Technologie unter diesem Namen verwendet Konzept der asynchronen Datenübertragung ermöglicht es, HTTP-Anfragen durchzuführen, während eine HTML-Seite angezeigt wird. Somit kann die Seite verändert werden, ohne sie komplett neu zu laden. Restriktion: Nur Client kann aktiv Anfragen durchführen.
  2. Begriff wurde erstmals 2006 von Alex Russell geprägt erste Comet Applikationen wie Google Chat und später Google Docs.
  3. Jetty 7.x und 8.x (via WebSocketServlet) Tomcat 7.x (via WebSocketServlet) jWebSocket Server (standalone)