Pushing data with Server Sent Events

Learn how to develop real time web applications by just using a HTTP Standard known as Server Sent Events.

Source code available in https://github.com/andrefreitas/talks-push-data-to-frontends

Transcript

1. Pushing data with SSE André Freitas
2. Real time web applications User experience is the number one priority by updating data automatically without the need of refreshing the page: - Live feeds - Counters - Push notifications Reporting dashboards are an example of these use cases.
3. What technology to use?
4. Server Sent Events If you are not building a webchat and data is only sent by the server, you can use Server Sent Events (SSE). It’s unidirectional communication. Backend Frontend Application data
5. It’s just HTTP You don’t need to learn a new protocol from scratch.
6. > GET /feed HTTP/1.1 > Host: localhost:8080 > User-Agent: curl/7.54.0 > Accept: */* > < HTTP/1.1 200 OK < Content-Type: text/event-stream < Cache-Control: no-cache < Connection: keep-alive < Transfer-Encoding: chunked < data: {“event”: “score”, score: [0, 1], “teams”: [FCP, SLB]} data: {“event”: “score”, score: [1, 1], “teams”: [FCP, SLB]} data: {“event”: “score”, score: [1, 2], “teams”: [FCP, SLB]} Client Server Event Stream TCP connection keeps alive
7. EventSource Interface EventSource is the Javascript interface for Server Sent Events. It opens a persistent connection to an HTTP Server. Those events are in the text/event-stream format. 1 var feed = new EventSource("/feed") 2 feed.onmessage = function(event) { 3 console.log(event.data) 4 }
8. Browser compatibility It works in Desktop and Mobile in Chrome, Firefox, Opera and Safari browsers.
9. Limit of connections There is a limit of 6 HTTP persistent connections in Chrome per host. Chrome source code
10. HTTP2 for the rescue You can use SSE with HTTP2 and multiplex connections under a single one.
11. Transparent reconnections EventSource automatically recovers and reconnects to the server.
12. Useful documentation • HTML Standard - Server-sent events • Mozilla - Using server-sent events • Mozilla - EventSource Interface
13. Event Stream Format
14. Format Field Value It’s a simple stream of text data encoded in UTF-8. Each message is separated by two new line characters. It contains a field and a value separated by :
15. Data Used for pushing data and received in onmessage callback.. When it receives multiple consecutive lines, it concatenates in the same event object. data: {“event”: “score”, score: [0, 1], “teams”: [FCP, SLB]} data: {“event”: “score”, score: [1, 1], “teams”: [FCP, SLB]} data: this is a multiline data: message what will be concatenated
16. Event Used for naming type of events. You must use the addEventListener() for named events callbacks. event: score data: {score: [0, 1], “teams”: [FCP, SLB]} event: fault data: {game: “fcp-slb”, player: “Deco”}
17. ID Event ID to set the last id received. Event source will send it in the Last-Event-ID header upon a reconnection. id: 1 event: score data: 123 id: 2 event: fault data: pereira Connection dropped! > GET /feed HTTP/1.1 > Host: localhost:8080 > User-Agent: curl/7.54.0 > Accept: */* > Last-Event-ID: 2 reconnection
18. Retry Server can set the client’s reconnection interval. retry: 15000 data: some event data: another event
19. Comment A message that starts with : is considered a comment. It is used sometimes to keep the connection alive. : this is a comment data: some event data: another event
20. How to deal with authentication? The EventSource interface only accepts an URL and no Headers so you can use a token as Query Parameter. The Token can be a JWT. 1 var feed = new EventSource("/feed?token=jr7g2f762f52f") 2 feed.onmessage = function(event) { 3 console.log(event.data) 4 }
21. Breaking the ice...
23. Demo
24. Github repository with the demo
25. Thank you! Hope you start streaming data to your web applications... andrefreitas.pt