OHNE React (das kommt ERST in Block 9) lässt sich ein Mercure-Abonnement BEREITS JETZT mit Bordmitteln testen – ENTWEDER im Browser über die JavaScript-EventSource-API ODER per curl.

Per EventSource im Browser

const url = new URL('https://localhost/.well-known/mercure');
url.searchParams.append('topic', 'https://localhost/api/projects/1');

const eventSource = new EventSource(url);

eventSource.onmessage = (event) => {
  const updatedProject = JSON.parse(event.data);
  console.log('Update erhalten:', updatedProject);
};

GENAU der Standard-EventSource-Mechanismus, IDENTISCH zu SEINER Verwendung in JEDER anderen Web-Anwendung – Mercure fügt DIESEM Standard NUR das Topic-basierte Abonnement-Modell hinzu.

Das Abonnement in der Browser-Konsole testen

1. Obigen JavaScript-Code in der Browser-Konsole ausführen (F12 → Console).
2. In einem ZWEITEN Tab/Terminal per curl PATCH /api/projects/1 senden.
3. Die Konsole zeigt das Update SOFORT, OHNE Neuladen der Seite.

Per curl die rohe SSE-Verbindung beobachten

curl -k -N 'https://localhost/.well-known/mercure?topic=https://localhost/api/projects/1'

-N (--no-buffer) ist ENTSCHEIDEND – OHNE dieses Flag puffert curl die Antwort und zeigt NICHTS an, bis die Verbindung (die BEWUSST offen bleibt) irgendwann GESCHLOSSEN wird.

event: message
data: {"@id":"/api/projects/1","name":"Aktualisierter Name", ...}

Mehrere Topics gleichzeitig abonnieren

curl -k -N 'https://localhost/.well-known/mercure?topic=https://localhost/api/projects/1&topic=https://localhost/api/projects/2'

Mehrere topic-Parameter in DERSELBEN Anfrage abonnieren MEHRERE Topics ÜBER EINE einzige Verbindung – SPARSAM im Vergleich zu einer separaten Verbindung PRO Topic.