websocket vs sse - paris.js - 24/06/15
TRANSCRIPT
![Page 1: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/1.jpg)
Paris.js (23/05/2015)
![Page 2: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/2.jpg)
HTTP is …
• Half-duplex (Client/Server)• Verbose (ACK required + headers)• Completed by hacks– Long Polling– Comet/Ajax– Status of answer “Active Ongoing”
![Page 3: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/3.jpg)
Websocket
• TCP connection• Full-duplex (bi-directional)• W3C defined JS API
![Page 4: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/4.jpg)
Server-Sent Events (RFC 6455)
• HTTP 1.1• Server-push (uni-directional)• W3C defined event source API HTML5
![Page 5: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/5.jpg)
![Page 6: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/6.jpg)
Note : SSE can be poly-filled to backport
![Page 7: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/7.jpg)
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)
![Page 8: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/8.jpg)
Web infra compatibility(Load balancer, server and/or
proxy)
Websocket SSEReconfigurations
required !
(Fall-back mechanism is a must!)
No changed required
![Page 9: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/9.jpg)
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.
![Page 10: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/10.jpg)
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/
![Page 11: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/11.jpg)
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/
![Page 12: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/12.jpg)
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)• …
![Page 13: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/13.jpg)
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)
![Page 14: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/14.jpg)
Others sources
• http://www.howopensource.com/2014/12/introduction-to-server-sent-events/ (PHP with JS API)
• www.socket.io
![Page 15: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/15.jpg)
curl -v "http://streamdata.motwin.net/http://mysite.com/myJsonRestService?X-SD-Token=[YOURTOKEN]"
![Page 16: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/16.jpg)
OBVIOUS SSE !!
![Page 17: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/17.jpg)
But …
• Unable to add header to URI with JS SSE librairies
• Unable to detect disconnection
![Page 18: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/18.jpg)
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
![Page 19: Websocket vs SSE - Paris.js - 24/06/15](https://reader037.vdocument.in/reader037/viewer/2022102518/55c4b55cbb61ebfb768b45ac/html5/thumbnails/19.jpg)
streamdataio
@StreamdataIO