Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
@dunglas
A Modern Push Protocol,
Natively Supported by Symfony & API Platform
@dunglas
Kévin Dunglas
❏ Co-founder of Les-Tilleuls.coop
❏ Creator of Mercure, API Platform and a few more things
❏ Symfon...
@dunglas
Dev/consulting/training - Lille/Paris
✍ Self-managed since 2011
35 people, 1,000% growth in 6 years
👷 ➡ jobs@les-...
@dunglas
Push, Push, Push!
@dunglas
Mercure: Push from Server to Clients
❏ Push notifications
❏ Synchronize connected devices in real-time
❏ Notify u...
@dunglas
Today’s Use Case: Real-Time UI Updates
1. Some data is changed by a user through a form
2. UIs of all connected d...
@dunglas
Try it!
bit.ly/2H17hN3
@dunglas
The Mercure Protocol
@dunglas
@dunglas
Mercure, the Protocol
❏ Full-duplex
❏ Built on top of SSEs and HTTP (POST)
❏ Plays well with techs not supporting...
@dunglas
Stream events to clients
@dunglas
Internet Draft: draft-dunglas-mercure
@dunglas
Why Server-Sent Events?
❏ Leverage HTTP/2 (WebSocket doesn’t)
❏ High-level: built-in
❏ re-connection
❏ state reco...
@dunglas
© Narayan Prusty
What is Multiplexing in HTTP/2?
HTTP/2 Multiplexing
@dunglas
SSEs global support: 89%
@dunglas
There is a Polyfill for That!
SSEs global support (with polyfill): ~100%
@dunglas
The Mercure Hub
@dunglas
The Mercure Hub
❏ Implements 100% of the Mercure protocol
❏ Fast, written in Go
❏ Works everywhere: static binari...
@dunglas
The Mercure Hub
https://mercure.rocks
@dunglas
Starting the Hub
@dunglas
@dunglas
Using Docker
@dunglas
Using Docker Compose
@dunglas
Publishing
@dunglas
Publishing
@dunglas
Official component and bundle
@dunglas
Official Mercure support in Symfony
@dunglas
Configuration
@dunglas
Publishing: the Mercure Component
@dunglas
Publishing: Messenger Integration
@dunglas
Publishing: the Mercure Component
@dunglas
Subscribing
@dunglas
Subscribing: Basic Usage
@dunglas
Subscribing: Several Topics
@dunglas
Subscribing: URI Templates
@dunglas
The Discovery Mechanism
@dunglas
Discovery Mechanism
40
@dunglas
Discovery: Server-side
@dunglas
Discovery: Client-side
@dunglas
Authorization
@dunglas
Authorization
❏ Uses JSON Web Token (JWT)
❏ An update can be intended for one or several targets
❏ Publisher: mus...
@dunglas
JSON Web Token and Targets
@dunglas
Publishing or Subscribing to All Targets
@dunglas
Cookie-based Authorization
❏ Set by the app server during the discovery
❏ The app server and the Mercure hub must...
@dunglas
Setting the cookie with Symfony
@dunglas
HTTP Header-based Authorization
❏ Set by the client
❏ Not supported by native EventSource
❏ Supported by the poly...
@dunglas
Publishing to Specific Targets
@dunglas
Official server-side and client-side support
@dunglas
Mercure Support in API Platform
❏ New in 2.4
❏ Built on top of the Symfony integration
❏ Mercure Hub provided wit...
@dunglas
Auto-dispatch of API Every Updates
POST
PUT
PATCH and
DELETE
will trigger a
Mercure update
@dunglas
@dunglas
Scaffolding a React

Progressive Web App
This skeleton is provide in the full API Platform distribution
@dunglas
Scaffolding a

React Native App
@dunglas
Mercure, SF and Vue.js?
See you in Paris!
@dunglas 62
Thanks! Questions?
@dunglas @coopTilleuls
Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)
Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)
Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)
Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)
Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)
Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)
Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)
Prochain SlideShare
Chargement dans…5
×

Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)

18 200 vues

Publié le

Mercure.rocks is a brand new protocol allowing to push data updates to web browsers and other HTTP clients in a convenient, fast, reliable and battery-efficient way. It is especially useful to publish real-time updates of resources served through web APIs, to reactive web and mobile apps.

Both Symfony and API Platform now have an official support for this protocol!

From the ground, Mercure has been designed to work with technologies not able to maintain persistent connections. It's especially relevant in serverless environments, but is also convenient when using PHP or FastCGI scripts.

Mercure is basically a higher-level replacement for WebSocket. Unlike WebSocket, it is compatible with HTTP/2 and HTTP/3.
It has been designed with hypermedia APIs in mind, is auto-discoverable through the Web Linking RFC and is also compatible with GraphQL.
It natively supports authorization, reconnection in case of network issue (with refetching of missed events), subscribing to several topics, topics patterns (using templated URIs)...

