WebSockets and Server-Sent Events. Why? How? @ BreizhCamp

Web becomes mobile and real-time... Using classical HTTP requests doesn't help for this job. Why people use more and more WebSockets? And what about Server-Sent Events? Short presentation of these technologies, assets/drawbacks of each, when to use them, for which use-cases and useful links.

Transcript

1. BreizhCamp 2016 #BzhCmp Pourquoi ? Comment ? Pourquoi ? Comment ? @StreamdataIO @ctranxuan
2. WebSockets WebSockets Server-Sent Server-Sent Events Events Push techno W3C 2008 Push techno W3C 2006
3. WebSockets WebSockets Server-Sent Server-Sent Events Events
4. WebSockets WebSockets Server-Sent Server-Sent Events Events TCP low-level protocol HTTP upgrade handshake GET /chat HTTP/1.1 Host: example.com:8000 Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 GET /stream HTTP/1.1 1 Host: example.com Accept: text/event-stream
5. WebSockets WebSockets Server-Sent Server-Sent Events Events proxies and load balancers reconfiguration No need to reconfigure! (it's HTTP)
6. WebSockets WebSockets Server-Sent Server-Sent Events Events
7. WebSockets WebSockets native browsers native browsers support support text text Server-Sent Server-Sent Events Events binary + text binary + text ... but polyfills! ... but polyfills!
8. https://goo.gl/cCMIGf
9. Maximum browser connections per Maximum browser connections per server/proxy server/proxy WebSockets WebSockets Server-Sent Server-Sent Events Events 3237 200 128 2970 900 6 6 8 6 6 HTTP SSE Beware of DOS! Beware of DOS!
10. WebSockets WebSockets Server-Sent Server-Sent Events Events ➟ ➟ ➟ ➟ use query params use query params
11. Web API Web API WebSockets WebSockets Server-Sent Server-Sent Events Events var websocket = new WebSocket('ws://mywebso/echo'); websocket.onopen = function () { ... }; websocket.onmessage = function (e) { ... }; websocket.onerror = function (error) { ... }; var eventSource = new EventSource('http://mysse/echo'); eventSource.onopen = function () { ... }; eventSource.onmessage = function (e) { ... }; eventSource.onerror = function (error) { ... }; source.addEventListener('foo', function(e) { ... }, false);
12. Some Java Some Java Servers Servers Some Clients Some Clients
13. "Perfs" "Perfs" Use case: Préchargement de 500 Tweets sur une page web (nginx configuré en tant que proxy) Source http://matthiasnehlsen.com/blog/2013/05/01/server-sent-events-vs-websockets/
14. Use Cases Use Cases WebSockets WebSockets Server-Sent Server-Sent Events Events Fintech / Trading Betting Games Realtime timetables Animated data apps (charts, monitoring, etc.) etc. Chat, chat, chat (*) Share living editing GPS GoogleMap- like Games (*) WebRTC might be even more suitable
15. Conclusion Conclusion Use the right tools for the right things. Use the right tools for the right things.
16. Merci ! Merci ! Thank you! Thank you! @StreamdataIO @StreamdataIO
17. Merci ! Merci ! Merci à pour l'utilisation du thème BreizhCamp avec revealjs Gregory Houllier
18. References References Streamdata.io fork from AMVTek AMVTek Yaffle Remi Polyfills JS Polyfills JS
19. References References What is Server-Sent Events? WebSockets vs SSE Getting started with WebSockets and SSE Server-Sent Events: The simplest realtime browser spec WebSockets / SSE WebSockets / SSE
20. References References Hacking WebSockets StackOverflow Connection limits Connection limits