How I implemented real-time updates in less than 100 lines of code using Mercure in a React application with Symfony.

marmelab

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.

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

How To Reconnect Automatically When The Connection Is Closed? 🔌