Mercure实时通信协议入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00936/article/details/148508199

Mercure实时通信协议入门指南

mercure An open, easy, fast, reliable and battery-efficient solution for real-time communications 项目地址: https://gitcode.com/gh_mirrors/me/mercure

什么是Mercure协议

Mercure是一种基于Server-Sent Events (SSE)的实时通信协议，它允许服务器向客户端推送实时更新。与WebSocket不同，Mercure采用发布/订阅模式，通过HTTP协议工作，具有更好的兼容性和更简单的实现方式。

核心概念

Mercure协议包含三个主要角色：

Hub：中央消息代理，负责接收发布者的消息并转发给订阅者
Publisher：发布者，向Hub发送更新消息
Subscriber：订阅者，从Hub接收实时更新

环境准备

启动Mercure Hub

要使用Mercure协议，首先需要启动一个Hub服务。Hub可以独立部署，也可以集成到现有应用中。启动时需要配置JWT密钥用于认证，默认密钥为!ChangeThisMercureHubJWTSecretKey!，生产环境中务必修改此值。

订阅实时更新

基本订阅方式

在浏览器中订阅实时更新非常简单，使用原生EventSource API即可：

const url = new URL("https://localhost/.well-known/mercure");
url.searchParams.append("topic", "https://example.com/books/{id}");
url.searchParams.append("topic", "https://example.com/users/dunglas");

const eventSource = new EventSource(url);

eventSource.onmessage = (e) => {
    console.log("收到更新:", e.data);
};

这段代码订阅了两个主题模式：

精确匹配https://example.com/users/dunglas
模式匹配https://example.com/books/{id}（可以匹配任意ID的书籍）

高级订阅建议

虽然原生EventSource足够简单，但对于需要更精细控制的场景，推荐使用fetch-event-source库，它提供：

更好的错误处理机制
支持认证头
更灵活的配置选项

连接管理

务必在不需要时关闭连接，特别是在单页应用(SPA)中：

// 组件卸载时关闭连接
componentWillUnmount() {
    eventSource.close();
}

发布更新

基本发布方式

要向Hub发布更新，需要发送POST请求：

curl -d 'topic=https://example.com/books/1' \
     -d 'data={"foo": "updated value"}' \
     -H 'Authorization: Bearer YOUR_JWT_TOKEN' \
     -X POST https://localhost/.well-known/mercure

认证机制

发布私有更新需要使用JWT认证，JWT必须包含：

mercure.publish字段：包含允许发布的主题模式数组
mercure.subscribe字段（可选）：包含允许订阅的主题模式数组

示例JWT payload结构：

{
  "mercure": {
    "publish": ["*"],
    "subscribe": ["https://example.com/private-topics"]
  }
}

高级功能

Hub自动发现

客户端可以通过HTTP Link头自动发现Hub地址：

fetch("https://example.com/books/1")
  .then((response) => {
    const hubUrl = response.headers
      .get("Link")
      .match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1];
    // 使用发现的hubUrl进行订阅
  });