Mercure-Hub: Mercure-hubの仕組み

このドキュメントははじめにガイドの一部です。完全なガイドはこちらからご覧いただけます：Mercure-hubの始め方。

👋 Stackheroのドキュメントへようこそ！

Stackheroは、数多くの利点を提供するMercure-Hubクラウドソリューションを提供しています。

• 無制限のリクエストとメッセージサイズ。
• HTTPSで保護されたカスタマイズ可能なドメイン名（例: https://real-time.your-company.com）。
• ワンクリックで簡単に更新。
• プライベートで専用のVMによる最適なパフォーマンスと強力なセキュリティ。
• 🇪🇺 ヨーロッパと🇺🇸 アメリカで利用可能。

時間を節約し、生活を簡素化：StackheroのMercure-Hubクラウドホスティングソリューションを試すのに5分しかかかりません！

顧客がID 1の本を閲覧しているシナリオを考えてみましょう。

フロントエンドでは、HTML5のネイティブ機能であるServer-Sent Events (SSE) APIを使用して、Mercure-hubのトピック/books/1にサブスクライブします。約10行のJavaScriptコードで、外部ライブラリを必要とせず、このアプローチはシンプルで効率的です。

バックエンドでは、本が購入されたときに、在庫を更新するためにMercure-hubにHTTPリクエストを送信します。例えば、ID 1の本が7冊あり、ユーザーが1冊購入した場合、更新された在庫は6になります。

バックエンドは{ stockCount: 6 }をMercure-hubのトピック/books/1に送信し、その本を閲覧しているすべてのユーザーが即座に更新された在庫数を受け取ります。このプロセスは、バックエンドからのHTTPリクエストとフロントエンドの数行のコードだけで済みます。

この原則は、サーバーからクライアント、クライアント間、またはサーバー間でデータをプッシュするために使用できます。