Mercure-Hub: Premiers pas avec Mercure-hub
Cette documentation fait partie du guide Premiers pas. Consultez le guide complet ici : Comment débuter avec Mercure-hub.
👋 Bienvenue sur la documentation de Stackhero !
Stackhero propose une solution Mercure-Hub cloud prête à l'emploi qui offre de nombreux avantages, notamment :
- Requêtes et taille des messages illimitées.
- Nom de domaine personnalisable sécurisé avec HTTPS (par exemple, https://real-time.votre-entreprise.com).
- Mises à jour simplifiées en un clic.
- Performance optimale et sécurité renforcée grâce à une VM privée et dédiée.
- Disponible en 🇪🇺 Europe et 🇺🇸 USA.
Gagnez du temps et simplifiez-vous la vie : il suffit de 5 minutes pour essayer la solution Mercure-Hub cloud hosting de Stackhero !
Côté client (votre front end), un simple code JavaScript utilisant l'API SSE d'HTML5 suffit.
Note: Dans cet exemple, l'abonné n'est pas authentifié. Pour que cet exemple fonctionne, vous devez autoriser les abonnés anonymes sur le tableau de bord Stackhero.
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// Ajoutez les topics à écouter
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);
const eventSource = new EventSource(url);
// Le callback est appelé à chaque fois qu'une mise à jour est publiée
eventSource.onmessage = e => console.log(e);
Côté serveur (votre back end), lorsque vous souhaitez envoyer une mise à jour, il suffit d'envoyer une requête POST à l'API Mercure-hub. Voici un exemple utilisant Node.js avec les librairies JsonWebToken et Request :
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// Définissez les données à envoyer
const data = {
// Le topic sur lequel les données seront poussées
topic: `https://${endpoint}/books/1`,
// Les données à envoyer au topic
data: JSON.stringify({
available: false,
date: new Date()
})
};
// Générez le bearer token
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // Le token expire en une minute
noTimestamp: true // N'incluez pas le timestamp 'issued at' pour éviter les erreurs "Token used before issued"
}
);
// Envoyez les données à Mercure-hub pour qu'il diffuse la mise à jour aux clients
request.post(
{
url: `https://${endpoint}/.well-known/mercure`,
auth: { bearer },
form: data
},
(err, res) => err ? console.error(err) : console.log(res)
);
Et voilà ! Vous avez maintenant un abonné côté front end et un éditeur côté back end qui fonctionnent ensemble de façon fluide.