SlideShare ist ein Scribd-Unternehmen logo
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 1 / 16© SpeedPartner GmbH
Websockets:
Leichtgewichtige Verbindungen
für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 2 / 16© SpeedPartner GmbH
Über mich
● Stefan Neufeind
● Mit-Geschäftsführer der SpeedPartner GmbH aus Neuss
ein Internet-Service-Provider (ISP)
● Individuelle TYPO3-Entwicklungen
● Hosting, Housing, Managed Services
● Domains / Domain-Services
● IPv6, DNSSEC, ...
● Aktive Mitarbeit im Community-Umfeld (PHP/PEAR, TYPO3, Linux)
● Freier Autor für z.B. t3n, iX, video2brain, ...
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 3 / 16© SpeedPartner GmbH
GET /2013/ HTTP/1.1
Host: www.linuxtag.org
Accept-Language: de,en;q=0.7,en-us;q=0.3
Accept-Encoding: gzip, deflate
[...]
„Klassische“ Kommunikation im WWW
Klassischer Fall für eine direkte http-Anfrage
1) Verbindung aufbauen
2) Anfrage senden
3) Antwort erhalten
4) Verbindung abbauen
HTTP/1.1 200 OK
Date: Sat, 25 May 2013 14:01:00 GMT
Content-Length: 245
Content-Type: text/html; charset=utf-8
[...]
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 4 / 16© SpeedPartner GmbH
„Klassische“ Kommunikation im WWW
Einschränkungen bei klassischem http/https:
● Reines Anfrage-Antwort-Modell
● Kommunikation muss durch den Client ausgelöst werden
● Server kann nur eine einzige, unmittelbare Antwort liefern
● Verzögerungen durch z.B. Verbindungsaufbau / -abbau
Wünschenswert:
● Flexibilität
● Kommunikation durch Client oder Server
● Gesteuert durch Anforderungen (z.B. Ereignisse)
statt Anfrage-Antwort
● Effizienz
● Geringer Overhead
● Vermeidung/Reduzierung von Verzögerungen
Lösungsansätze:
● Polling
● Mehrteilige HTTP-Antworten
(„multipart“)
● Keepalive
● Alternative Techniken/
Protokolle (???)
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 5 / 16© SpeedPartner GmbH
„Klassische“ Kommunikation im WWW
Lösungsansätze:
● Polling
● Neuladen durch Client initiiert
● ggf. in einem frame/iframe oder per AJAX
● Mehrteilige HTTP-Antworten („multipart“)
● Server hält Verbindung offen und behält die Steuerung
● ggf. in einem frame/iframe
● Bei kleinen Datenmengen/Nachrichten großer Overhead
● Keepalive
● Nachwievor einzelne Requests notwendig
● Reduziert jedoch den Overhead für Verbindungsaufbau etc.
● Alternative Techniken/Protokolle
● Nutzung von z.B. Java oder Flash
● Kommunikation an http/https „vorbei“
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 6 / 16© SpeedPartner GmbH
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:
dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, talk
Sec-WebSocket-Version: 13
Kommunikation per Websockets
Verlauf einer Websocket-Verbindung
1) Verbindung aufbauen
2) Anfrage senden
3) Antwort erhalten
4) Nutzung Websocket-Kanal
5) Verbindung abbauen
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:
S3pPLMBiTxaQ9kYG
zzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 7 / 16© SpeedPartner GmbH
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:
dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, talk
Sec-WebSocket-Version: 13
Kommunikation per Websockets
Verlauf einer Websocket-Verbindung
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:
S3pPLMBiTxaQ9kYG
zzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
Nach Request Upgrade der
Verbindung auf direkte Kommunikation
Eindeutiger Key pro Request,
üblicherweise UUID (128-bit)
Bestätigung des Upgrade Accept-Antwort durch Verknüpfung einer
festen GUID mit dem eindeutigen Key generiert
function key2accept($key) {
$guid = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
$composed = $key . $guid;
$hashed = sha1($composed, TRUE);
return base64_encode($hashed);
}
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 8 / 16© SpeedPartner GmbH
Kommunikation per Websockets
Verbindungsaufbau:
● Protokollprefixe „ws://“ (http, Port 80, unverschlüsselt)
und „wss://“ (https, Port 443, verschlüsselt)
● Falls Proxy-Konfiguration auf Client erkannt Verwendung von „HTTP CONNECT“ für Tunnel
● Proxy-Support:
● https generell problemfreier als http (keine Prüfung der TLS-Inhalte durch Proxy)
● http erfordert für „HTTP Upgrade“ evtl. spezielle Konfiguration
● Sobald „HTTP Upgrade“ erkannt Durchleitung von Datenverkehr (passthrough, pipe)
● Nginx 1.4.0 (4/2013): Websocket-Support wird als „Feature“
● Varnish: Konfiguration einer Durchleitung per „pipe“ ausreichend
(https://www.varnish-cache.org/docs/3.0/tutorial/websockets.html)
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 9 / 16© SpeedPartner GmbH
Kommunikation per Websockets
Protokollversionen beachten:
● Hixie-75: 2/2010
Chrome 4, Safari 5.0.0
● Hixie-76, hybi-00: 5/2010
Chrome 6, Safari 5.0.1, Firefox 4 + Opera 11.00 (standardmäßig deaktiviert)
● Hybi-07: 4/2011
Firefox 6
● Hybi-10: 7/2011
Firefox 7 (PC + Android), Chrome 14
● RFC 6455: 12/2011
IE 10, Firefox 11 (PC + Android), Chrome 16, Safari 6, Opera 12.10
Quelle Übersicht: http://en.wikipedia.org/wiki/WebSocket
● Versionen untereinander teils stark inkompatibel (Header, Keys, ...)
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 10 / 16© SpeedPartner GmbH
Websockets vs. WebRTC ?
Unterschiedliche Ansätze:
● Websockets:
Kommunikation zwischen Client und Server
● WebRTC:
Realtime-Kommunikation zwischen Clients (P2P)
● Bereits in 2010: Demo für Client-Server-Videokonferenz per MediaStreamTransceiver
● Bisher keine allgemeine Lösung für Audio/Video per Websockets verfügbar
● WebRTC kann Websockets zum Verbindungsaufbau und Statusaustausch nutzen
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 11 / 16© SpeedPartner GmbH
Websocket auf dem Client
Native Nutzung per JavaScript möglich:
try{
var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
var socket = new WebSocket(host);
message('<p class="event">Socket Status: '+socket.readyState);
socket.onopen = function(){
message('<p class="event">Socket Status: '+socket.readyState+' (open)');
}
socket.onmessage = function(msg){
message('<p class="message">Received: '+msg.data);
}
socket.onclose = function(){
message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
}
} catch(exception){
message('<p>Error'+exception);
}
0 = CONNECTING
1 = OPEN
2 = CLOSED
Quelle: http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 12 / 16© SpeedPartner GmbH
Unterstützung durch Frameworks
z.B. per Socket.IO: http://socket.io/
● Server (Node.js) sowie Client
● Fallbacks-Lösungen für auch für ältere Browser
● WebSocket
● Adobe Flash Socket
● AJAX long polling
● AJAX multipart streaming
● Forever Iframe
● JSONP Polling
● Breite Browser-Unterstützung:
● Internet Explorer 5.5+
● Safari 3+
● Google Chrome 4+
● Firefox 3+
● Opera 10.61+
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 13 / 16© SpeedPartner GmbH
Unterstützung durch Frameworks
z.B. per Wrench: http://wrench.readthedocs.org/en/latest/
● Server (PHP)
● Client nativ
z.B. per Ratchet: http://socketo.me/
● Server (PHP)
● Client nativ; Flash-Fallback z.B. per web-socket-js (https://github.com/gimite/web-socket-js)
#!/usr/bin/env php
<?php
require(__DIR__ . '/lib/SplClassLoader.php');
$classLoader = new SplClassLoader('Wrench', __DIR__ . '/lib');
$classLoader->register();
$server = new WrenchServer('ws://0.0.0.0:8080/', array(
'allowed_origins' => array('bohuco.net'),
));
$server->registerApplication('echo', new WrenchApplicationEchoApplication());
$server->run();
Quelle Übersicht: http://bohuco.net/blog/2012/12/wrench-the-new-html5-websocket-class-hero-for-php/
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 14 / 16© SpeedPartner GmbH
VNC-Client mit Websockets
noVNC: http://kanaka.github.io/noVNC/
● Nutzung von Websockets und Canvas
● Verschlüsselte Übertragung
● Keine Plugins o.ä. erforderlich
● Verwendung z.B. innerhalb
des Ganeti Web Manager
(https://code.osuosl.org/projects/51/wiki/VNC)
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 15 / 16© SpeedPartner GmbH
Fazit
Vorteile:
● Flexible Möglichkeit zur Kommunikation
● Geringe Datenmenge
● Geringe Last für Server und Client (im Gegensatz zu Polling)
● Direkte Möglichkeit für Rückmeldungen durch den Server (dauerhafte Verbindung)
Kritik:
● Browser-Unterstützung noch nicht „überall“ gegeben
● Unterschiedliche Protokollversionen (ältere Browser)
● Security bei „Passthrough“-Verbindungen (?)
Lösungen/Kompromisse:
● Nutzung von Frameworks mit „Fallback-Lösungen“
● Nutzung in kontrollierter Client-Umgebung (Intranet, ...)
Websockets: Leichtgewichtige Verbindungen
LinuxTag 2013, 25.05.2013
Seite: 16 / 16© SpeedPartner GmbH
Kontakt
Danke fürs Zuhören
sowie
viel Erfolg beim Testen
Link zu den Slides: http://talks.speedpartner.de/
Bei Fragen stehen wir selbstverständlich gerne zur Verfügung:
Stefan Neufeind, neufeind@speedpartner.de
SpeedPartner GmbH, http://www.speedpartner.de/

Weitere ähnliche Inhalte

Was ist angesagt?

HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
Renate Hermanns
 
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
Verein FM Konferenz
 
Vagrant - Einführung & Verwendung
Vagrant - Einführung & VerwendungVagrant - Einführung & Verwendung
Vagrant - Einführung & Verwendung
Tilo Baller
 
Internet Information Services (deutsch)
Internet Information Services (deutsch)Internet Information Services (deutsch)
Internet Information Services (deutsch)
Joerg Krause
 
Inside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddlerInside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddler
Max Nowack
 
Single Sign-On Technologieüberblick
Single Sign-On TechnologieüberblickSingle Sign-On Technologieüberblick
Single Sign-On TechnologieüberblickBelsoft
 
Ausfallsichere Kultur mit Plone
Ausfallsichere Kultur mit PloneAusfallsichere Kultur mit Plone
Ausfallsichere Kultur mit Plone
Jens Klein
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
IBM License Metric Tool 9.2.x (edcom 2017)
IBM License Metric Tool 9.2.x (edcom 2017)IBM License Metric Tool 9.2.x (edcom 2017)
IBM License Metric Tool 9.2.x (edcom 2017)
Novakenstein
 
TYPO3 Performance (TYPO3camp München)
TYPO3 Performance (TYPO3camp München)TYPO3 Performance (TYPO3camp München)
TYPO3 Performance (TYPO3camp München)
Marcus Schwemer
 
Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...
Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...
Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...
KH F
 
Realtime Web Applications with jWebSocket
Realtime Web Applications with jWebSocketRealtime Web Applications with jWebSocket
Realtime Web Applications with jWebSocket
Innotrade GmbH, jWebSocket.org, Alexander Schulze
 
TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-ProjektenTYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
Alex Kellner
 

Was ist angesagt? (14)

OpenWRT
OpenWRTOpenWRT
OpenWRT
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 
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
 
Vagrant - Einführung & Verwendung
Vagrant - Einführung & VerwendungVagrant - Einführung & Verwendung
Vagrant - Einführung & Verwendung
 
Internet Information Services (deutsch)
Internet Information Services (deutsch)Internet Information Services (deutsch)
Internet Information Services (deutsch)
 
Inside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddlerInside HTTP: Webdebugging mit FIddler
Inside HTTP: Webdebugging mit FIddler
 
Single Sign-On Technologieüberblick
Single Sign-On TechnologieüberblickSingle Sign-On Technologieüberblick
Single Sign-On Technologieüberblick
 
Ausfallsichere Kultur mit Plone
Ausfallsichere Kultur mit PloneAusfallsichere Kultur mit Plone
Ausfallsichere Kultur mit Plone
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
IBM License Metric Tool 9.2.x (edcom 2017)
IBM License Metric Tool 9.2.x (edcom 2017)IBM License Metric Tool 9.2.x (edcom 2017)
IBM License Metric Tool 9.2.x (edcom 2017)
 
TYPO3 Performance (TYPO3camp München)
TYPO3 Performance (TYPO3camp München)TYPO3 Performance (TYPO3camp München)
TYPO3 Performance (TYPO3camp München)
 
Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...
Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...
Parallele Installation von Ubuntu 16.04 Linux mit MS Windows 10 auf einem Not...
 
Realtime Web Applications with jWebSocket
Realtime Web Applications with jWebSocketRealtime Web Applications with jWebSocket
Realtime Web Applications with jWebSocket
 
TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-ProjektenTYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
 

Ähnlich wie Websockets: Leichtgewichtige Verbindungen für Web-Applikationen

Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
Jürg Stuker
 
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Christian Wenz
 
Domino HTTP Security - Neuerungen
Domino HTTP Security - NeuerungenDomino HTTP Security - Neuerungen
Domino HTTP Security - Neuerungen
Belsoft
 
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit VagrantDeployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
Christoph Möller
 
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
kaftanenko
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Sametime & Websphere Best Practices (Admincamp 2013)
Sametime & Websphere Best Practices (Admincamp 2013)Sametime & Websphere Best Practices (Admincamp 2013)
Sametime & Websphere Best Practices (Admincamp 2013)
Novakenstein
 
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen EinsatzSicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
SpeedPartner GmbH
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
SEARCH ONE
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
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
QAware GmbH
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
Microsoft WebApi & SignalR
Microsoft WebApi & SignalRMicrosoft WebApi & SignalR
Microsoft WebApi & SignalR
Robin Sedlaczek
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
Jakob
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
Jürg Stuker
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
Ulrich Krause
 
Synology Workshop07 06
Synology Workshop07 06Synology Workshop07 06
Synology Workshop07 06
Jens-Christian Fischer
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 

Ähnlich wie Websockets: Leichtgewichtige Verbindungen für Web-Applikationen (20)

Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
 
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
 
Domino HTTP Security - Neuerungen
Domino HTTP Security - NeuerungenDomino HTTP Security - Neuerungen
Domino HTTP Security - Neuerungen
 
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit VagrantDeployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
 
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
Einführung in die Java-Webentwicklung - Part I - Einführung, HTTP (in german)
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Sametime & Websphere Best Practices (Admincamp 2013)
Sametime & Websphere Best Practices (Admincamp 2013)Sametime & Websphere Best Practices (Admincamp 2013)
Sametime & Websphere Best Practices (Admincamp 2013)
 
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen EinsatzSicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
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
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Microsoft WebApi & SignalR
Microsoft WebApi & SignalRMicrosoft WebApi & SignalR
Microsoft WebApi & SignalR
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
Synology Workshop07 06
Synology Workshop07 06Synology Workshop07 06
Synology Workshop07 06
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 

Mehr von SpeedPartner GmbH

Extbase/Fluid: Kennenlernen und ausprobieren
Extbase/Fluid: Kennenlernen und ausprobierenExtbase/Fluid: Kennenlernen und ausprobieren
Extbase/Fluid: Kennenlernen und ausprobieren
SpeedPartner GmbH
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
SpeedPartner GmbH
 
Secure PHP environment
Secure PHP environmentSecure PHP environment
Secure PHP environment
SpeedPartner GmbH
 
XUL - The future of user-interfaces on the web
XUL - The future of user-interfaces on the webXUL - The future of user-interfaces on the web
XUL - The future of user-interfaces on the web
SpeedPartner GmbH
 
PHP-Applikationen mit PEAR
PHP-Applikationen mit PEARPHP-Applikationen mit PEAR
PHP-Applikationen mit PEAR
SpeedPartner GmbH
 
PHP-Entwicklung mit PEAR
PHP-Entwicklung mit PEARPHP-Entwicklung mit PEAR
PHP-Entwicklung mit PEAR
SpeedPartner GmbH
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
SpeedPartner GmbH
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
SpeedPartner GmbH
 
News from PEAR
News from PEARNews from PEAR
News from PEAR
SpeedPartner GmbH
 
PEAR - An introduction
PEAR - An introductionPEAR - An introduction
PEAR - An introduction
SpeedPartner GmbH
 
Suchmaschinen-Optimierung
Suchmaschinen-OptimierungSuchmaschinen-Optimierung
Suchmaschinen-Optimierung
SpeedPartner GmbH
 
.EU – eine neue Top-Level-Domain
.EU – eine neue Top-Level-Domain.EU – eine neue Top-Level-Domain
.EU – eine neue Top-Level-Domain
SpeedPartner GmbH
 
Leben und Arbeiten in einer Community
Leben und Arbeiten in einer CommunityLeben und Arbeiten in einer Community
Leben und Arbeiten in einer Community
SpeedPartner GmbH
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
SpeedPartner GmbH
 
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen EinsatzSicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
SpeedPartner GmbH
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
SpeedPartner GmbH
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
SpeedPartner GmbH
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
SpeedPartner GmbH
 
Deploying IPv6 - planning, common pitfalls and security-considerations
Deploying IPv6 - planning, common pitfalls and security-considerationsDeploying IPv6 - planning, common pitfalls and security-considerations
Deploying IPv6 - planning, common pitfalls and security-considerations
SpeedPartner GmbH
 
Explanation of the TYPO3 Integrator Certification
Explanation of the TYPO3 Integrator CertificationExplanation of the TYPO3 Integrator Certification
Explanation of the TYPO3 Integrator Certification
SpeedPartner GmbH
 

Mehr von SpeedPartner GmbH (20)

Extbase/Fluid: Kennenlernen und ausprobieren
Extbase/Fluid: Kennenlernen und ausprobierenExtbase/Fluid: Kennenlernen und ausprobieren
Extbase/Fluid: Kennenlernen und ausprobieren
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
Secure PHP environment
Secure PHP environmentSecure PHP environment
Secure PHP environment
 
XUL - The future of user-interfaces on the web
XUL - The future of user-interfaces on the webXUL - The future of user-interfaces on the web
XUL - The future of user-interfaces on the web
 
PHP-Applikationen mit PEAR
PHP-Applikationen mit PEARPHP-Applikationen mit PEAR
PHP-Applikationen mit PEAR
 
PHP-Entwicklung mit PEAR
PHP-Entwicklung mit PEARPHP-Entwicklung mit PEAR
PHP-Entwicklung mit PEAR
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
 
News from PEAR
News from PEARNews from PEAR
News from PEAR
 
PEAR - An introduction
PEAR - An introductionPEAR - An introduction
PEAR - An introduction
 
Suchmaschinen-Optimierung
Suchmaschinen-OptimierungSuchmaschinen-Optimierung
Suchmaschinen-Optimierung
 
.EU – eine neue Top-Level-Domain
.EU – eine neue Top-Level-Domain.EU – eine neue Top-Level-Domain
.EU – eine neue Top-Level-Domain
 
Leben und Arbeiten in einer Community
Leben und Arbeiten in einer CommunityLeben und Arbeiten in einer Community
Leben und Arbeiten in einer Community
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
 
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen EinsatzSicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
Sicherer Wegweiser im Internet: DNSSEC im praktischen Einsatz
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
 
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeasSystem-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
System-Management-Trio: Zentrale Verwaltung mit facter, puppet und augeas
 
Deploying IPv6 - planning, common pitfalls and security-considerations
Deploying IPv6 - planning, common pitfalls and security-considerationsDeploying IPv6 - planning, common pitfalls and security-considerations
Deploying IPv6 - planning, common pitfalls and security-considerations
 
Explanation of the TYPO3 Integrator Certification
Explanation of the TYPO3 Integrator CertificationExplanation of the TYPO3 Integrator Certification
Explanation of the TYPO3 Integrator Certification
 

Websockets: Leichtgewichtige Verbindungen für Web-Applikationen

  • 1. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 1 / 16© SpeedPartner GmbH Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
  • 2. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 2 / 16© SpeedPartner GmbH Über mich ● Stefan Neufeind ● Mit-Geschäftsführer der SpeedPartner GmbH aus Neuss ein Internet-Service-Provider (ISP) ● Individuelle TYPO3-Entwicklungen ● Hosting, Housing, Managed Services ● Domains / Domain-Services ● IPv6, DNSSEC, ... ● Aktive Mitarbeit im Community-Umfeld (PHP/PEAR, TYPO3, Linux) ● Freier Autor für z.B. t3n, iX, video2brain, ...
  • 3. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 3 / 16© SpeedPartner GmbH GET /2013/ HTTP/1.1 Host: www.linuxtag.org Accept-Language: de,en;q=0.7,en-us;q=0.3 Accept-Encoding: gzip, deflate [...] „Klassische“ Kommunikation im WWW Klassischer Fall für eine direkte http-Anfrage 1) Verbindung aufbauen 2) Anfrage senden 3) Antwort erhalten 4) Verbindung abbauen HTTP/1.1 200 OK Date: Sat, 25 May 2013 14:01:00 GMT Content-Length: 245 Content-Type: text/html; charset=utf-8 [...]
  • 4. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 4 / 16© SpeedPartner GmbH „Klassische“ Kommunikation im WWW Einschränkungen bei klassischem http/https: ● Reines Anfrage-Antwort-Modell ● Kommunikation muss durch den Client ausgelöst werden ● Server kann nur eine einzige, unmittelbare Antwort liefern ● Verzögerungen durch z.B. Verbindungsaufbau / -abbau Wünschenswert: ● Flexibilität ● Kommunikation durch Client oder Server ● Gesteuert durch Anforderungen (z.B. Ereignisse) statt Anfrage-Antwort ● Effizienz ● Geringer Overhead ● Vermeidung/Reduzierung von Verzögerungen Lösungsansätze: ● Polling ● Mehrteilige HTTP-Antworten („multipart“) ● Keepalive ● Alternative Techniken/ Protokolle (???)
  • 5. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 5 / 16© SpeedPartner GmbH „Klassische“ Kommunikation im WWW Lösungsansätze: ● Polling ● Neuladen durch Client initiiert ● ggf. in einem frame/iframe oder per AJAX ● Mehrteilige HTTP-Antworten („multipart“) ● Server hält Verbindung offen und behält die Steuerung ● ggf. in einem frame/iframe ● Bei kleinen Datenmengen/Nachrichten großer Overhead ● Keepalive ● Nachwievor einzelne Requests notwendig ● Reduziert jedoch den Overhead für Verbindungsaufbau etc. ● Alternative Techniken/Protokolle ● Nutzung von z.B. Java oder Flash ● Kommunikation an http/https „vorbei“
  • 6. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 6 / 16© SpeedPartner GmbH GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, talk Sec-WebSocket-Version: 13 Kommunikation per Websockets Verlauf einer Websocket-Verbindung 1) Verbindung aufbauen 2) Anfrage senden 3) Antwort erhalten 4) Nutzung Websocket-Kanal 5) Verbindung abbauen HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: S3pPLMBiTxaQ9kYG zzhZRbK+xOo= Sec-WebSocket-Protocol: chat
  • 7. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 7 / 16© SpeedPartner GmbH GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, talk Sec-WebSocket-Version: 13 Kommunikation per Websockets Verlauf einer Websocket-Verbindung HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: S3pPLMBiTxaQ9kYG zzhZRbK+xOo= Sec-WebSocket-Protocol: chat Nach Request Upgrade der Verbindung auf direkte Kommunikation Eindeutiger Key pro Request, üblicherweise UUID (128-bit) Bestätigung des Upgrade Accept-Antwort durch Verknüpfung einer festen GUID mit dem eindeutigen Key generiert function key2accept($key) { $guid = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'; $composed = $key . $guid; $hashed = sha1($composed, TRUE); return base64_encode($hashed); }
  • 8. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 8 / 16© SpeedPartner GmbH Kommunikation per Websockets Verbindungsaufbau: ● Protokollprefixe „ws://“ (http, Port 80, unverschlüsselt) und „wss://“ (https, Port 443, verschlüsselt) ● Falls Proxy-Konfiguration auf Client erkannt Verwendung von „HTTP CONNECT“ für Tunnel ● Proxy-Support: ● https generell problemfreier als http (keine Prüfung der TLS-Inhalte durch Proxy) ● http erfordert für „HTTP Upgrade“ evtl. spezielle Konfiguration ● Sobald „HTTP Upgrade“ erkannt Durchleitung von Datenverkehr (passthrough, pipe) ● Nginx 1.4.0 (4/2013): Websocket-Support wird als „Feature“ ● Varnish: Konfiguration einer Durchleitung per „pipe“ ausreichend (https://www.varnish-cache.org/docs/3.0/tutorial/websockets.html)
  • 9. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 9 / 16© SpeedPartner GmbH Kommunikation per Websockets Protokollversionen beachten: ● Hixie-75: 2/2010 Chrome 4, Safari 5.0.0 ● Hixie-76, hybi-00: 5/2010 Chrome 6, Safari 5.0.1, Firefox 4 + Opera 11.00 (standardmäßig deaktiviert) ● Hybi-07: 4/2011 Firefox 6 ● Hybi-10: 7/2011 Firefox 7 (PC + Android), Chrome 14 ● RFC 6455: 12/2011 IE 10, Firefox 11 (PC + Android), Chrome 16, Safari 6, Opera 12.10 Quelle Übersicht: http://en.wikipedia.org/wiki/WebSocket ● Versionen untereinander teils stark inkompatibel (Header, Keys, ...)
  • 10. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 10 / 16© SpeedPartner GmbH Websockets vs. WebRTC ? Unterschiedliche Ansätze: ● Websockets: Kommunikation zwischen Client und Server ● WebRTC: Realtime-Kommunikation zwischen Clients (P2P) ● Bereits in 2010: Demo für Client-Server-Videokonferenz per MediaStreamTransceiver ● Bisher keine allgemeine Lösung für Audio/Video per Websockets verfügbar ● WebRTC kann Websockets zum Verbindungsaufbau und Statusaustausch nutzen
  • 11. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 11 / 16© SpeedPartner GmbH Websocket auf dem Client Native Nutzung per JavaScript möglich: try{ var socket; var host = "ws://localhost:8000/socket/server/startDaemon.php"; var socket = new WebSocket(host); message('<p class="event">Socket Status: '+socket.readyState); socket.onopen = function(){ message('<p class="event">Socket Status: '+socket.readyState+' (open)'); } socket.onmessage = function(msg){ message('<p class="message">Received: '+msg.data); } socket.onclose = function(){ message('<p class="event">Socket Status: '+socket.readyState+' (Closed)'); } } catch(exception){ message('<p>Error'+exception); } 0 = CONNECTING 1 = OPEN 2 = CLOSED Quelle: http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
  • 12. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 12 / 16© SpeedPartner GmbH Unterstützung durch Frameworks z.B. per Socket.IO: http://socket.io/ ● Server (Node.js) sowie Client ● Fallbacks-Lösungen für auch für ältere Browser ● WebSocket ● Adobe Flash Socket ● AJAX long polling ● AJAX multipart streaming ● Forever Iframe ● JSONP Polling ● Breite Browser-Unterstützung: ● Internet Explorer 5.5+ ● Safari 3+ ● Google Chrome 4+ ● Firefox 3+ ● Opera 10.61+
  • 13. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 13 / 16© SpeedPartner GmbH Unterstützung durch Frameworks z.B. per Wrench: http://wrench.readthedocs.org/en/latest/ ● Server (PHP) ● Client nativ z.B. per Ratchet: http://socketo.me/ ● Server (PHP) ● Client nativ; Flash-Fallback z.B. per web-socket-js (https://github.com/gimite/web-socket-js) #!/usr/bin/env php <?php require(__DIR__ . '/lib/SplClassLoader.php'); $classLoader = new SplClassLoader('Wrench', __DIR__ . '/lib'); $classLoader->register(); $server = new WrenchServer('ws://0.0.0.0:8080/', array( 'allowed_origins' => array('bohuco.net'), )); $server->registerApplication('echo', new WrenchApplicationEchoApplication()); $server->run(); Quelle Übersicht: http://bohuco.net/blog/2012/12/wrench-the-new-html5-websocket-class-hero-for-php/
  • 14. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 14 / 16© SpeedPartner GmbH VNC-Client mit Websockets noVNC: http://kanaka.github.io/noVNC/ ● Nutzung von Websockets und Canvas ● Verschlüsselte Übertragung ● Keine Plugins o.ä. erforderlich ● Verwendung z.B. innerhalb des Ganeti Web Manager (https://code.osuosl.org/projects/51/wiki/VNC)
  • 15. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 15 / 16© SpeedPartner GmbH Fazit Vorteile: ● Flexible Möglichkeit zur Kommunikation ● Geringe Datenmenge ● Geringe Last für Server und Client (im Gegensatz zu Polling) ● Direkte Möglichkeit für Rückmeldungen durch den Server (dauerhafte Verbindung) Kritik: ● Browser-Unterstützung noch nicht „überall“ gegeben ● Unterschiedliche Protokollversionen (ältere Browser) ● Security bei „Passthrough“-Verbindungen (?) Lösungen/Kompromisse: ● Nutzung von Frameworks mit „Fallback-Lösungen“ ● Nutzung in kontrollierter Client-Umgebung (Intranet, ...)
  • 16. Websockets: Leichtgewichtige Verbindungen LinuxTag 2013, 25.05.2013 Seite: 16 / 16© SpeedPartner GmbH Kontakt Danke fürs Zuhören sowie viel Erfolg beim Testen Link zu den Slides: http://talks.speedpartner.de/ Bei Fragen stehen wir selbstverständlich gerne zur Verfügung: Stefan Neufeind, neufeind@speedpartner.de SpeedPartner GmbH, http://www.speedpartner.de/