Die einfachste Demo zu SSE (Server-Send Events)

Einführung

Server-Sent Events (SSE) ist eine Webtechnologie, die es einem Server ermöglicht, Echtzeitaktualisierungen über HTTP an einen Client zu übertragen. Im Gegensatz zu WebSockets ist SSE einfacher zu implementieren, da es einen unidirektionalen Kommunikationskanal vom Server zum Browser verwendet und über eine normale HTTP-Verbindung funktioniert. Dies ist besonders nützlich für Anwendungen, die regelmäßige Aktualisierungen erfordern, wie z. B. Live-Scores, Benachrichtigungen oder Echtzeit-Überwachungs-Dashboards.

Ich habe diese Demo erstellt, weil ich derzeit eine Anwendung entwickle, in der KIs verschiedene Themen diskutieren. Ich wollte einige Stream-ähnliche Funktionen implementieren und entdeckte die Technologie namens „SSE“.

Demo-Übersicht

Diese Demo zeigt, wie Server-Sent Events (SSE) verwendet werden können, um Echtzeit-Updates von einer API an den Browser zu senden. In diesem Beispiel zeigt der Browser eine Reihe von Beispielnachrichten an, die vom Server gesendet wurden. Die Einfachheit dieser Demo macht sie zu einem hervorragenden Ausgangspunkt, um zu verstehen, wie SSE funktioniert, und um es in Ihre Projekte zu integrieren.

Demo-Video

Unten finden Sie ein Video, das zeigt, wie die Server-Sent Events (SSE)-Demo in Echtzeit funktioniert. Wenn Sie sich dieses Video ansehen, erhalten Sie ein besseres Verständnis dafür, wie Client und Server interagieren, um Echtzeit-Updates bereitzustellen.

Durchführung

Die Kernimplementierung der Server-Sent Events (SSE)-Demo ist in zwei Teile unterteilt: das Frontend und das Backend. Der vollständige Quellcode ist auf GitHub verfügbar: sse-demo-Repository.

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

Das Frontend ist mit React erstellt und bietet Schaltflächen zum Starten und Stoppen der SSE-Verbindung sowie die Anzeige von Echtzeitnachrichten vom Server. Hier sind die wichtigsten Highlights:

1. Herstellen einer Verbindung mit SSE: Die Funktion handleStartConnection erstellt ein EventSource-Objekt, das mit dem Endpunkt /events verbunden ist. Es lauscht auf Nachrichten, offene Ereignisse und Fehlerereignisse:

   • onmessage: Verarbeitet eingehende Nachrichten und aktualisiert den Nachrichtenstatus.
   • onopen: Protokolliert, wenn die Verbindung hergestellt wird.
   • onerror: Behandelt Fehler, protokolliert Details und schließt bei Bedarf die Verbindung.

2. Verbindung beenden: Die Funktion handleStopConnection schließt die SSE-Verbindung und bereinigt.

3. Benutzeroberfläche: Die Seite enthält eine einfache Benutzeroberfläche mit Start-/Stopp-Schaltflächen und einer Liste zum Anzeigen von Nachrichten.
   

"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;

Backend (api/main.go)

Das Backend basiert auf dem Gin-Framework für Go und umfasst die folgenden Hauptfunktionen:

1. CORS-Konfiguration: Das Backend verwendet die Gin CORS-Middleware, um Verbindungen während des Debuggens zu ermöglichen.

2. SSE-Endpunkt: Der /events-Endpunkt streamt eine Reihe vordefinierter Nachrichten mit einer Verzögerung zwischen den einzelnen Nachrichten an den Client. Schlüsselkomponenten:

   • Kopfzeilen werden so eingestellt, dass sie den Text-/Ereignis-Stream-Inhaltstyp angeben.
   • Nachrichten werden in einer Schleife gesendet, mit einer Verzögerung von 2 Sekunden zwischen den einzelnen Nachrichten.
   • Ein letztes Schließereignis signalisiert das Ende der Verbindung.

"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;

So führen Sie es aus

Um diese Demo auszuführen, lesen Sie bitte die Datei README.md im GitHub-Repository. Es enthält Schritt-für-Schritt-Anleitungen zum Einrichten und Ausführen sowohl des Frontends als auch des Backends des Projekts.

Abschluss

Diese Demo bietet eine einfache, aber effektive Einführung in Server-Sent Events (SSE) und zeigt, wie Echtzeitnachrichten von einem Server an einen Browser gestreamt werden. Durch die Konzentration auf die Grundlagen soll es Ihnen helfen, die Kernkonzepte schnell zu verstehen und mit SSE in Ihren eigenen Projekten zu experimentieren.

Wenn Sie daran interessiert sind, es auszuprobieren oder auf diesem Beispiel aufzubauen, schauen Sie sich den vollständigen Quellcode auf GitHub an: sse-demo-Repository.

Das obige ist der detaillierte Inhalt vonDie einfachste Demo zu SSE (Server-Send Events). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!