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 un service Mercure-Hub cloud entièrement managé, conçu pour simplifier et fiabiliser la diffusion de données en temps réel. Vous bénéficiez de :

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

Démarrez rapidement : il suffit de 5 minutes pour lancer 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 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.