the end of polling (audrey neveu)
TRANSCRIPT
@StreamdataIOstreamdataio
API StreamingWhy and how to transform a REST API
into a Data Streaming API
ABOUT ME
Developer Relation Co-Leader France
@Audrey_Neveu
@StreamdataIOstreamdataio
MODERN TIMES
@StreamdataIOstreamdataio
OUR GOAL
@StreamdataIOstreamdataio
ANIMATION IS THE KEY... BUT WHY?
@StreamdataIOstreamdataio
BECAUSE OF EVOLUTION
@StreamdataIOstreamdataio
USER INTERFACE
@StreamdataIOstreamdataio
KEEP CALM AND...
@StreamdataIOstreamdataio
LEAVE.
REFRESH BUTTON IS EVIL
@StreamdataIOstreamdataio
REAL-TIME USER EXPERIENCE
@StreamdataIOstreamdataio
API STREAMING
@StreamdataIOstreamdataio
SOLUTIONS FOR REAL-TIME APPLICATIONS
✓ Web Sockets
✓ Server-Sent Events
✓ (Long) Polling
@StreamdataIOstreamdataio
IS NOT A SOLUTIONPOLLING...
@StreamdataIOstreamdataio
(and neither is long polling)
*TRUE* SOLUTIONS
Push Technologies
Web-Sockets Server-Sent Events
2008 2006
@StreamdataIOstreamdataio
W3C Specification
PUSH TECHNOLOGIES
Web-Sockets Server-Sent Events
Text + Binary Text
@StreamdataIOstreamdataio
PROTOCOLS
GET /chat HTTP/1.1Host: example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13
GET /stream HTTP/1.1 1Host: example.comAccept: text/event-stream
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13
Web-Sockets (RFC-6455)
Server-Sent Events
@StreamdataIOstreamdataio
CONFIGURATION
Server-Sent Events
@StreamdataIOstreamdataio
Web-Sockets
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
IMPLEMENTATIONServer-Sent Events
@StreamdataIOstreamdataio
Web-Socketsvar 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);
LOST IN CONNECTION
Server-Sent Events
@StreamdataIOstreamdataio
Web-Sockets
BROWSER SUPPORT
Server-Sent Events
53. 49. 10. 39. 11. 14. 53. 49. 10. 39. 11. UC.
@StreamdataIOstreamdataio
Web-Sockets
source : http://caniuse.com/
MOBILE BROWSER SUPPORT
Server-Sent Events
51. 49. 10. 18. 52.
source : http://caniuse.com/
51. 49. 10. 18. 52.
@StreamdataIOstreamdataio
Web-Sockets
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
CHOOSE WISELY
@StreamdataIOstreamdataio
Proxy-as-a-Service
✓ works with any JSON API
✓ streaming based on Server-Sent Events
✓ dynamic cache
✓ incremental updates
STREAMDATA.IO
@StreamdataIOstreamdataio
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
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
DEMO
@StreamdataIOstreamdataio
VOTE SERVER-SENT EVENTS!
@StreamdataIOstreamdataio
@StreamdataIOstreamdataio
THANKS!Q&A