Presentation websockets.

1. Conférence Industrielle
Websockets
Bert Poller - 7 mars 2013

2. @bertpoller
Architecte – Développeur – Pratiquant agile
10 ans d’expérience
#scala #datamining #websockets
www.ekito.fr 2

3. www.ekito.fr 3

4. Sommaire
Le web aujourd’hui
Architectures traditionnelles
Websockets
Ecosystème
Demo
www.ekito.fr 4

5. Le web aujourd’hui
www.ekito.fr 5

6. 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

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

8. 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

9. 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

10. Architectures traditionnelles
www.ekito.fr 10

11. Architectures traditionnelles
HTTP (half duplex) TCP Full Duplex
Server-side
Web client Web App
logic RSS Client
Custom TCP
Long polling
Transformation
News feed
logic
Connection
management JDBC Client
JDBC / TCP
Web client Web App Database
User-initiated
refresh
Custom web
app mgmt. JMS Client
JMS / TCP
Management Message Broker
Web client Web App Management
Timed refresh Management
XMPP Client
XMPP / TCP
Java EE Container Chat Server
www.ekito.fr 11

12. 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

13. Architectures traditionnelles
• Lemonde.fr 1693 octets
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

14. Websockets
www.ekito.fr 14

15. 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

16. 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

17. Sous le capot - handshake
• Protocol upgrade http:// --> ws://
Source:
http://www.blog-nouvelles-technologies.fr/archives/3237/html5-websockets-le-successeur-du-protocole-http/
www.ekito.fr 17

18. Sous le capot –format de
trame
Source:
http://updates.html5rocks.com/2011/08/What-s-different-in-the-new-WebSocket-protocol
www.ekito.fr 18

19. Sous le capot - API
Source:
http://www.blog-nouvelles-technologies.fr/archives/3237/html5-websockets-le-successeur-du-protocole-http/
www.ekito.fr 19

20. Exemple : Connection
offloading
• Optimisation d’infrastructure
• Offload pour message broker
• Réduction de bande passante
www.ekito.fr 20

21. Exemple : Distribution de
contenu
• CDN pour messagerie web en temps réel
• Liens uniques entre sites géographiques
• Performance améliorée (localisation des
échanges)
www.ekito.fr 21

22. Exemple : Déploiement en
cloud
• Opens up Virtual Private Connection (VPC) for
cloud implementations
• Extend internal datacenter to the Cloud
• Can replace VPN
• Non disruptive to network operations
www.ekito.fr 22

23. Ecosystème
www.ekito.fr 23

24. Web socket – browser support
• Plusieurs versions
• Adoption progressive et support partiel par des
navigateurs
• Legacy browsers ???
Source:
http://en.wikipedia.org/wiki/WebSocket#Browser_support
www.ekito.fr 24

25. Websocket APIs, Middleware
• 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
www.ekito.fr 25

26. Websocket APIs, Middleware
• 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
www.ekito.fr 26

27. Websocket APIs, Middleware
• 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
www.ekito.fr 27

28. Websocket APIs, Middleware
• Socket.io (Open Source)
– API client JavaScript proche du standard HTML5
– Gateway implémenté en JavaScript sur Node.js
– Résilience avec long polling…
www.ekito.fr 28

29. Demo
www.ekito.fr 29

30. Kaazing FX Trader Demo
JMS Wire
TCP
STOMP
HTTP + Message Broker
WS
Web JMS Wire
App TCP
Web
Market Data,
Booking,
Confirmation
Engine
localhost demo.kaazing.com
Source:
demo.kaazing.com/forex
www.ekito.fr 30

31. Ekito – Spin the moon demo
Gyro Data
Socket.IO
Web Node.js
Gyro Data
Joyent.com
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/
www.ekito.fr 31