Mercure-Hub: Mercure-hubの始め方
このドキュメントははじめにガイドの一部です。完全なガイドはこちらからご覧いただけます：Mercure-hubの始め方。
👋 Stackhero ドキュメントへようこそ！
Stackhero では、リアルタイムデータ配信をシンプルかつ信頼性高く実現する、フルマネージドの Mercure-Hub cloud サービスをご提供しています。主な特長は以下の通りです：
- リクエスト数・メッセージサイズ無制限で、柔軟な運用が可能です。
- HTTPS 対応の カスタムドメイン（例：https://real-time.your-company.com）を標準搭載。
- ワンクリックアップデートで、常に最新の状態を簡単に維持できます。
- プライベートかつ専用インフラ上での高いパフォーマンスと強固なセキュリティ。
- 複数リージョン対応：🇪🇺 ヨーロッパおよび🇺🇸 USAで低遅延配信を実現。
すぐに利用開始可能：わずか5分で Mercure-Hub cloud hosting 環境を立ち上げ、アプリケーションへのリアルタイム更新配信をスタートできます。
クライアント側（フロントエンド）では、HTML5 SSE APIを活用したシンプルなJavaScriptコードが必要です。
注: この例では、サブスクライバーは認証されていません。この例を機能させるには、Stackheroダッシュボードで匿名サブスクライバーを許可する必要があります。
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// リッスンするトピックを追加
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);
const eventSource = new EventSource(url);
// 更新が公開されるたびにコールバックが呼び出されます
eventSource.onmessage = e => console.log(e);
サーバー側（バックエンド）では、更新を送信したいときに、Mercure-hub APIにPOSTリクエストを送信するだけです。以下は、Node.jsとJsonWebTokenおよびRequestライブラリを使用した例です。
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// 送信するデータを定義
const data = {
// データがプッシュされるトピック
topic: `https://${endpoint}/books/1`,
// トピックに送信されるデータ
data: JSON.stringify({
available: false,
date: new Date()
})
};
// ベアラートークンを生成
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // トークンは1分で期限切れ
noTimestamp: true // "Token used before issued"エラーを避けるために'発行時'タイムスタンプを含めない
}
);
// Mercure-hubにデータを送信して、クライアントに更新を配信
request.post(
{
url: `https://${endpoint}/.well-known/mercure`,
auth: { bearer },
form: data
},
(err, res) => err ? console.error(err) : console.log(res)
);
これで完了です！フロントエンドにサブスクライバーがあり、バックエンドにパブリッシャーがスムーズに連携しています。