Mercure-Hub: 開始使用 Mercure-hub
此文件屬於入門指南指南的一部分。請在此處查看完整指南：如何開始使用 Mercure-hub。
👋 歡迎來到 Stackhero 文件！
Stackhero 提供即用的 Mercure-Hub cloud 解決方案，帶來多項好處，包括：
- 無限請求和消息大小。
- 使用 HTTPS 保護的可自訂域名（例如，https://real-time.your-company.com）。
- 只需點擊即可輕鬆更新。
- 由專用私有 VM提供的最佳性能和強大安全性。
- 可在 🇪🇺 歐洲 和 🇺🇸 美國 使用。
節省時間並簡化您的生活：只需 5 分鐘即可嘗試 Stackhero 的 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)
);
就是這樣！您現在有一個在前端的訂閱者和一個在後端的發布者無縫協作。