Mercure-Hub: Erste Schritte mit Mercure-hub
Diese Dokumentation ist Teil des Erste Schritte-Leitfadens. Den vollständigen Leitfaden finden Sie hier: Wie man mit Mercure-hub beginnt.
👋 Willkommen bei der Stackhero-Dokumentation!
Stackhero bietet eine einsatzbereite Mercure-Hub Cloud Lösung, die zahlreiche Vorteile bietet, darunter:
- Unbegrenzte Anfragen und Nachrichtengrößen.
- Anpassbarer Domainname gesichert mit HTTPS (zum Beispiel, https://real-time.ihre-firma.com).
- Mühelose Updates mit nur einem Klick.
- Optimale Leistung und robuste Sicherheit durch eine private und dedizierte VM.
- Verfügbar in 🇪🇺 Europa und 🇺🇸 USA.
Sparen Sie Zeit und vereinfachen Sie Ihr Leben: Es dauert nur 5 Minuten, um die Mercure-Hub Cloud Hosting Lösung von Stackhero auszuprobieren!
Auf der Clientseite (Ihr Frontend) benötigen Sie nur einfachen JavaScript-Code, der die HTML5 SSE API nutzt.
Hinweis: In diesem Beispiel ist der Abonnent nicht authentifiziert. Damit dieses Beispiel funktioniert, müssen Sie anonyme Abonnenten im Stackhero-Dashboard zulassen.
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// Themen hinzufügen, die abgehört werden sollen
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);
const eventSource = new EventSource(url);
// Der Callback wird jedes Mal aufgerufen, wenn ein Update veröffentlicht wird
eventSource.onmessage = e => console.log(e);
Auf der Serverseite (Ihr Backend), wenn Sie ein Update versenden möchten, senden Sie einfach eine POST-Anfrage an die Mercure-hub API. Unten ist ein Beispiel mit Node.js und den Bibliotheken JsonWebToken und Request:
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// Definieren Sie die Daten, die gesendet werden sollen
const data = {
// Das Thema, an das die Daten gesendet werden
topic: `https://${endpoint}/books/1`,
// Die Daten, die an das Thema gesendet werden sollen
data: JSON.stringify({
available: false,
date: new Date()
})
};
// Erzeugen Sie das Bearer-Token
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // Token läuft in einer Minute ab
noTimestamp: true // Kein 'issued at'-Zeitstempel, um "Token used before issued"-Fehler zu vermeiden
}
);
// Senden Sie die Daten an Mercure-hub, damit es das Update an die Clients verteilt
request.post(
{
url: `https://${endpoint}/.well-known/mercure`,
auth: { bearer },
form: data
},
(err, res) => err ? console.error(err) : console.log(res)
);
Das war's! Sie haben jetzt einen Abonnenten im Frontend und einen Publisher im Backend, die nahtlos zusammenarbeiten.