The end of polling : why and how to transform a REST API into a Data Streaming API?
2 likes1,192 views
The document discusses transforming a REST API into a data streaming API using real-time technologies like WebSockets and Server-Sent Events (SSE). It details the configurations, protocols, and implementations, highlighting their advantages over polling methods for improved user experience. Additionally, it mentions a case study on using these technologies for a stock market API that significantly reduced outgoing traffic and server load.
![JSON-PATCH (RFC-6902)
[{"title":"Value 0","price":66,"param1":"1","param2":"22","param3":"33"},
{"title":"Value 1","price":63,"param1":"11","param2":"2","param3":"53"},
{"title":"Value 2","price":85,"param1":"1","param2":"22","param3":"33"},
{"title":"Value 3","price":21,"param1":"31","param2":"12","param3":"4"},
{"title":"Value 4","price":10,"param1":"151","param2":"22","param3":"33"},
{"title":"Value 5","price":6,"param1":"11","param2":"21","param3":"33"},
{"title":"Value 6","price":60,"param1":"11","param2":"222","param3":"33"}]
[{"title":"Value 0","price":66,"param1":"1","param2":"22","param3":"33"},
{"title":"Value 1","price":63,"param1":"11","param2":"2","param3":"53"},
{"title":"Value 2","price":5,"param1":"1","param2":"22","param3":"33"},
{"title":"Value 3","price":21,"param1":"31","param2":"32","param3":"4"},
{"title":"Value 4","price":10,"param1":"151","param2":"22","param3":"33"},
{"title":"Value 5","price":6,"param1":"11","param2":"21","param3":"33"},
{"title":"Value 6","price":60,"param1":"11","param2":"222","param3":"33"}]
[{"op":"replace","path":"/2/price","value":5},
{"op":"replace","path":"/3/param2","value":"32"}]
@StreamdataIOstreamdataio](https://image.slidesharecdn.com/apistreamingnordicapis-161031184250/85/The-end-of-polling-why-and-how-to-transform-a-REST-API-into-a-Data-Streaming-API-26-320.jpg)
The end of polling : why and how to transform a REST API into a Data Streaming API?
- 1. @StreamdataIOstreamdataio API Streaming Why and how to transform a REST API into a Data Streaming API
- 2. ABOUT ME Developer Relation Co-Leader France @Audrey_Neveu @StreamdataIOstreamdataio
- 5. ANIMATION IS THE KEY... BUT WHY? @StreamdataIOstreamdataio
- 9. REFRESH BUTTON IS EVIL @StreamdataIOstreamdataio
- 12. SOLUTIONS FOR REAL-TIME APPLICATIONS ✓ Web Sockets ✓ Server-Sent Events ✓ (Long) Polling @StreamdataIOstreamdataio
- 13. IS NOT A SOLUTIONPOLLING... @StreamdataIOstreamdataio (and neither is long polling)
- 14. *TRUE* SOLUTIONS Push Technologies Web-Sockets Server-Sent Events 2008 2006 @StreamdataIOstreamdataio W3C Specification
- 15. PUSH TECHNOLOGIES Web-Sockets Server-Sent Events Text + Binary Text @StreamdataIOstreamdataio
- 16. PROTOCOLS GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 GET /stream HTTP/1.1 1 Host: example.com Accept: text/event-stream HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 Web-Sockets (RFC-6455) Server-Sent Events @StreamdataIOstreamdataio
- 18. MESSAGES FORMAT var msg = { type: "message", text: "Hello Nordic APIs!", id: 12345, date: Date.now() }; data: Hello Nordic APIs! data: Hello Nordic APIs data: with two lines data: {"time": "16:34:36", "text": "Hello Nordic APIs!"} id: 12345 event: foo data: Hello Nordic APIs! retry: 10000 @StreamdataIOstreamdataio Web-Sockets Server-Sent Events
- 19. IMPLEMENTATION Server-Sent Events @StreamdataIOstreamdataio Web-Sockets var websocket = new WebSocket ('ws://websocketserver/echo'); var eventSource = new EventSource ('http://sseserver/echo'); websocket.onOpen = function(){ ... }; eventSource.onopen = function(){ ... }; websocket.onMessage = function(e){ var data = e.data; var message = data.msg; ... }; eventSource.onMessage = function(e){ var message = JSON.parse(e.data); ... }; websocket.onError = function(e){ ... }; eventSource.onError = function(e){ ... }; ... eventSource .addEventListener('foo',function(e){ // do something }, false); eventSource .addEventListener('bar',function(e){ // do something else }, false);
- 20. LOST IN CONNECTION Server-Sent Events @StreamdataIOstreamdataio Web-Sockets
- 21. BROWSER SUPPORT Server-Sent Events 53. 49. 10. 39. 11. 14. 53. 49. 10. 39. 11. UC. @StreamdataIOstreamdataio Web-Sockets source : http://caniuse.com/
- 22. MOBILE BROWSER SUPPORT Server-Sent Events 51. 49. 10. 18. 52. source : http://caniuse.com/ 51. 49. 10. 18. 52. @StreamdataIOstreamdataio Web-Sockets
- 23. PERFORMANCES 8s 5s x1.6 8s 6s x1.3 16s 7s x.2.2 Web-Sockets SSE source: http://matthiasnehlsen.com/blog/2013/05/01/server-sent-events-vs-websockets/ Diff @StreamdataIOstreamdataio
- 25. Proxy-as-a-Service ✓ works with any JSON API ✓ streaming based on Server-Sent Events ✓ dynamic cache ✓ incremental updates STREAMDATA.IO @StreamdataIOstreamdataio
- 26. JSON-PATCH (RFC-6902) [{"title":"Value 0","price":66,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 1","price":63,"param1":"11","param2":"2","param3":"53"}, {"title":"Value 2","price":85,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 3","price":21,"param1":"31","param2":"12","param3":"4"}, {"title":"Value 4","price":10,"param1":"151","param2":"22","param3":"33"}, {"title":"Value 5","price":6,"param1":"11","param2":"21","param3":"33"}, {"title":"Value 6","price":60,"param1":"11","param2":"222","param3":"33"}] [{"title":"Value 0","price":66,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 1","price":63,"param1":"11","param2":"2","param3":"53"}, {"title":"Value 2","price":5,"param1":"1","param2":"22","param3":"33"}, {"title":"Value 3","price":21,"param1":"31","param2":"32","param3":"4"}, {"title":"Value 4","price":10,"param1":"151","param2":"22","param3":"33"}, {"title":"Value 5","price":6,"param1":"11","param2":"21","param3":"33"}, {"title":"Value 6","price":60,"param1":"11","param2":"222","param3":"33"}] [{"op":"replace","path":"/2/price","value":5}, {"op":"replace","path":"/3/param2","value":"32"}] @StreamdataIOstreamdataio
- 27. THE API PROVIDER BEST FRIEND Sample Case: Investment Mobile App @StreamdataIOstreamdataio Stockmarket API Web & Mobile Apps ➢ 25bn calls/month ✓ 90% reduction of the outgoing traffic & API Server Load ✓ 6 months acceleration in development