Mercure-Hub: Aan de slag met Mercure-hub
Deze documentatie maakt deel uit van de Aan de slag-gids. Bekijk de volledige gids hier: Hoe te beginnen met Mercure-hub.
👋 Welkom bij de Stackhero-documentatie!
Stackhero biedt een volledig beheerde Mercure-Hub cloud dienst, ontworpen om real-time datalevering eenvoudig en betrouwbaar te maken. U profiteert van:
- Onbeperkt aantal verzoeken en berichtgroottes voor maximale flexibiliteit.
- Een eigen domein met ingebouwde HTTPS-beveiliging (bijvoorbeeld, https://real-time.uw-bedrijf.com).
- Moeiteloze one-click updates om uw hub zonder gedoe up-to-date te houden.
- Hoge performance en sterke beveiliging op een privé, dedicated infrastructuur.
- Meerdere regio's: 🇪🇺 Europa en 🇺🇸 USA voor levering met lage latency.
Snel aan de slag: het duurt slechts 5 minuten om uw Mercure-Hub cloud hosting omgeving te starten en direct real-time updates naar uw applicaties te sturen.
Aan de clientzijde (je front-end) is eenvoudige JavaScript-code die gebruikmaakt van de HTML5 SSE API alles wat je nodig hebt.
Opmerking: In dit voorbeeld is de abonnee niet geauthenticeerd. Om dit voorbeeld te laten werken, moet je anonieme abonnees toestaan op het Stackhero-dashboard.
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// Voeg onderwerpen toe om naar te luisteren
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);
const eventSource = new EventSource(url);
// De callback wordt aangeroepen elke keer dat een update wordt gepubliceerd
eventSource.onmessage = e => console.log(e);
Aan de serverzijde (je back-end), wanneer je een update wilt verzenden, stuur je eenvoudig een POST-verzoek naar de Mercure-hub API. Hieronder is een voorbeeld met Node.js samen met de JsonWebToken en Request bibliotheken:
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// Definieer de gegevens om te verzenden
const data = {
// Het onderwerp waar de gegevens naar worden gepusht
topic: `https://${endpoint}/books/1`,
// De gegevens die naar het onderwerp worden verzonden
data: JSON.stringify({
available: false,
date: new Date()
})
};
// Genereer de bearer token
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // Token verloopt in één minuut
noTimestamp: true // Geen 'uitgegeven op' tijdstempel opnemen om "Token gebruikt voordat uitgegeven" fouten te voorkomen
}
);
// Stuur de gegevens naar Mercure-hub zodat het de update naar clients verzendt
request.post(
{
url: `https://${endpoint}/.well-known/mercure`,
auth: { bearer },
form: data
},
(err, res) => err ? console.error(err) : console.log(res)
);
Dat is alles! Je hebt nu een abonnee aan de front-end en een uitgever aan de back-end die naadloos samenwerken.