La démo la plus simple sur SSE (Server-Send Events)

Introduction

Les événements envoyés par le serveur (SSE) sont une technologie Web qui permet à un serveur d'envoyer des mises à jour en temps réel à un client via HTTP. Contrairement aux WebSockets, SSE est plus simple à mettre en œuvre car il utilise un canal de communication unidirectionnel entre le serveur et le navigateur et fonctionne via une connexion HTTP standard. Il est particulièrement utile pour les applications nécessitant des mises à jour périodiques, telles que les scores en direct, les notifications ou les tableaux de bord de surveillance en temps réel.

J'ai créé cette démo car je développe actuellement une application où les IA discutent de divers sujets. J'ai voulu implémenter des fonctionnalités de type flux et j'ai découvert la technologie appelée "SSE".

Aperçu de la démo

Cette démo montre comment les événements envoyés par le serveur (SSE) peuvent être utilisés pour envoyer des mises à jour en temps réel d'une API au navigateur. Dans cet exemple, le navigateur affiche une série d'exemples de messages envoyés par le serveur. La simplicité de cette démo en fait un excellent point de départ pour comprendre le fonctionnement de SSE et l'intégrer dans vos projets.

Vidéo de démonstration

Vous trouverez ci-dessous une vidéo démontrant le fonctionnement de la démo Server-Sent Events (SSE) en temps réel. Regarder cette vidéo vous permettra de mieux comprendre comment le client et le serveur interagissent pour fournir des mises à jour en temps réel.

Mise en œuvre

L'implémentation principale de la démo Server-Sent Events (SSE) est divisée en deux parties : le frontend et le backend. Le code source complet est disponible sur GitHub : dépôt sse-demo.

Frontend (ui/src/app/page.tsx)

Le frontend est construit avec React et fournit des boutons pour démarrer et arrêter la connexion SSE, affichant les messages en temps réel du serveur. Voici les principaux points forts :

1. Connexion à SSE : La fonction handleStartConnection crée un objet EventSource connecté au point de terminaison /events. Il écoute les messages, les événements ouverts et les événements d'erreur :

   • onmessage : gère les messages entrants et met à jour l'état des messages.
   • onopen : enregistre lorsque la connexion est établie.
   • onerror : gère les erreurs, enregistre les détails et ferme la connexion si nécessaire.

2. Arrêter la connexion : La fonction handleStopConnection ferme la connexion SSE et nettoie.

3. UI : La page comprend une interface simple avec des boutons marche/arrêt et une liste pour afficher les messages.
   

"use client";

import type React from "react";
import { useState } from "react";

const App: React.FC = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [eventSource, setEventSource] = useState<EventSource | null>(null);

  const handleStartConnection = () => {
    const newEventSource = new EventSource("http://localhost:8080/events");

    const handleOnMessage = (event: MessageEvent) => {
      console.log("onmessage", event.data);
      setMessages((prev) => [...prev, event.data]);
    };

    const handleOnOpen = () => {
      console.log("Connection established");
    };

    const handleOnError = (error: Event) => {
      console.error("onerror", error);
      console.log("readyState:", newEventSource.readyState);
      console.log("Connection error occurred.");
      newEventSource.close();
      setEventSource(null);
    };

    const handleOnClose = () => {
      console.log("Connection is being closed by the server.");
      newEventSource.close();
      setEventSource(null);
    };

    newEventSource.onmessage = handleOnMessage;
    newEventSource.onopen = handleOnOpen;
    newEventSource.onerror = handleOnError;
    newEventSource.addEventListener("close", handleOnClose);

    setEventSource(newEventSource);
  };

  const handleStopConnection = () => {
    if (eventSource) {
      eventSource.close();
      setEventSource(null);
      console.log("Connection closed");
    }
  };

  return (
    <div>
      <h1>Server-Sent Events Demo</h1>
      <button
        type="button"
        onClick={handleStartConnection}
        disabled={!!eventSource}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
      >
        Start Connection
      </button>
      <button
        type="button"
        onClick={handleStopConnection}
        disabled={!eventSource}
        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 ml-2"
      >
        Stop Connection
      </button>
      <ul>
        {messages.map((message, index) => (
          <li key={`${index}-${message}`}>{message}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Back-end (api/main.go)

Le backend est construit à l'aide du framework Gin pour Go et comprend les fonctionnalités clés suivantes :

1. Configuration CORS : Le backend utilise le middleware Gin CORS pour autoriser les connexions pendant le débogage.

2. Point de terminaison SSE : le point de terminaison /events diffuse une série de messages prédéfinis au client avec un délai entre chaque message. Composants clés :

   • Les en-têtes sont définis pour spécifier le type de contenu texte/flux d'événements.
   • Les messages sont envoyés en boucle, avec un délai de 2 secondes entre chaque message.
   • Un dernier événement de fermeture signale la fin de la connexion.

"use client";

import type React from "react";
import { useState } from "react";

const App: React.FC = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [eventSource, setEventSource] = useState<EventSource | null>(null);

  const handleStartConnection = () => {
    const newEventSource = new EventSource("http://localhost:8080/events");

    const handleOnMessage = (event: MessageEvent) => {
      console.log("onmessage", event.data);
      setMessages((prev) => [...prev, event.data]);
    };

    const handleOnOpen = () => {
      console.log("Connection established");
    };

    const handleOnError = (error: Event) => {
      console.error("onerror", error);
      console.log("readyState:", newEventSource.readyState);
      console.log("Connection error occurred.");
      newEventSource.close();
      setEventSource(null);
    };

    const handleOnClose = () => {
      console.log("Connection is being closed by the server.");
      newEventSource.close();
      setEventSource(null);
    };

    newEventSource.onmessage = handleOnMessage;
    newEventSource.onopen = handleOnOpen;
    newEventSource.onerror = handleOnError;
    newEventSource.addEventListener("close", handleOnClose);

    setEventSource(newEventSource);
  };

  const handleStopConnection = () => {
    if (eventSource) {
      eventSource.close();
      setEventSource(null);
      console.log("Connection closed");
    }
  };

  return (
    <div>
      <h1>Server-Sent Events Demo</h1>
      <button
        type="button"
        onClick={handleStartConnection}
        disabled={!!eventSource}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
      >
        Start Connection
      </button>
      <button
        type="button"
        onClick={handleStopConnection}
        disabled={!eventSource}
        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 ml-2"
      >
        Stop Connection
      </button>
      <ul>
        {messages.map((message, index) => (
          <li key={`${index}-${message}`}>{message}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Comment l'exécuter

Pour exécuter cette démo, veuillez vous référer au fichier README.md dans le référentiel GitHub. Il contient des instructions étape par étape pour configurer et exécuter à la fois le frontend et le backend du projet.

Conclusion

Cette démo fournit une introduction simple mais efficace aux événements envoyés par le serveur (SSE), démontrant comment diffuser des messages en temps réel d'un serveur vers un navigateur. En se concentrant sur les bases, il est conçu pour vous aider à comprendre rapidement les concepts de base et à commencer à expérimenter l'ESS dans vos propres projets.

Si vous souhaitez l'essayer ou vous appuyer sur cet exemple, consultez le code source complet sur GitHub : référentiel sse-demo.

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!