Vous voulez développer un chat ou un centre de notifications en temps réel pour votre web app ? Vous ne savez pas comment mettre à jour l’état de votre application en temps réel ? Cet article est fait pour vous.

Nous avons eu l'occasion de mettre en place Mercure pour gérer les notifications en temps réel sur une Marketplace de NFT nommée Fungiball, afin que les utilisateurs soient notifiés en temps réel des bids d'autres participants aux enchères.

Qu'est-ce que Mercure ?

Mercure est un protocole qui facilite la création de communications en temps réel entre le serveur et les clients. Il est spécialement conçu pour travailler avec des architectures web et permet d'envoyer des mises à jour en utilisant le standard des Server-Sent Events.

Configuration de base

Pour commencer, vous devez configurer le hub Mercure. Cela peut être fait en téléchargeant et en exécutant le binaire Mercure ou en utilisant un service Mercure hébergé. Vous trouverez plus d'informations sur la configuration du hub sur la documentation officielle de Mercure.

Publier un événement

Côté serveur, vous aurez besoin de publier des événements à vos clients. Voici un exemple simple de publication d'un événement à l'aide de TypeScript.

import axios from 'axios';

async function publishUpdate(data: object) {
  const mercureHubUrl = 'https://votre-hub.mercure.rocks/hub';
  const targetTopic = 'https://exemple.com/mon-topic';
  
  const params = new URLSearchParams();
  params.append("topic", targetTopic);
  params.append("data", JSON.stringify(data));

  try {
    await axios.post(mercureHubUrl, params, {
      headers: {
        'Authorization': 'Bearer VotreTokenJWT',
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    });
    console.log("Mise à jour publiée avec succès !");
  } catch (error) {
    console.error("Erreur lors de la publication de la mise à jour :", error);
  }
}

// Utilisation de la fonction
publishUpdate({message: "Hello, Mercure!"});

Ce code publie un événement à tous les abonnés du topic "mon-topic". Comme vous pouvez le voir, une simple requête HTTP au HUB de mercure suffit pour publier une mise à jour. Le HUB se chargera de rebroadcaster les messages envoyés par le serveur aux clients abonnés à ce topic.

Souscrire à un événement côté client

Côté client, souscrire à un événement SSE avec Mercure est simple. Voici comment vous pouvez le faire avec React :

import React, { useEffect, useState } from 'react';

const MercureSubscriber = ({ topicUrl }) => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // Création d'une nouvelle instance EventSource
    const eventSource = new EventSource(`https://votre-hub.mercure.rocks/hub?topic=${encodeURIComponent(topicUrl)}`);

    // Gestionnaire d'événements pour les mises à jour
    eventSource.onmessage = event => {
      const newMessage = JSON.parse(event.data);
      setMessages(prevMessages => [...prevMessages, newMessage]);
    };

    // Nettoyage en fermant la connexion lorsque le composant est démonté
    return () => {
      eventSource.close();
    };
  }, [topicUrl]);

  return (
    <div>
      <h2>Messages reçus:</h2>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{JSON.stringify(msg)}</li>
        ))}
      </ul>
    </div>
  );
};

export default MercureSubscriber;

Dans cet exemple, le composant MercureSubscriber prend une prop topicUrl qui est l'URL du topic auquel vous souhaitez vous abonner. Lorsque le composant est monté, il s'abonne aux événements envoyés par le serveur Mercure. Chaque message reçu est ajouté à un tableau de messages, et le composant affiche la liste de ces messages.

Conclusion

Mercure offre une solution élégante et efficace pour implémenter les Server-Sent Events dans vos applications web. Avec la facilité de configuration et l'intégration côté client et serveur, vous pouvez rapidement mettre en place des fonctionnalités en temps réel robustes. En suivant les exemples de code fournis, vous devriez être en mesure de démarrer avec Mercure et SSE dans vos propres projets TypeScript.

Auteur : Thibaud Rouchon