Introduction au WebSockets via le projet Atmosphere

WebSockets et Atmosphere

Jeanfrancois Arcand

twitter.com/jfarcand facebook.com/jeanfrancois.arcand.3

Who is Wordnik?

•Founded in 2008 by Erin McKean

•"Understand meaning of words automatically"

•Patented "Free-Range Definition" technology

•Constructed largest (known) English Word Graph

We do Discovery – in real time!!

Atmosphere

Apache 2 Github ~450 « followers »

20 000 et plus téléchargement

par mois!

Client + serverSupporté

par + de 25

frameworks

Scala, Groovy,

JRuby, Java

1.0.0.beta1

Depuis 2008

Atmosphere

Apache 2 Github ~450 « followers »

Depuis 2008

20 000 et plus téléchargement

par mois!

Client + serverSupporté

par + de 25

frameworks

Scala, Groovy,

JRuby, Java

Très Très actif!!!

WSJ.com

•40 millions de requêtes par jours

•Atmosphere 0.9.4/Jetty 8.1.3

•Websockets => long-polling => JSONP

•IE 6/7/8/9/10, Chrome XX, Firefox 3/12, Safari XX

•WebSockets: IE 10, Chrome 14, Firefox 8, Safari 5

Mon WebSocket au Canada!

WebSocket

Mon WebSocket au Canada!

WebSocket

C’est quoi

Mon WebSocket au Canada!

WebSocket

N’importe quoi!

C’est quoi

Mon WebSocket au Canada!

WebSocket

N’importe quoi!

C’est quoi

Atmosphere

Mon WebSocket au Canada!

WebSocket

N’importe quoi!

C’est quoi

Atmosphere

Concepts

Mon WebSocket au Canada!

WebSocket

N’importe quoi!

C’est quoi

Atmosphere

DémoConcepts

Le protocole WebSocket vise à développer un canal de communication bidirectionnel et « full-duplex » sur un socket TCP pour les fureteurs et les serveurs web.

WebSockets

Avant (Long-Polling)

Fureteur

Server

Requête

Avant (Long-Polling)

Fureteur

Requête

Server

Avant (Long-Polling)

Fureteur

Requête

Réponse

Server

Oups!!

Fureteur

ServerRien

Requête

Oups!

Fureteur

Requête

Server

Zzzz

Mieux!

Fureteur

Server

Cache

Requête

Mieux!

Requête

Server

Cache

Réponse

Fureteur

A la limite (HTTP Streaming)

Fureteur

Server

Requête

A la limite (HTTP Streaming)

Fureteur

Requête

Server

A la limite (HTTP Streaming)

Fureteur

Requête

Réponse

Server

A la limite (HTTP Streaming)

Fureteur

Requête

Réponse

Réponse

Server

Oups!!

Fureteur

Requête

Réponse

Réponse

Server

L’enfer

A la limite (HTTP Streaming)

Fureteur

Requête

Réponse

Réponse

Server

L’enfer

Hack

Oups!!!

Fureteur

Requête

Réponse

Réponse

Server

Proxy

Mieux

Fureteur

Requête

Réponse

Réponse

Server

Cache

Mieux

Fureteur

Requête

Réponse

Réponse

Server

Cache« HeartBea

t »

Mieux: Server Side Events (SSE)

Fureteur

Requête

Réponse

Réponse

Server

Oups!!!

Fureteur

Requête

Réponse

Réponse

Server

Proxy

Mieux

Fureteur

Requête

Réponse

Réponse

Server

Cache« HeartBea

t »

WebSockets

Fureteur

Server

Hanshake

WebSockets

Fureteur

Server

Hanshake

OK

WebSockets

Fureteur

Server

Requête

WebSockets

Fureteur

Requête

Server

WebSockets

Fureteur

Server

Réponse

WebSockets

Fureteur

Server

Requête

WebSockets

Fureteur

Server

Requête

Requête

WebSockets

Fureteur

