Paris.js (23/05/2015)

HTTP is …

• Half-duplex (Client/Server)• Verbose (ACK required + headers)• Completed by hacks– Long Polling– Comet/Ajax– Status of answer “Active Ongoing”

Websocket

• TCP connection• Full-duplex (bi-directional)• W3C defined JS API

Server-Sent Events (RFC 6455)

• HTTP 1.1• Server-push (uni-directional)• W3C defined event source API HTML5

Note : SSE can be poly-filled to backport

Implementation

Websocket SSE• Request 101 => to

Upgrade to websocket• OPEN / MESSAGE /

CLOSE• Error handling to be

build

• HTTP !• No upgrade / Error

handling specified (reconnection / event ID)

Web infra compatibility(Load balancer, server and/or

proxy)

Websocket SSEReconfigurations

required !

(Fall-back mechanism is a must!)

No changed required

Websocket vs REST“POST” to one client

Source : Arun Guptar

• 10 messages of 1 byte : 7ms vs 220 ms

• 100 messages of 10 bytes : 57 vs 986 ms

• 1000 messages of 100 bytes : 200 vs 10210 ms

• 5000 messages of 1000 bytes : 1,2 sec vers 54 sec.

Web latency

500 tweets : • Safari: 7 seconds using SSE and 16 seconds

using WebSockets• Chrome: 5 seconds using SSE and 8 seconds

using WebSockets• Firefox: 6 seconds using SSE and 8 seconds

using WebSockets

Source : http://matthiasnehlsen.com/

Solutions for dynamic data

Streams Browser support

Web infra compatibility

Easiness to dev

Load (network /

Device)

App latency

Polling/Long

Polling

Bi-dir

Websocket Bi-dir

SSE Uni-dir

Socket.io

https://www.playframework.com/

Why ? To improve UX

• Overall latency : 100ms = 5% page view + 1% revenue

• Make your app/site “alive & real” with real-time data• Stock of service/material, prices, news, social networks, …

• Historically real-time based• Chat• Stock market, bet odds, traffic, …• TV second screen

• When time influences decisions• Limited resources (sharing economy)• …

Sources

• http://dsheiko.com/weblog/websockets-vs-sse-vs-long-polling/ (PHP)

• https://www.youtube.com/watch?v=vhJz3HftuZU (WebSocket andServer-Sent Events Java Arun Gupta) (JAVA)

• http://streamdata.io/blog/push-sse-vs-websockets/• http://matthiasnehlsen.com/blog/2013/05/01/serv

er-sent-events-vs-websockets/ (scala)

• http://www.html5rocks.com/en/tutorials/eventsource/basics/?redirect_from_locale=fr (JS)

Others sources

• http://www.howopensource.com/2014/12/introduction-to-server-sent-events/ (PHP with JS API)

• www.socket.io

curl -v "http://streamdata.motwin.net/http://mysite.com/myJsonRestService?X-SD-Token=[YOURTOKEN]"

OBVIOUS SSE !!

But …

• Unable to add header to URI with JS SSE librairies

• Unable to detect disconnection

But …

• Unable to add header to URI with JS SSE librairies

Use query parameters for token, Oauth

• Unable to detect disconnection

Heart beat with 0 data

streamdataio

@StreamdataIO