Mercure-Hub: 开始使用 Mercure-hub
本文档属于入门指南指南的一部分。您可以在此处查看完整指南：如何开始使用 Mercure-hub。
👋 欢迎使用 Stackhero 文档！
Stackhero 提供现成的 Mercure-Hub 云 解决方案，具有多种优势，包括：
- 无限制的请求和消息大小。
- 使用 HTTPS 保护的可定制域名（例如，https://real-time.your-company.com）。
- 只需点击即可轻松更新。
- 由专用私有 VM提供的最佳性能和强大安全性。
- 在🇪🇺 欧洲和🇺🇸 美国均可使用。
节省时间并简化您的生活：只需 5 分钟即可试用 Stackhero 的 Mercure-Hub 云托管 解决方案！
在客户端（您的前端），只需使用 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 令牌
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // 令牌在一分钟后过期
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)
);
就是这样！您现在在前端有一个订阅者，在后端有一个发布者，它们无缝协作。