如何解决Web应用实时通知难题，使用SymfonyMercureNotifier让消息即时送达！

composer require symfony/mercure-notifier

# .env
MERCURE_DSN=mercure://YOUR_MERCURE_HUB_URL/.well-known/mercure?hub=YOUR_HUB_ID
# 例如：MERCURE_DSN=mercure://localhost:3000/.well-known/mercure?hub=https://example.com/hub

# 可以指定默认主题，也可以在发送时覆盖
MERCURE_DSN=mercure://HUB_ID?topic=https://symfony.com/notifier
# 或者指定多个主题
MERCURE_DSN=mercure://HUB_ID?topic[]=/foo/1&topic[]=https://bar

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Notifier\Message\ChatMessage;
use Symfony\Component\Notifier\NotifierInterface;
use Symfony\Component\Notifier\Recipient\Recipient;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Mercure\Update; // 注意：Mercure Notifier 在内部处理，你通常不需要直接使用 Update

class NotificationController extends AbstractController
{
    #[Route('/send-realtime-notification', name: 'app_send_realtime_notification')]
    public function sendRealtimeNotification(NotifierInterface $notifier): Response
    {
        // 创建一个 ChatMessage，并指定它应该通过 Mercure 发送
        // Notifier 组件会根据 DSN 自动选择合适的 Transport
        $message = (new ChatMessage('您的订单状态已更新！'))
            ->transport('mercure') // 明确指定使用 mercure transport
            ->subject('Order Update') // 这是一个通知的标题，不直接对应Mercure topic
            ->options((new \Symfony\Component\Notifier\Bridge\Mercure\MercureOptions())
                ->topic('https://example.com/orders/123') // 明确指定 Mercure 的 topic
                ->json(['orderId' => 123, 'status' => 'shipped']) // 可以在这里发送额外数据
            );

        // Notifier 需要一个 Recipient，即使 Mercure 是广播式的，这里也需要一个占位符
        $notifier->send($message, new Recipient('dummy@example.com'));

        return new Response('实时通知已发送！');
    }
}

// 替换为你的 Mercure Hub 公开订阅的 URL，以及你感兴趣的 topic
const eventSource = new EventSource('https://your-mercure-hub-url/.well-known/mercure?topic=https://example.com/orders/123');

eventSource.onmessage = event => {
    // 当收到消息时
    const data = JSON.parse(event.data);
    console.log('收到实时更新:', data);
    alert('新通知: ' + data.message + ' (订单ID: ' + data.orderId + ')');
    // 在这里更新你的UI
};

eventSource.onerror = error => {
    console.error('EventSource Error:', error);
    eventSource.close(); // 发生错误时关闭连接
};