Description of websocket and SSE (server sent event), advantages and disavantages Links for video/blog with good how-to

1. Paris.js (23/05/2015)

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

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

4. Server-Sent Events (RFC
6455)
• HTTP 1.1
• Server-push (uni-directional)
• W3C defined event source API HTML5

6. Note : SSE can be poly-filled to backport

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

8. Web infra compatibility
(Load balancer, server and/or proxy)
Websocket SSE
Reconfigurations required
!
(Fall-back mechanism is a
must!)
No changed
required

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

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

11. Solutions for dynamic data
Streams Browser
support
Web infra
compatibility
Easiness to
dev
Load
(network /
Device)
App latency
Polling/Lon
g Polling
Bi-dir
Websocket Bi-dir
SSE Uni-dir
Socket.io
https://www.playframework.com/

12. 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)
• …

13. 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/server-sent-
events-vs-websockets/ (scala)
• http://www.html5rocks.com/en/tutorials/eventsource/basi
cs/?redirect_from_locale=fr (JS)

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

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

16. OBVIOUS SSE !!

17. But …
• Unable to add header to URI with JS SSE
librairies
• Unable to detect disconnection

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

19. streamdataio
@StreamdataIO