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 dans la documentation Stackhero !

Stackhero offre un service Mercure-Hub cloud entièrement géré, conçu pour simplifier et fiabiliser la diffusion de données en temps réel. Vous profitez de :

• Requêtes et tailles de messages illimitées pour une flexibilité maximale.
• Un domaine personnalisé avec la sécurité HTTPS intégrée (par exemple, https://real-time.votre-entreprise.com).
• Des mises à jour en un clic pour garder votre hub à jour sans aucune complication.
• Une performance élevée et une sécurité avancée sur une infrastructure privée et dédiée.
• Plusieurs régions disponibles : 🇪🇺 Europe et 🇺🇸 USA pour une diffusion à faible latence.

Mettez-vous en route rapidement : il suffit de 5 minutes pour déployer votre environnement Mercure-Hub cloud hosting et commencer à envoyer des mises à jour en temps réel à vos applications.

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.