Requête

Requête

Server

WebSockets

Fureteur

Server

Réponse

Réponse

A TOUS moment

Fureteur

Réponse

Server

Ah la belle vie, la vie, la vie ahah!

Fureteur

Réponse

Server

Oups!!

Fureteur

Réponse

Server

Proxy

Mieux!

Fureteur

Réponse

Server

Cache

T 127.0.0.1:65062 -> 127.0.0.1:8080 [AP]

GET / HTTP/1.1.

Upgrade: websocket.

Connection: Upgrade.

Host: 127.0.0.1:8080.

Origin: http://127.0.0.1:8080.

Sec-WebSocket-Key: Tz9qdt3lmte6Slf+GvpRqQ==.

Sec-WebSocket-Version: 13.

Sec-WebSocket-Extensions: x-webkit-deflate-frame.

Première requête

T 127.0.0.1:8080 -> 127.0.0.1:51292 [AP]

HTTP/1.1 101 Switching Protocols.

Upgrade: WebSocket.

Connection: Upgrade.

Sec-WebSocket-Accept: HVXA7SqH5uYeN6aD9tZ0JQbfTJA=.

Réponse

T 127.0.0.1:8080 -> 127.0.0.1:51292 [AP]

HTTP/1.1 101 Switching Protocols.

Upgrade: WebSocket.

Connection: Upgrade.

Sec-WebSocket-Accept: HVXA7SqH5uYeN6aD9tZ0JQbfTJA=.

Ah la belle vie, la vie, la vie, ahah

T 127.0.0.1:8080 -> 127.0.0.1:65064 [AP]

HTTP/1.1 501 Not Implemented.

Server: Apache-Coyote/1.1.

X-Atmosphere-error: Websocket protocol not supported.

Transfer-Encoding: chunked.

Date: Fri, 15 Jun 2012 10:06:30 GMT.

Connection: close.

.

OUPS!!!

WebSocket API – Standard JavaScript

websocket = new WebSocket(wsUri);

websocket.onopen = function(evt) { …};

websocket.onclose = function(evt) { …};

websocket.onmessage = function(evt) { …};

websocket.onerror = function(evt) { …};

webSocket.send(…)

WebSocket API – Java

Jetty 7, GlassFish 3.1, Netty 3, Tomcat 7.0.27, Resin 4, JBoss Plugin

JSR 356: http://jcp.org/en/jsr/detail?id=356

AHC (Client -> De facto)

http://github.com/sonatype/async-http-client

Ah la belle vie, la vie, la vie, ahah

OUPS!!!

C’est parti!

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

N’importe quoi

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

N’importe quoi

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

Au Secour

s!!

N’importe quoi

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

Au Secour

s!!

Streaming

N’importe quoi

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

Au Secour

s!!

Streaming

SSE

N’importe quoi

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

Au Secour

s!!

Streaming

SSE

JSONP

N’importe quoi

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

Au Secour

s!!

Streaming

SSE

Long Polling

JSONP

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

Atmosphere à la

rescousse!!!

Atmosphere -WebSockets

Tomcat7

Jetty7

Jetty8

GlassFish3.

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

atm

osp

here

.js

Atm

osp

here

API

Atmosphere - HTML5 Server Side Events

Tomcat7

Jetty7

Servlet3

WebLogic

GlassFish

312

Firefox

Safari

Opera

Chrome

IE

atm

osp

here

.js

Atm

osp

here

API

Atmosphere Long-Polling/HTTP Streaming

JBoss

Jetty7

Servlet3

WebLogic.

GlassFish

Firefox

Safari

Opera

Chrome

IE

atm

osp

here

.js

Atm

osp

here

API

Atmosphere

JBoss

Jetty7

Servlet3

WebLogic.

GlassFish

Firefox

Safari

Opera

Chrome

IE

atm

osp

here

.js

Atm

osp

here

API

Même API, peut

importe le transport!!

