Mercure-Hub: Mercure-hubの始め方
このドキュメントははじめにガイドの一部です。完全なガイドはこちらからご覧いただけます：Mercure-hubの始め方。
👋 Stackheroのドキュメントへようこそ！
Stackheroは、数多くの利点を提供するMercure-Hubクラウドソリューションを提供しています。
- 無制限のリクエストとメッセージサイズ。
- HTTPSで保護されたカスタマイズ可能なドメイン名（例: https://real-time.your-company.com）。
- ワンクリックで簡単に更新。
- プライベートで専用のVMによる最適なパフォーマンスと強力なセキュリティ。
- 🇪🇺 ヨーロッパと🇺🇸 アメリカで利用可能。
時間を節約し、生活を簡素化：StackheroのMercure-Hubクラウドホスティングソリューションを試すのに5分しかかかりません！
クライアント側（フロントエンド）では、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)
);
これで完了です！フロントエンドにサブスクライバーがあり、バックエンドにパブリッシャーがスムーズに連携しています。