Asynchrone avec Symfony Messenger et Mercure

Générer des PDF, des CSV, ou faire des traitements lourd lors du traitement d'une requête HTTP impacte lourdement les performances de l'application.

Pour pallier ce problème nous pouvons avoir recours à l'utilisation d'un système de asynchrone. Le composant Messenger sera un super allier pour nous faciliter cette tache.

Cependant, comment prévenir le client que son PDF est prêt ou que son import de données est fini ? Mercure nous simplifiera la tache pour notifier le client en temps réel.

Et si notre site est une SPA, pouvons nous tirer parti de ces composant pour rafraîchir notre application avec seulement 3 lignes de code JS ? Venez le découvrir !

Repository pour la démo

Transcript

1. Asynchrone avec Messenger et Mercure Symfony Live 2025 - Grégoire Pineau - @lyrixx Dev @JoliCode / @redirectionio CoreTeam @Symfony 1
2. Agenda 2 Mercure Asynchrone Messenger
3. Qu’est-ce que l’asynchrone ? Pourquoi faire de l’asynchrone ? 3
4. Démo : Un écran d’import de CSV 4
5. Démo : Un écran d’import de CSV 5
6. Problème : le mode synchrone 6
7. Problème : le mode synchrone • L’utilisateur doit attendre que la requête soit traitée 💤 • S’il change de page, l’import sera en échec 💥 • Le nombre de workers PHP (FastCGI ou mod_php) est une ressource limitée 🌤⛈🌪 7
8. Solution : le mode asynchrone • Le traitement sera relégué en arrière-plan ◦ Temps de réponse plus rapide • Par un autre processus ◦ Plus de problème avec FastCGI ou mod_php • Éventuellement sur une autre machine ◦ Distribution du load 8
9. Solution : un traitement asynchrone 9
10. Faire de l’asynchrone • DX / Ops plus compliqué • Les actions ne sont plus “temps réel” ◦ UX dégradée 👎 • Meilleur temps de réponse • Facilite la scalabilité • Gestion des erreurs simplifiée 👍 10
11. En route vers l’asynchrone 11
12. Point de départ 12
13. Symfony Messenger Un composant pour faire de l’asynchrone 13
14. Messenger ? On dispatch un message dans le bus Le bus route le message vers un handler Messenger agit comme un “man in the middle” 14
15. bin/console make:message CsvUploaded 15
16. Dispatch du message dans le Bus 16
17. Centraliser tous les messages via un bus, quelles conséquences ? • Logger chaque message • Valider les messages • Wrapper chaque handler dans une transaction SQL • Stocker le message quelque part… et ensuite exécuter une commande pour lire et traiter le message • Et bien plus encore, voir la conférence de Tugdual… 17
18. Les transports Où sont stockés les messages 18
19. Les transports : où lire / écrire les messages 19
20. Configuration 20
21. Faux transports 21
22. Il existe de faux transports sync:// Gère les messages de manière synchrone (dev / test) in-memory:// Ne dispatch pas les messages aux handlers (test) 22
23. Le routing 23
24. Le routing 24
25. Gérer les messages dans la queue (worker) 25
26. L’import n’est plus effectué 26
27. Le message est dans la queue 27
28. bin/console messenger:consume 28
29. Les options --limit=10 --failure-limit=2 --memory-limit=128M --time-limit=3600 29
30. Nouvelles tentatives et échecs 30
31. En cas d’erreurs 31
32. Nouvelles tentatives 32
33. Transport d’échec 33
34. Des nouvelles commandes 34
35. Des nouvelles commandes 35
36. En production 36
37. Des daemons pour les workers en production • Supervision ◦ SystemD - ou le superviseur de votre OS ◦ Supervisord ◦ Gérer par votre PaaS (Clever Cloud, Upsun, Heroku, …) • Penser à redémarrer les workers à chaque déploiement • Exécuter autant de worker que nécessaire (scaling) ◦ Ne pas ajouter plus de worker si la machine est déjà CPU bounded 37
38. Monitoring • Il faut monitorer la taille des queues • Surtout celle “failed” ◦ Et pourquoi pas faire un écran dans l’admin du site ! ◦ https://github.com/zenstruck/messenger-monitor-bundle 38
39. Pour finir avec messenger Quelques questions à se poser 39
40. Gestion des fichiers • Via la queue • Local • NFS / ZFS / XFS / GlusterFS • Distant (S3 Like) 40
41. Un message peut-il publier à son tour un message ? Oui ! 41
42. Et plus encore • Différents transports ◦ Doctrine ◦ AMQP ◦ Redis ◦ Amazon SQS ◦ Beanstalkd ◦ Intégration avec PHP Enqueue ▪ Kafka ▪ Google Pub/Sub (ou via petitpress/gps-messenger-bundle) • Sérialisation de message (JSON) • Middlewares et Event • … 42
43. Et Voilà ! Merci 🤗 En fait non, il y a encore un tout petit peu de boulot 43
44. Démo : Pas de feedback! 44
45. Une expérience utilisateur dégradée L’import de données est asynchrone L’utilisateur n’a aucun feedback : • Est-ce que l’import est en cours ? • Est-ce que l’import est fini ? • Est-ce que l’import s’est bien terminé ? 45
46. Il faut donner un feedback à l’utilisateur (en temps réel) 46
47. Mercure 47
48. Démo : Du feedback! 48
49. Comment pousser de la donnée vers le client ? 49
50. Les bénéfices des websockets • Communication Full Duplex • Bas niveau : contrôle total Les websockets VS SSE ? Les inconvénients des websockets • Bas niveau, donc à implémenter : ◦ Authentification ◦ Reconnexion ◦ Historique des messages “perdus” • Dur à sécuriser • Déprécié par HTTP 2 et 3 ◦ WebTransport 50
51. Mercure : Un “nouveau” protocole • “Surcouche à SSE” • Une spécification sur IEFT (encore en draft) • Full Duplex ◦ Subscribe : SSE ◦ Publish : HTTP POST • Nativement: reconnexion, récupération des messages “perdus”, historique • Sécurisé avec JWT • Conçu pour les scripts avec une courte durée de vie: PHP, FastCGI, Serverless 51
52. Can I Use ? Il existe un polyfill pour IE 5.5+ 52
53. Mercure : son workflow C’est un serveur 53
54. Comment publier avec Symfony ? 54
55. Installation Internal Navigateur 55
56. Publier sur le hub Topic 56
57. Le topic 57
58. Comment consommer depuis un navigateur ? 58
59. Connexion au Hub Mercure en JavaScript 59
60. Connexion au Hub Mercure en JavaScript 60
61. Que faire passer dans mercure ? Plusieurs stratégies s’offrent à vous : • Un ID pour que le client refresh la data ? • Du JSON pour le consommer en JavaScript ? • Du HTML ? 61
62. Du HTML ! La zone de status 62
63. Initialization 63
64. Mise à jour du DOM 64
65. Symfony UX + Turbo Qui utilise Turbo ? 65
66. Symfony UX + Turbo composer require symfony/ux-turbo 66
67. Connecter SSE et Turbo Turbo peut se connecter à n'importe quelle forme de flux pour recevoir et traiter des actions de flux. Une source de flux doit envoyer des messages MessageEvent qui contiennent l'action de flux HTML dans l'attribut data de cet événement. [...] https://turbo.hotwired.dev/reference/streams 67
68. Message Event ? 68
69. Brancher Turbo & SSE 69
70. On peut faire mieux ? 70
71. Oui ! Sans écrire une seule ligne de JS ! 71 Plus besoin de JS ! Block status
72. Mise à jour de l’importer 72
73. Et si on ne fait pas de twig ? 73
74. Avec React ? • Sérialisez vos DTO / Entités comme dans votre API ◦ Avec un Store (redux) ▪ Mettre à jour le store ◦ Avec ReactQuery ▪ Mettre à jour le cache 74
75. La sécurité 75
76. La sécurité • Mercure utilise JWT (JSON Web Token) • Le publisher doit être authentifié • Un subscriber ◦ Peut être anonyme (si la configuration l'autorise) ◦ Doit être authentifié pour recevoir du contenu privé • Un update peut cibler une ou plusieurs targets • Deux transports : cookie ou Authorization header 76
77. Le serveur (hub) 77
78. Le serveur (hub) • Il existe une implémentation de référence (en Go) ◦ Rapide ◦ Fonctionne partout (binaire statique, plugin Caddy, image docker) ◦ HTTP2 et HTTPS (via let’s encrypt) ◦ Support de CORS + CSRF ◦ Cloud native (12Factor app) ◦ Open Source (AGPL) • Il existe au moins une autre implémentation ◦ En JavaScript https://github.com/Ilshidur/node-mercure 78
79. Debug 79
80. Outils de debug 80
81. Outils de debug 81
82. Outils de debug 82
83. Conclusion 83
85. Conclusion • Messenger ◦ Simple à mettre en place (en dev et en prod) ◦ Son utilisation est très simple ◦ Le composant est flexible ◦ Permet de décharger le front au profit de worker • Mercure ◦ Moins simple à mettre en place (en dev comme en prod) ▪ Mais il existe une version managée ◦ Son utilisation est très simple ◦ Donne du feedback à l’utilisateur en temps réel ◦ Améliore la DX 85
86. AMQP 86
87. Vous avez aimé la démo ? Retrouvez le code sur github: lyrixx/async-messenger-mercure 87
88. Merci Symfony Live 2025 - Grégoire Pineau - @lyrixx Dev @JoliCode / @redirectionio CoreTeam @Symfony 88
89. Des questions ? Symfony Live 2025 - Grégoire Pineau - @lyrixx Dev @JoliCode / @redirectionio CoreTeam @Symfony 89