presentation websockets
DESCRIPTION
Presentation websockets.TRANSCRIPT
Conférence Industrielle
Websockets
Bert Poller - 7 mars 2013
@bertpoller
Architecte – Développeur – Pratiquant agile
10 ans d’expérience
#scala #datamining #websockets
www.ekito.fr 2
www.ekito.fr 3
Sommaire
www.ekito.fr 4
Le web aujourd’hui
Architectures traditionnelles
Websockets
Ecosystème
Demo
Le web aujourd’hui
www.ekito.fr 5
Le web aujourd’hui
• 2010: 2 * 10⁹ utilisateurs
2016: 16 * 10⁹ appareils
(Giga)
• 2015: 1 zettaoctet de trafic (10²¹)
• 3.6 exaoctets (10¹⁸) trafic de données mobiles par mois en 2014
www.ekito.fr 6
Les besoins actuels
• Contenu riche et en temps réel
• Disponibilité sur une multitude d’appareils
• Réactivité mesurée en millisecondes
• Time To Market
• Pression sur le coût d’infrastructure
www.ekito.fr 7
Time is money
• : “… every 100ms of
latency costs 1% in sales.”
• : “… an extra 0.5 seconds in
search page generation time drops
traffic by 20%.”
www.ekito.fr 8
Le web et ces origines
• Conçu pour des documents statiques • Modèle requête - réponse
• “Connectionless”
• Communication similaire au télégraphe • Unidirectionnel
• Interactivité simulée • Nécessite des plug-ins
• polling / long polling
• Latence importante
• Capacités divergents entre différents navigateurs web
www.ekito.fr 9
Architectures traditionnelles
www.ekito.fr 10
Architectures traditionnelles
www.ekito.fr 11
RSS Client
JDBC Client
JMS Client
XMPP Client
News feed
Database
Message Broker
Chat Server
Custom TCP
JDBC / TCP
JMS / TCP
XMPP / TCP Java EE Container
TCP Full Duplex
Transformation logic
Connection management
Server-side logic
Custom web app mgmt.
Management
Management
Management
Web App
Web App
Web App
Web client
Web client
Web client
Long polling
User-initiated refresh
Timed refresh
HTTP (half duplex)
Architectures traditionnelles
• Interfaçage du monde connecté (backend) avec un monde déconnecté (Web) • Besoin de “traduction”
• HTTP – communication en half duplex
• Ajax/Comet techniques (polling / long polling)
• Legacy Application/Web servers
• Difficultés de scalabilité pour une large audience web • Traitement systématique des aller-retour par web middleware
• Réauthentification, ré-autorisation
• Latence et bande passante importante • Entêtes HTTP de 800 à 2000 octets par requête / réponse
www.ekito.fr 12
Architectures traditionnelles
GET / HTTP/1.1
Host: www.lemonde.fr
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.17 (KHTML, like Gecko) Ubuntu
Chromium/24.0.1312.56 Chrome/24.0.1312.56 Safari/537.17
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,fr;q=0.6,de;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: OAX=U5t82VEQ5GIAApJq; xtvrn=$43260$; YWP_VOLUME=0; kameleoonOriginalReferrer=;
kameleoonOriginalLandingPage=http://www.lemonde.fr/;
kameleoonVisits=[{"startTime":1360061538209,"pageViews":1,"endTime":1360061538209},{"startTime":13
60084368925,"pageViews":5,"endTime":1360084847314},{"startTime":1360590143171,"pageViews":2,"endTi
me":1360590393210},{"startTime":1360942795198,"pageViews":3,"endTime":1360943129704},{"startTime":
1361183716550,"pageViews":3,"endTime":1361183911975},{"startTime":1361191849292,"pageViews":7,"end
Time":1361192630103},{"startTime":1361356915935,"pageViews":1,"endTime":1361356915935},{"startTime
":1361802327587,"pageViews":3,"endTime":1361802380621},{"startTime":1362568922932,"pageViews":3,"e
ndTime":1362568977783}]; __vrf=1362568923140KinbmCynS8AKt1F0xNyIPa4bhSjERtlN;
__vru=http%3A//www.lemonde.fr/;
RMFD=011UDCQ6O10Cn3e|O10Cn3q|O10Cn6C|O10CnAR|O10CnJw|O10CnKo|O20CnLF|O10CnLO;
RMFL=011UDCQ6U50CnIX; xtan43260=3-; xtant43260=1;
__utma=194882738.1473232461.1361191850.1361802329.1362568924.4; __utmb=194882738.3.10.1362568924;
__utmc=194882738; __utmz=194882738.1361191850.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none);
_chartbeat2=w5e4gbh4c237rscu.1360061540505.1362568979230.00000000000001
If-Modified-Since: Wed, 06 Mar 2013 11:18:22 GMT
www.ekito.fr 13
• Lemonde.fr 1693 octets
Websockets
www.ekito.fr 14
Un nouveau standard…
• HTML5
• Support natif multimédia
(Audio, Video, 3D)
• Stockage locale dans navigateur
• Glisser-déposer
• Programmation concurrentielle
(WebWorkers)
• WebSockets • Initié par Ian Hickson (Google) and
Kaazing
• Connected / Full-duplex
• Compatible avec HTTP
• Client/Server pour le web
www.ekito.fr 15
Une architecture allégée • Conçu pour applications temps reel
• Full-duplex
• Moins de latence (< 1ms)
• Meilleure utilisation de bande passante
• Scalabilité massive grace à une architecture simplifiée
• Fiabilité et résilience • Guaranteed messages
• Support pour des appareils de tout type
• Haute disponibilité
• Support de tous les protocoles binaires et texte à base de TCP vers le web
www.ekito.fr 16
Sous le capot - handshake • Protocol upgrade http:// --> ws://
www.ekito.fr 17
Source: http://www.blog-nouvelles-technologies.fr/archives/3237/html5-websockets-le-successeur-du-protocole-http/
Sous le capot –format de trame
www.ekito.fr 18
Source: http://updates.html5rocks.com/2011/08/What-s-different-in-the-new-WebSocket-protocol
Sous le capot - API
www.ekito.fr 19
Source: http://www.blog-nouvelles-technologies.fr/archives/3237/html5-websockets-le-successeur-du-protocole-http/
Exemple : Connection offloading
www.ekito.fr 20
• Optimisation d’infrastructure
• Offload pour message broker
• Réduction de bande passante
Exemple : Distribution de contenu
www.ekito.fr 21
• CDN pour messagerie web en temps réel
• Liens uniques entre sites géographiques
• Performance améliorée (localisation des échanges)
Exemple : Déploiement en cloud
www.ekito.fr 22
• Opens up Virtual Private Connection (VPC) for cloud implementations
• Extend internal datacenter to the Cloud
• Can replace VPN
• Non disruptive to network operations
Ecosystème
www.ekito.fr 23
Web socket – browser support
www.ekito.fr 24
• Plusieurs versions
• Adoption progressive et support partiel par des navigateurs
• Legacy browsers ???
Source: http://en.wikipedia.org/wiki/WebSocket#Browser_support
Websocket APIs, Middleware
www.ekito.fr 25
• Le standard websocket seul ne suffit pas
– Gestion de reconnexion
– Stratégies de repli au cas d’incompatibilité ou d’infrastructure legacy (routeur, pare-feu, navigateur)
– Sécurité
– Intégration avec infrastructure existante
Source: http://en.wikipedia.org/wiki/WebSocket#Browser_support
Websocket APIs, Middleware
www.ekito.fr 26
• Kaazing Websocket Gateway
• Socket.IO / node.js
• Play! Framework
• JWebSocket (Java)
• Web Socket Ruby
• Mod_pyWebSocket
– extension en Python pour serveur Apache httpd
Source: http://en.wikipedia.org/wiki/WebSocket#Browser_support
Websocket APIs, Middleware
www.ekito.fr 27
• Kaazing Websocket Gateway
– Gateway implémenté en Java
– API client version « HTML 5 »
– APIs client de plus haut niveau (JMS/AMQP/XMPP over Websocket)
– Solution de Sécurité intégrée
– Résilience avec fallback (Long polling …)
– Configuration en cluster pour Haute disponibilité / scalabilité
– Professional services
Websocket APIs, Middleware
www.ekito.fr 28
• Socket.io (Open Source)
– API client JavaScript proche du standard HTML5
– Gateway implémenté en JavaScript sur Node.js
– Résilience avec long polling…
Demo
www.ekito.fr 29
Kaazing FX Trader Demo
www.ekito.fr 30
Source: demo.kaazing.com/forex
localhost
Web App
Message Broker
JMS Wire
TCP
Market Data,
Booking,
Confirmation
Engine
JMS Wire
TCP
demo.kaazing.com
STOMP
WS HTTP +
Web
Ekito – Spin the moon demo
www.ekito.fr 31
Socket.IO
Node.js
Joyent.com
Web
Gyro Data
Gyro Data
https://github.com/bpoller/websocks/
Credits: http://learningwebgl.com/blog/?p=1253 http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/