Mercure-Hub: Mercure-hubの仕組み

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

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

Stackhero では、リアルタイムデータ配信をシンプルかつ信頼性高く実現する、フルマネージドの Mercure-Hub cloud サービスをご提供しています。主な特長は以下の通りです：

• リクエスト数・メッセージサイズ無制限で、柔軟な運用が可能です。
• HTTPS 対応の カスタムドメイン（例：https://real-time.your-company.com）を標準搭載。
• ワンクリックアップデートで、常に最新の状態を簡単に維持できます。
• プライベートかつ専用インフラ上での高いパフォーマンスと強固なセキュリティ。
• 複数リージョン対応：🇪🇺 ヨーロッパおよび🇺🇸 USAで低遅延配信を実現。

すぐに利用開始可能：わずか5分で Mercure-Hub cloud hosting 環境を立ち上げ、アプリケーションへのリアルタイム更新配信をスタートできます。

顧客が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リクエストとフロントエンドの数行のコードだけで済みます。

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