APIdays Paris 2018 - Deliver API Updates in Real Time with Mercure.rocks Kévin Dunglas, CEO, Les-Tilleuls.coop
•
0 likes•225 views
The document discusses live updates using server-sent events (SSEs) and the Mercure protocol. It begins by outlining several use cases for push notifications and real-time updates. It then compares different protocols for live updates like polling, websockets, and SSEs. The bulk of the document describes the Mercure protocol which is built on SSEs and supports features like authentication, reconnection, and publishing/subscribing. It provides details on using the reference implementation including starting the hub, subscribing/publishing, and integrating with frameworks like Symfony and React.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to APIdays Paris 2018 - Deliver API Updates in Real Time with Mercure.rocks Kévin Dunglas, CEO, Les-Tilleuls.coop
Similar to APIdays Paris 2018 - Deliver API Updates in Real Time with Mercure.rocks Kévin Dunglas, CEO, Les-Tilleuls.coop (20)
More from apidays
More from apidays (20)
Recently uploaded
Recently uploaded (20)
APIdays Paris 2018 - Deliver API Updates in Real Time with Mercure.rocks Kévin Dunglas, CEO, Les-Tilleuls.coop
- 1. @dunglas 1 Live Updates the Right Way
- 2. @dunglas Kévin Dunglas ❏ Co-founder of Les-Tilleuls.coop ❏ Symfony Core Team ❏ Creator of API Platform 2 @dunglas
- 3. @dunglas Dev/consulting/training - Lille/Paris ✍ Self-managed since 2011 30 people, 1,000% in 6 years 👷 ➡ jobs@les-tilleuls.coop Les-Tilleuls.coop 3
- 5. @dunglas Push from server to clients: Use Cases ❏ Push notifications ❏ Synchronize all connected devices in real-time ❏ Notify users when an async task has finished ❏ Collaborative editing (Google Drive-like) Alternative to Pusher, WebSocket and StreamData 5
- 7. @dunglas Use Case #1: Live Availability ❏ A webapp retrieves the availability status of a product from a REST API and displays it: only one is still available ❏ 3 minutes later, the last product is bought. ❏ The webapp's view instantly shows that this product isn't available anymore 7
- 8. @dunglas Use Case #2: Async Job ❏ A webapp tells the server to compute a report. This task is costly and will take some time to complete ❏ The server delegates the computation of the report to an asynchronous worker (using message queue), and closes the connection with the webapp ❏ The worker sends the report to the webapp when it is computed 8
- 9. @dunglas Use Case #3: Collaborative Editing ❏ A webapp allows several users to edit the same document concurrently ❏ Changes made are immediately broadcasted to all connected users 9
- 11. @dunglas 11 © Ilya Grigorik High Performance Browser Networking (O'Reilly)
- 12. @dunglas Polling Pros ❏ Plain old HTTP ❏ Supported by all browsers Cons ❏ Simplex communication ❏ Inefficient 12
- 13. @dunglas WebSocket (RFC 6455) Pros ❏ Low level: full control ❏ Full-duplex communication ❏ Supported by 93% of the browsers in the wild Cons ❏ Low level: no built-in ❏ auth ❏ re-connection ❏ state reconciliation ❏ Not compatible with HTTP/2 ❏ Superseded by h2 streams 13
- 14. @dunglas Web Push & WebSub Web Push (RFC 8030) + Works even when the webapp isn’t open - Mostly designed for the Notifications API - Quotas, limited payload size, proprietary hubs WebSub (W3C) + High level (auto- discoverable, auth) + Hub (open) - Server-to-server only 14
- 15. @dunglas Server-Sent Events (W3C) Pros ❏ High-level: built-in ❏ re-connection ❏ state reconciliation ❏ Native support in JS ❏ Built on top of HTTP ❏ Can leverage HTTP/2 ❏ Connection-less push proxies (mobile) Cons ❏ Simplex 15
- 17. @dunglas 17 © Bharathvaj Ganesan, codeburst.io Polling vs SSE vs WebSocket— How to choose the right one
- 18. @dunglas 18 SSEs global support: 89%
- 19. @dunglas 19 No IE? No Edge?!
- 20. @dunglas 20 There is a Polyfill for That! SSEs global support (with polyfill): ~100%
- 22. @dunglas 22 © Narayan Prusty What is Multiplexing in HTTP/2? HTTP/2 Multiplexing
- 23. @dunglas 23 Multiplexing In Action
- 24. @dunglas 24 HTTP/2 global support: 89% ...and SSEs also work with HTTP/ 1.x
- 26. @dunglas 26
- 27. @dunglas Mercure, the Protocol ❏ Full-duplex ❏ Built on top of SSEs and HTTP (POST) ❏ Plays well with techs not supporting persistent connections (serverless, PHP…) ❏ Authorization mechanism (private updates) ❏ Built-in reconnection support and retrieving of lost messages ❏ Auto-discoverable, designed for REST and GraphQL APIs ❏ Encryption support 27
- 28. @dunglas 28 Stream events to clients
- 30. @dunglas Why Server-Sent Events? ❏ Leverage HTTP/2 (WebSocket don’t) ❏ High-level: built-in ❏ re-connection ❏ state reconciliation ❏ Native support in modern browsers ❏ Built on top of HTTP ❏ easy to implement ❏ Pass through all firewalls ❏ Connection-less push proxies (mobile) 30
- 31. @dunglas 31 SSEs global support: 89%
- 32. @dunglas 32 IE/Edge? There is a Polyfill for That! SSEs global support (with polyfill): ~100%
- 33. @dunglas 33 © Narayan Prusty What is Multiplexing in HTTP/2? Mercure & HTTP/2 Multiplexing
- 35. @dunglas Reference Implementation ❏ Implements 100% of the Mercure protocol ❏ Fast, written in Go ❏ Works everywhere: static binaries and Docker ❏ Automatic HTTP/2 and HTTPS ❏ CORS support, CSRF protection ❏ Cloud Native (12Factor App) ❏ Open source (AGPL) 35 Managed and on-premise version available in beta!
- 38. @dunglas 38
- 53. @dunglas Authorization ❏ Uses JSON Web Token (JWT) ❏ An update can be intended for one or several targets ❏ Publisher: must be authenticated ❏ Subscriber: ❏ Can be anonymous (if allowed by the config) ❏ Must be authenticated to receive updates intended for targets ❏ Two transports: cookie and Authorization header 53
- 54. @dunglas JSON Web Token and Targets 54
- 55. @dunglas Publishing or Subscribing to All Targets 55
- 56. @dunglas Cookie-based Authorization ❏ Set by the app server during the discovery ❏ The app server and the Mercure hub must share the same domain (or subdomain) ❏ Supported by EventSource ❏ Recommended for web browsers 56
- 57. @dunglas HTTP Header-based Authorization ❏ Set by the client ❏ Not supported by native EventSource ❏ Supported by the polyfill ❏ Recommended for servers 57
- 58. @dunglas Publishing to Specific Targets 58
- 59. @dunglas API Platform & React 59
- 61. @dunglas 61