Because it is built on top of Server-sent Events and plain old HTTP requests, it is already compatible with all modern browsers, and requires 0 client-side dependencies.

The protocol is open (available as an Internet Draft), and a reference open source implementation of the server written in Go is available.—

Publié dans : Internet
  • Soyez le premier à commenter

Official "push" and real-time capabilities for Symfony and API Platform (Mercure protocol)

  1. 1. @dunglas A Modern Push Protocol, Natively Supported by Symfony & API Platform
  2. 2. @dunglas Kévin Dunglas ❏ Co-founder of Les-Tilleuls.coop ❏ Creator of Mercure, API Platform and a few more things ❏ Symfony Core Team @dunglas
  3. 3. @dunglas Dev/consulting/training - Lille/Paris ✍ Self-managed since 2011 35 people, 1,000% growth in 6 years 👷 ➡ jobs@les-tilleuls.coop Les-Tilleuls.coop
  4. 4. @dunglas Push, Push, Push!
  5. 5. @dunglas Mercure: Push from Server to Clients ❏ Push notifications ❏ Synchronize connected devices in real-time ❏ Notify users when an async task has finished ❏ Collaborative editing (Google Drive-like) Alternative to WebSocket, socket.io and Pusher
  6. 6. @dunglas Today’s Use Case: Real-Time UI Updates 1. Some data is changed by a user through a form 2. UIs of all connected devices (webapp, smartphone…) instantly display updated data bit.ly/2H17hN3
  7. 7. @dunglas Try it! bit.ly/2H17hN3
  8. 8. @dunglas The Mercure Protocol
  9. 9. @dunglas
  10. 10. @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
  11. 11. @dunglas Stream events to clients
  12. 12. @dunglas Internet Draft: draft-dunglas-mercure
  13. 13. @dunglas Why Server-Sent Events? ❏ Leverage HTTP/2 (WebSocket doesn’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)
  14. 14. @dunglas © Narayan Prusty What is Multiplexing in HTTP/2? HTTP/2 Multiplexing
  15. 15. @dunglas SSEs global support: 89%
  16. 16. @dunglas There is a Polyfill for That! SSEs global support (with polyfill): ~100%
  17. 17. @dunglas The Mercure Hub
  18. 18. @dunglas The Mercure Hub ❏ 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) Managed and on-premise version available! dunglas+mercure@gmail.com
  19. 19. @dunglas The Mercure Hub https://mercure.rocks
  20. 20. @dunglas Starting the Hub
  21. 21. @dunglas
  22. 22. @dunglas Using Docker
  23. 23. @dunglas Using Docker Compose
  24. 24. @dunglas Publishing
  25. 25. @dunglas Publishing
  26. 26. @dunglas Official component and bundle
  27. 27. @dunglas Official Mercure support in Symfony
  28. 28. @dunglas Configuration
  29. 29. @dunglas Publishing: the Mercure Component
  30. 30. @dunglas Publishing: Messenger Integration
  31. 31. @dunglas Publishing: the Mercure Component
  32. 32. @dunglas Subscribing
  33. 33. @dunglas Subscribing: Basic Usage
  34. 34. @dunglas Subscribing: Several Topics
  35. 35. @dunglas Subscribing: URI Templates
  36. 36. @dunglas The Discovery Mechanism
  37. 37. @dunglas Discovery Mechanism 40
  38. 38. @dunglas Discovery: Server-side
  39. 39. @dunglas Discovery: Client-side
  40. 40. @dunglas Authorization
  41. 41. @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
  42. 42. @dunglas JSON Web Token and Targets
  43. 43. @dunglas Publishing or Subscribing to All Targets
  44. 44. @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
  45. 45. @dunglas Setting the cookie with Symfony
  46. 46. @dunglas HTTP Header-based Authorization ❏ Set by the client ❏ Not supported by native EventSource ❏ Supported by the polyfill ❏ Recommended for servers
  47. 47. @dunglas Publishing to Specific Targets
  48. 48. @dunglas Official server-side and client-side support
  49. 49. @dunglas Mercure Support in API Platform ❏ New in 2.4 ❏ Built on top of the Symfony integration ❏ Mercure Hub provided with ❏ the Docker setup ❏ the Kubernetes chart ❏ Ready to use
  50. 50. @dunglas Auto-dispatch of API Every Updates POST PUT PATCH and DELETE will trigger a Mercure update
  51. 51. @dunglas
  52. 52. @dunglas Scaffolding a React
 Progressive Web App This skeleton is provide in the full API Platform distribution
  53. 53. @dunglas Scaffolding a
 React Native App
  54. 54. @dunglas Mercure, SF and Vue.js? See you in Paris!
  55. 55. @dunglas 62 Thanks! Questions? @dunglas @coopTilleuls

×