We know interactivity is the key to keep our user’s interest alive but we can’t reduce animation to UI anymore. Twitter, Waze, Slack… users are used to have real-time data in applications they love. But how can you turn your static API into a stream of data? When talking about data streaming, we often think about WebSockets. But have you ever heard of Server-Sent Events? In this tools-in-action we will compare both technologies to understand which one you should opt for depending on your usecase and I’ll show you how we have been even further by reducing the amount of data to transfer with JSON-Patch. And because real-time data is not only needed by web (and because it’s much more fun), I’ll show you how we can make drone dance on streamed APIs.

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

3. MODERN TIMES
@StreamdataIOstreamdataio

4. OUR GOAL
@StreamdataIOstreamdataio

5. ANIMATION IS THE KEY... BUT WHY?
@StreamdataIOstreamdataio

6. BECAUSE OF EVOLUTION
@StreamdataIOstreamdataio

7. USER INTERFACE
@StreamdataIOstreamdataio

8. KEEP CALM AND...
@StreamdataIOstreamdataio
LEAVE.

9. REFRESH BUTTON IS EVIL
@StreamdataIOstreamdataio

10. REAL-TIME USER EXPERIENCE
@StreamdataIOstreamdataio

11. API STREAMING
@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

17. CONFIGURATION
Server-Sent Events
@StreamdataIOstreamdataio
Web-Sockets

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

24. CHOOSE WISELY
@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

28. DEMO
@StreamdataIOstreamdataio

29. VOTE SERVER-SENT EVENTS!
@StreamdataIOstreamdataio

30. @StreamdataIOstreamdataio
THANKS!
Q&A