Mercure-Hub: 開始使用 Mercure-hub
此文件屬於入門指南指南的一部分。請在此處查看完整指南：如何開始使用 Mercure-hub。
👋 歡迎瀏覽 Stackhero 文件！
Stackhero 為您提供全託管的 Mercure-Hub cloud 服務，專為簡化和提升即時數據傳送的可靠性而設計。您將享有：
- 無限請求及訊息大小，靈活度極高。
- 內建 HTTPS 安全性的自訂網域（例如 https://real-time.your-company.com）。
- 一鍵更新，輕鬆保持您的 hub 為最新狀態，無需額外操作。
- 在專屬私有基礎設施上提供高效能及強大安全性。
- 多個地區選擇：🇪🇺 歐洲及🇺🇸 美國，確保低延遲傳送。
快速啟動：只需 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()
})
};
// 生成 bearer token
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // Token 在一分鐘內過期
noTimestamp: true // 不包括 'issued at' 時間戳以避免 "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)
);
就是這樣！您現在有一個在前端的訂閱者和一個在後端的發布者無縫協作。