Événements envoyés par le serveur

Les événements envoyés par le serveur (SSE) sont une technologie de push du serveur permettant à un client de recevoir des mises à jour automatiques d’un serveur via une connexion HTTP. Chaque notification est envoyée comme un bloc de texte se terminant par une paire de nouvelles lignes (en savoir plus ici).

Utilisation

Pour activer les événements envoyés par le serveur sur une route (route enregistrée dans une classe de contrôleur), annoter le gestionnaire de méthode avec le décorateur @Sse().

Activer les événements envoyés par le serveur

@Sse('sse')
sse(): Observable<MessageEvent> {
  return interval(1000).pipe(map((_) => ({ data: { hello: 'world' } })));
}

Astuce

Le décorateur @Sse() et l’interface MessageEvent sont importés de @nestjs/common, tandis que Observable, interval et map sont importés du package rxjs.

Attention

Les routes des événements envoyés par le serveur doivent retourner un flux Observable.

Dans l’exemple ci-dessus, nous avons défini une route nommée sse qui nous permettra de propager des mises à jour en temps réel. Ces événements peuvent être écoutés en utilisant l’API EventSource.

La méthode sse retourne un Observable qui émet plusieurs MessageEvent (dans cet exemple, il émet un nouveau MessageEvent chaque seconde). L’objet MessageEvent doit respecter l’interface suivante pour correspondre à la spécification :

Interface MessageEvent

export interface MessageEvent {
  data: string | object;
  id?: string;
  type?: string;
  retry?: number;
}

Avec cela en place, nous pouvons maintenant créer une instance de la classe EventSource dans notre application côté client, en passant la route /sse (qui correspond au point de terminaison que nous avons passé au décorateur @Sse() ci-dessus) comme argument de constructeur.

L’instance EventSource ouvre une connexion persistante à un serveur HTTP, qui envoie des événements au format text/event-stream. La connexion reste ouverte jusqu’à ce qu’elle soit fermée en appelant EventSource.close().

Une fois la connexion ouverte, les messages entrants du serveur sont livrés à votre code sous forme d’événements. Si un champ d’événement est présent dans le message entrant, l’événement déclenché est le même que la valeur du champ d’événement. Si aucun champ d’événement n’est présent, alors un événement générique message est déclenché (source).

Écouter les messages

const eventSource = new EventSource('/sse');
eventSource.onmessage = ({ data }) => {
  console.log('Nouveau message', JSON.parse(data));
};

Exemple

Un exemple fonctionnel est disponible ici.