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 tailles de messages illimitées.
- Nom de domaine personnalisable sécurisé avec HTTPS (par exemple, https://real-time.votre-entreprise.com).
- Mises à jour faciles en un clic.
- Performance optimale et sécurité robuste 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 HTML5 SSE est tout ce dont vous avez besoin.
Remarque : Dans cet exemple, le souscripteur n'est pas authentifié. Pour que cet exemple fonctionne, vous devez autoriser les souscripteurs anonymes sur le tableau de bord Stackhero.
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// Ajouter des 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 invoqué à 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, envoyez simplement une requête POST à l'API Mercure-hub. Voici un exemple utilisant Node.js avec les bibliothèques JsonWebToken et Request :
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// Définir les données à envoyer
const data = {
// Le topic où 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érer le token bearer
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // Le token expire dans une minute
noTimestamp: true // Ne pas inclure le timestamp 'émis à' pour éviter les erreurs "Token utilisé avant d'être émis"
}
);
// Envoyer les données à Mercure-hub pour qu'il les distribue 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 souscripteur sur le front end et un éditeur sur le back end qui fonctionnent ensemble de manière fluide.