Streamdata.io
Efficiently Turn APIs into Real-time Experiences
NCrafts 2016
#ncrafts
Why? How?
WebSockets
Server-Sent Events
- Push techno
- W3C
- 2008
- Push techno
- W3C
- 2006
#ncrafts @ctranxuan
WebSockets
Server-Sent Events
#ncrafts
@ctranxuan
#ncrafts @ctranxuan
WebSockets
Server-Sent 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#ncrafts @ctranxuan
WebSockets
Server-Sent Events
proxies and load balancers reconfiguration
No need to reconfigure!
(it's HTTP)
#ncrafts @ctranxuan
WebSockets
Server-Sent Events
#ncrafts @ctranxuan
WebSockets
Server-Sent Events
binary + text
native browsers support
text
... but polyfills!
#ncrafts
#ncrafts @ctranxuan
Maximum browser connections per server/proxy
WebSockets
Server-Sent Events
| 3237 | 200 | 128 | 2970 | 900 |
|---|---|---|---|---|
| 6 | 6 | 8 | 6 | 6 |
|---|---|---|---|---|
HTTP
SSE
Beware of DOS!
WebSockets
Server-Sent Events
➟ use query params
WebSockets
Server-Sent 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);Web API
#ncrafts @ctranxuan
Some Java Servers
Some Clients
#ncrafts @ctranxuan
Use case: fetch 500 Tweets for a web page (nginx configured as a proxy)
"Perfs"
#ncrafts @ctranxuan
Use Cases
WebSockets
Server-Sent 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
#ncrafts @ctranxuan
Conclusion
Use the right tools for the right things.
Thank you!
Merci !
#ncrafts @ctranxuan
References
Polyfills JS
#ncrafts @ctranxuan
References
WebSockets / SSE
#ncrafts @ctranxuan
References
Connection limits
#ncrafts @ctranxuan
NCrafts 2016 #ncrafts Why? How? @StreamdataIO @ctranxuan
NCrafts - WebSockets and Server-Sent Events
By Streamdata.io
NCrafts - WebSockets and Server-Sent Events
WebSockets and Server-Sent Events. Why? How?
- 900
