Recevoir des données en temps réel avec des événements (SSE) HTML5 Server-Sent (SSE).

Les événements de serveur (SSE) sont une solution légère fournie par HTML5 pour pousser les mises à jour en temps réel du navigateur. Il réalise la communication à sens unique grâce à de longues connexions HTTP, qui conviennent au marché boursier, aux notifications et à d'autres scénarios. Lorsque vous l'utilisez, créez une instance Eventsource et écoutez les messages: const eventsource = new Eventsource ('/ stream'); eventsource.onMessage = fonction (événement) {console.log ('Message reçu:', event.data); }; Le serveur doit définir le type de contenu sur Text / Event-Stream, garder la connexion ouverte et sortir des données: Contenu \ N \ N dans le format. Les considérations courantes incluent: 1. Configurer CORS pour résoudre les problèmes de domaine croisé; 2. Contrôler le temps de réception pour obtenir une reconnexion automatique; 3. Utiliser l'événement: définir les types d'événements personnalisés; 4. Gérer le délai d'expiration de la connexion pour éviter les fuites des ressources. Par rapport à WebSocket, SSE est plus simple et plus facile à utiliser, prend en charge le protocole HTTP pour pénétrer le pare-feu, mais n'est qu'une communication unidirectionnelle et a une compatibilité légèrement mauvaise. Il convient aux scénarios de poussée en temps réel sans interactions fréquentes.

Dans le développement Web, si vous devez pousser les mises à jour en temps réel du serveur vers le navigateur, HTML5 fournit une solution légère: les événements de serveur (SSE). Par rapport à WebSocket, il est plus simple et plus facile à mettre en œuvre, et est particulièrement adapté aux scénarios où seuls les serveurs doivent communiquer unidirectionnels aux clients.

Que sont les événements de serveur?

Les événements envoyés par serveur font partie de HTML5, permettant aux serveurs de pousser les données au navigateur sur des connexions longues HTTP. Contrairement aux méthodes de sondage traditionnelles, SSE restera ouverte après avoir établi une connexion et le serveur peut envoyer de nouvelles données à tout moment, telles que des devis en bourse, des notifications en temps réel ou des messages de chat.

Son utilisation de base est de créer une instance EventSource et de pointer une URL du côté serveur:

 const eventsource = new Eventsource ('/ stream');
eventsource.onMessage = fonction (événement) {
    console.log ('Message reçu:', event.data);
};

Tant que le serveur continue d'envoyer des données, le client peut continuer à les recevoir.

Comment définir la prise en charge SSE côté serveur?

Différentes langues backend ont des méthodes de mise en œuvre différentes, mais le point central est le même: gardez la connexion ouverte et sort le contenu au format SSE.

Prenez Node.js Express comme exemple:

 app.get ('/ stream', (req, res) => {
    res.sethEader («Content-Type», «Text / Event-Stream»);
    res.sethEader («cache-control», «non-cache»);

    // simule l'envoi de données setinterval (() => {
        res.write (`data: $ {new Date ()} \ n \ n`);
    }, 1000);
});

Points clés:

• Définissez l'en-tête de réponse correct, en particulier text/event-stream
• Ne terminez pas la réponse trop tôt, gardez la connexion ouverte
• Le format de données doit être data: 内容\n\n , et deux nouvelles lignes indiquent la fin d'un message

D'autres langues telles que Python (Flask), PHP ou Java Spring Boot peuvent être implémentées de manière similaire.

Des questions et des notes fréquemment posées

1. Problèmes de domaine inter-parmi Si le front-end et le back-end ne sont pas sous le même nom de domaine, les COR doivent être configurés pour s'assurer que la demande initiée EventSource est autorisée:

 Access-Control-Allow-Origin: *

Ou spécifiez un nom de domaine spécifique.

2. Mécanisme de reconnexion automatique Lorsque la connexion est interrompue, le navigateur essaie automatiquement de se reconnecter et le temps d'attente par défaut est de 3 secondes. Vous pouvez contrôler cet intervalle côté serveur:

 Réessayer: 5000

3. Type d'événement personnalisé En plus de la onmessage par défaut, vous pouvez également définir d'autres noms d'événements:

 Événement: mise à jour
Données: {"Type": "News", "Content": "New News arrive"}

Surveillance frontale:

 eventsource.addeventListener ('update', fonction (événement) {
    console.log ('Mise à jour reçue:', event.data);
});

4. Délai de connexion et version des ressources Faites attention de ne pas laisser la connexion pendre indéfiniment. Le serveur doit avoir des mécanismes pour détecter si le client est déconnecté et libérer des ressources à temps pour éviter la fuite de mémoire.

Quand dois-je utiliser SSE au lieu de WebSocket?

WebSocket est plus puissant et prend en charge la communication bidirectionnelle, mais a également une complexité plus élevée. Si vous n'avez besoin que du serveur pour pousser les informations vers le client et que vous n'avez pas besoin d'interactions fréquentes, SSE est un meilleur choix.

Les avantages comprennent:

• Simplifiez le processus de développement, facile à mettre en œuvre à la fois avant et arrière
• Prise en charge de la reconnexion automatique
• Le protocole HTTP standard peut être utilisé pour faciliter la pénétration du pare-feu

Les inconvénients sont également évidents:

• Une seule communication unidirectionnelle du serveur à client est prise en charge
• La compatibilité du navigateur est légèrement médiocre (c'est-à-dire et les versions plus anciennes de Edge ne sont pas prises en charge)

Fondamentalement, c'est tout. SSE n'est pas compliqué, mais dans le déploiement réel, vous devez prêter attention à la gestion des connexions, à la gestion des erreurs et à l'optimisation des performances. Si vous voulez simplement créer un système de notification en temps réel simple, SSE est un choix léger et pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!