Symfony, Mercure, React: Real-time Updates In Less Than 100 Lines Of Code

This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).

A walkthrough of adding real-time updates to a Chinese checkers game built with Symfony and React using Mercure, a protocol built on top of Server-Sent Events. The Symfony backend publishes game state changes to a Mercure hub after each move, while a custom React hook using the native EventSource API subscribes to those updates and refreshes the UI instantly. The setup requires minimal code — mostly installing the Mercure bundle, configuring a JWT secret, and writing a small custom hook. One notable caveat is that EventSource's automatic reconnection doesn't work reliably in practice, and the author suggests using a dedicated SSE client library with Last-Event-ID support for more robust reconnection handling.

6m read timeFrom marmelab.com
Post cover image
Table of contents
The Context: Chinese Checkers GameHow Does Mercure Help?Symfony + Mercure = ❤️React + EventSource = ❤️How To Reconnect Automatically When The Connection Is Closed? 🔌To Conclude

Sort: