Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on 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.—

Published in: Internet
  • Login to see the comments

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 ❏ 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 👷 ➡
  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, 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
  7. 7. @dunglas Try it!
  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!
  19. 19. @dunglas The Mercure Hub
  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