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

1. @dunglas
A Modern Push Protocol,
Natively Supported by Symfony & API Platform

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. @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. @dunglas
Push, Push, Push!

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. @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. @dunglas
Try it!
bit.ly/2H17hN3

9. @dunglas
The Mercure Protocol

10. @dunglas

11. @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

12. @dunglas
Stream events to clients

13. @dunglas
Internet Draft: draft-dunglas-mercure

14. @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)

15. @dunglas
© Narayan Prusty
What is Multiplexing in HTTP/2?
HTTP/2 Multiplexing

16. @dunglas
SSEs global support: 89%

17. @dunglas
There is a Polyfill for That!
SSEs global support (with polyfill): ~100%

19. @dunglas
The Mercure Hub

20. @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

21. @dunglas
The Mercure Hub
https://mercure.rocks

22. @dunglas
Starting the Hub

23. @dunglas

24. @dunglas
Using Docker

25. @dunglas
Using Docker Compose

26. @dunglas
Publishing

27. @dunglas
Publishing

28. @dunglas
Official component and bundle

29. @dunglas
Official Mercure support in Symfony

30. @dunglas
Configuration

31. @dunglas
Publishing: the Mercure Component

32. @dunglas
Publishing: Messenger Integration

33. @dunglas
Publishing: the Mercure Component

34. @dunglas
Subscribing

35. @dunglas
Subscribing: Basic Usage

36. @dunglas
Subscribing: Several Topics

37. @dunglas
Subscribing: URI Templates

39. @dunglas
The Discovery Mechanism

40. @dunglas
Discovery Mechanism
40

41. @dunglas
Discovery: Server-side

42. @dunglas
Discovery: Client-side

43. @dunglas
Authorization

44. @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

45. @dunglas
JSON Web Token and Targets

46. @dunglas
Publishing or Subscribing to All Targets

47. @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

48. @dunglas
Setting the cookie with Symfony

49. @dunglas
HTTP Header-based Authorization
❏ Set by the client
❏ Not supported by native EventSource
❏ Supported by the polyfill
❏ Recommended for servers

50. @dunglas
Publishing to Specific Targets

52. @dunglas
Official server-side and client-side support

53. @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

54. @dunglas
Auto-dispatch of API Every Updates
POST
PUT
PATCH and
DELETE
will trigger a
Mercure update

55. @dunglas

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

57. @dunglas
Scaffolding a
React Native App

61. @dunglas
Mercure, SF and Vue.js?
See you in Paris!

62. @dunglas 62
Thanks! Questions?
@dunglas @coopTilleuls