SSE (Server Sent Events) n'est pas largement utilisé dans le monde du développement Web, cet article approfondira ce qu'est SSE, comment il fonctionne et comment il peut en bénéficier. votre candidature.

Qu’est-ce que l’ESS ?

SSE est un moyen simple et efficace d'envoyer des mises à jour en temps réel d'un serveur à un client via une connexion HTTP. Il fait partie de la spécification HTML5 et est pris en charge par tous les navigateurs Web modernes. SSE est basé sur un flux de données unidirectionnel, dans lequel le serveur envoie des messages au client, mais le client ne peut pas renvoyer de messages au serveur.

SSE utilise un format texte appelé « Événements envoyés par le serveur » pour envoyer des données au client. Les données sont envoyées sous la forme d'une série d'événements, chacun contenant un message et un type d'événement facultatif. Le type d'événement est utilisé pour distinguer les différents types de messages et permet au client de les gérer différemment.

Comment fonctionne l'ESS ?

Le protocole SSE fonctionne en établissant une connexion HTTP persistante entre le serveur et le client. Cette connexion reste ouverte aussi longtemps que le client souhaite recevoir les mises à jour du serveur. Lorsque le serveur a de nouvelles données à envoyer, il envoie une réponse HTTP avec un type MIME spécial « text/event-stream ».

La réponse contient une série d'événements, chacun étant séparé par un caractère de nouvelle ligne (« \n »). Chaque événement a le format suivant :

event: [event type]\n
data: [message]\n\n

Le champ « événement » est facultatif et est utilisé pour fournir un nom à l'événement. Le champ « données » contient le message réellement envoyé. Les deux caractères de nouvelle ligne à la fin de chaque événement sont utilisés pour signaler la fin de l'événement.

Voici un exemple de réponse SSE simple :

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

Dans cet exemple, nous envoyons trois événements au client. Les deux premiers événements ont le type d'événement « message » et contiennent des messages texte simples. Le troisième événement a le type d'événement « customEvent » et contient un objet JSON comme message.

Lorsque le client reçoit une réponse SSE, il utilise les données pour mettre à jour son interface utilisateur. Cela peut être fait en utilisant JavaScript pour manipuler le DOM, par exemple.

Mettre en œuvre l’ESS

La mise en œuvre de SSE dans votre application est relativement simple. Voici un exemple de la façon d'implémenter SSE à l'aide de Node.js et du framework Express :

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Dans cet exemple, nous configurons un point de terminaison SSE sur « /events ». Nous définissons les en-têtes nécessaires pour SSE et envoyons un événement initial au client pour confirmer que la connexion a été établie.

Nous définissons ensuite un intervalle pour envoyer des événements périodiques au client chaque seconde. Enfin, nous nettoyons l'intervalle pendant lequel la connexion est fermée par le client.

Côté client, nous pouvons utiliser le code JavaScript suivant pour écouter les événements SSE :

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});

Dans cet exemple, nous créons un nouvel objet EventSource et transmettons l'URL de notre point de terminaison SSE. Nous écoutons ensuite l'événement « message » et enregistrons les données sur la console. Nous surveillons également l'événement « erreur » en cas de problèmes de connexion.

Notez que le chemin EventSource sur le front-end ne peut être utilisé que par les requêtes GET. Si vous souhaitez utiliser POST et d'autres méthodes HTTP, vous devez analyser vous-même les données de réponse.

Si vous souhaitez une implémentation native de Node.js, en voici une

Cas d'utilisation pour l'ESS

SSE peut être utilisé dans un large éventail d'applications nécessitant des mises à jour en temps réel. Voici quelques exemples :

• Plateformes de réseaux sociaux : SSE peut être utilisé pour fournir des mises à jour en temps réel pour les plateformes de réseaux sociaux, telles que des notifications de nouveaux messages, de commentaires ou de likes.

• Applications financières : SSE peut être utilisé pour fournir des mises à jour en temps réel pour les applications financières, telles que les cours des actions, les taux de change ou les actualités.

• Jeux en ligne : SSE peut être utilisé pour fournir des mises à jour en temps réel pour les applications de jeux en ligne, telles que des notifications d'événements de jeu, de scores ou de classements.

Avantages de l'utilisation de SSE

L'utilisation de SSE présente plusieurs avantages par rapport à d'autres méthodes de communication en temps réel telles que les sondages ou les WebSockets :

Efficacité

SSE utilise une connexion HTTP persistante, ce qui signifie que la surcharge liée à l'établissement et au maintien de la connexion est bien inférieure à celle d'autres méthodes. Cela rend l'ESS plus efficace et moins gourmand en ressources, ce qui est particulièrement important lorsqu'il s'agit de traiter un grand nombre de clients.

Simplicité

SSE est un protocole simple, facile à comprendre et à mettre en œuvre. Il ne nécessite aucune bibliothèque ou framework spécial et peut être implémenté à l'aide de technologies Web standard telles que JavaScript et HTTP.

Fiabilité

SSE est un protocole fiable qui permet une reconnexion automatique en cas d'interruption du réseau. Cela garantit que le client continuera à recevoir les mises à jour même si la connexion est temporairement perdue.

Conclusion

Les événements envoyés par le serveur (SSE) constituent un moyen simple et efficace d'envoyer des mises à jour en temps réel d'un serveur à un client via une connexion HTTP. Il fait partie de la spécification HTML5 et est pris en charge par tous les navigateurs Web modernes. SSE utilise un flux de données unidirectionnel, dans lequel le serveur envoie des messages au client, mais le client ne peut pas renvoyer de messages au serveur. Cela vous évite d'interroger constamment le serveur pour les événements, ce qui non seulement améliore les performances mais réduit également la complexité.

Si vous avez trouvé cela utile, pensez à à vous abonner à ma newsletter pour des articles et des outils plus utiles sur le développement Web. Merci d'avoir lu !