Socket.IO, GWT, Wicket, JSF, etc.

JBoss

Jetty7

Servlet3

WebLogic.

GlassFish

Firefox

Safari

Opera

Chrome

IE

Sock

et.

IO

Atm

osp

here

API

PORTABLE!!!!!

JBoss

Jetty7

Servlet3

WebLogic.

GlassFish

Firefox

Safari

Opera

Chrome

IE

Sock

et.

IO

Atm

osp

here

API

PORTABLE

•Tout framework ne supportant que les WebSockets

Mise en production

IMPOSSIBLE

Grosse Erreur!!!!!

Atmosphere

•Suspend: décrocher la ligne

•Resume: racrocher la ligne

•Broadcast: parler sur une ou plusieurs lignes, seul, à deux ou plusieurs.

Définition

Requête Normale

Fureteur

Fureteur

Fureteur

Server

Requête Normale

Fureteur

Fureteur

Fureteur

Server

Suspend

Fureteur

Fureteur

Fureteur

Server

Suspend

Fureteur

Fureteur

Fureteur

ServerS

Suspend

Fureteur

Fureteur

Fureteur

ServerS

Suspend

Fureteur

Fureteur

Fureteur

ServerS

Broadcast

Fureteur

Fureteur

Fureteur

SB

Server

Broadcast

Fureteur

Fureteur

Fureteur

SB

Server

Resume

Fureteur

Fureteur

Fureteur

B

Server

R

Resume

Fureteur

Fureteur

Fureteur

B

ServerS

•Default: in-memory

•Nuage

• RedisBroadcaster

• JMSBroadcaster

• XMPPBroadcaster

• HazelcastBroadcaster

• JGroupsBroascaster

•Multi-Threads, Async I/O par default

Broadcaster

Broadcaster Nuage

Fureteur

Fureteur

Fureteur S

Server

ServerS

Broadcaster Nuage

Fureteur

Fureteur

Fureteur S

Server

ServerS

Broadcaster Nuage

Fureteur

Fureteur

Fureteur S

B

Server

ServerS

Broadcaster Nuage

Fureteur

Fureteur

Fureteur

BServer

Server

Broadcaster Nuage

Fureteur

Fureteur

Fureteur Server

Server

B

Broadcaster Nuage

Fureteur

Fureteur

Fureteur Server

Server

•WebSocketHandler

• Seulement WebSocket (ATTENTION)!

•AtmosphereHandler

• Tout les protocoles

•Jersey Resource

• Tout les protocoles

•Meteor

• Tout les protocoles

Composantes Atmosphere

•WebSocketProtocolDefinir sont propre WebSocket protocol.

•Atmosphere, par default, utilise le SimpleHttpProtocolMessage WebSocket transformé en HTTP POST, avec read/write asynchrone.

•SwaggerSocket: REST over WebSockets -> Protocol plus puissant

WebSocket Sub Protocol

Construction d’une appli

Hello, Swagger

•Swagger is…

• Spec for declaring an API schema

• A framework for auto-generating the spec

• A library for client library generation

• A JSON-based test framework

What is this Resource Declaration?

•Listing of all available APIshttp://petstore.swagger.wordnik.com/api/resources.json

“It’s like a sitemap for your

API!”

Démo

But What about Speed?

•Yes! REST over HTTP is slow

• Connection overhead

• Marshaling & Unmarshaling overhead

• Chatter

• JSON/XML need to diet

•It's also…

• Synchronous

• GET/POST/PUT/DELETE don't cut it

Your prod Database isn't doing

REST

•REST over WebSocket

•Protocole basé sur JSON

•Performance améliorée

•Simple

•Supporte également sur HTTP.

•Supporte le multi requètes/réponses.

SwaggerSocket

twitter.com/wordniktwitter.com/atmo_frameworktwitter.com/swaggersocket

http://github.com/Atmosphere/atmospherehttp://github.com/wordnik/

swaggersocket

Powered By Wordnik