Mercure リアルタイムプッシュ

Doggy は Mercure プロトコルに基づいてサーバーサイドのリアルタイムプッシュを実装しています。Mercure Hub は FrankenPHP に内蔵されており、Caddyfile で設定するだけで有効化でき、追加のコンテナやサービスは不要です。

アーキテクチャ

客户端 (EventSource)
    ↑ SSE
    └── http://localhost:8000/.well-known/mercure
            ↑
    Caddyfile (FrankenPHP)
        ↑ mercure 指令内嵌 Hub
    FrankenPHP (内置 Hub)

Caddyfile 設定

FrankenPHP の Caddyfile に Mercure Hub を埋め込みます:

caddy

http://localhost:8000 {
    route /.well-known/mercure {
        mercure {
            transport bolt {
                path /var/www/var/mercure.db
            }
            publisher_jwt !ChangeThisMercureHubJWTSecretKey!
            subscriber_jwt !ChangeThisMercureHubJWTSecretKey!
            cors_origins http://localhost:8000
            publish_origins *
            anonymous
        }
    }
}

JWT トークン

MercureTokenFactory が購読権限付きの JWT を生成します:

php

// src/Security/MercureTokenFactory.php
$token = $factory->createSubscribeToken(
    topics: ['/user/123/*', '/entity/*'],
    roles: ['ROLE_USER'],
    expiresIn: 3600
);

MercureCookieSubscriber は各レスポンスに mercureAuthorization Cookie を注入します:

php

// 自动生成的订阅主题
$topics = [
    'https://enterprise.local/user/' . $userId . '/export',
    '/user/' . $userId . '/*',
    '/entity/*',
];

フロントエンド購読

javascript

const url = new URL('/.well-known/mercure', window.location.origin);
url.searchParams.append('topic', '/user/' + userId + '/*');
const eventSource = new EventSource(url);
eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    // 处理推送消息
};

コア用途

エクスポート進捗: 大容量ファイルエクスポートのリアルタイム進捗プッシュ
オンライン状態: PresenceService + PresenceApiController
リアルタイム通知: システムメッセージ、承認リマインダー
データ同期: マルチユーザー協同のリアルタイム更新

Mercure リアルタイムプッシュ ​

アーキテクチャ ​

Caddyfile 設定 ​

JWT トークン ​

Mercure Cookie ​

フロントエンド購読 ​

コア用途 ​