Mercure-Hub: How Mercure-hub Works

This documentation is part of the Getting Started guide. You can view the complete guide here: How to Get Started with Mercure-hub.

👋 Welcome to the Stackhero documentation!

Stackhero offers a ready-to-use Mercure-Hub cloud solution that provides a host of benefits, including:

  • Unlimited requests and message sizes.
  • Customizable domain name secured with HTTPS (for example, https://real-time.your-company.com).
  • Effortless updates with just a click.
  • Optimal performance and robust security powered by a private and dedicated VM.
  • Available in 🇪🇺 Europe and 🇺🇸 USA.

Save time and simplify your life: it only takes 5 minutes to try Stackhero's Mercure-Hub cloud hosting solution!

Consider a scenario where a customer is viewing a book with the ID 1.

On the front end, you subscribe to the topic /books/1 on Mercure-hub using the Server-Sent Events (SSE) API, a native HTML5 feature. With around 10 lines of JavaScript code and no need for external libraries, this approach remains both simple and efficient.

On the back end, when a book is purchased, you send an HTTP request to Mercure-hub to update the stock. For instance, if there are 7 books with the ID 1 and a user buys one, the updated stock becomes 6.

Your back end sends { stockCount: 6 } to the topic /books/1 on Mercure-hub so that every user viewing that book instantly receives the updated stock count. This process requires only an HTTP request from the back end and just a few lines of code on the front end.

This principle can be used to push data from the server to the client, between clients, or even between servers.