Empfangen von Echtzeitdaten mit HTML5-Server-Sent-Ereignissen (SSE).

Server-Sent-Ereignisse (SSE) ist eine leichte Lösung, die von HTML5 bereitgestellt wird, um Echtzeit-Updates in den Browser zu bringen. Es realisiert die Einweg-Kommunikation durch lange HTTP-Verbindungen, die für Aktienmarkte, Benachrichtigungen und andere Szenarien geeignet sind. Erstellen Sie bei der Verwendung eine EventSource -Instanz und hören Sie nach Nachrichten zu: const eventsource = new eventsource ('/stream'); eventSource.onMessage = function (event) {console.log ('empfangene Nachricht:', event.data); }; Der Server muss den Inhaltstyp auf Text/Ereignisstream festlegen, die Verbindung geöffnet halten und Daten ausgeben: Inhalt \ n \ n im Format. Häufige Überlegungen umfassen: 1. Konfigurieren von CORs, um Cross-Domänen-Probleme zu lösen; 2. Steuerzeit für die automatische Wiederverbindung zurückzusetzen; 3. Verwenden Sie Ereignis: Definieren Sie benutzerdefinierte Ereignisstypen; 4. Verwalten Sie die Verbindungszeitüberschreitung, um Ressourcenleckage zu verhindern. Im Vergleich zu WebSocket ist SSE einfacher und einfacher zu bedienen, unterstützt das HTTP -Protokoll, um in die Firewall einzudringen, aber nur eine unidirektionale Kommunikation und hat eine geringfügige schlechte Kompatibilität. Es ist für Echtzeit-Pusharien ohne häufige Interaktionen geeignet.

Wenn Sie in der Webentwicklung Echtzeit-Updates vom Server zum Browser übertragen müssen, bietet HTML5 eine leichte Lösung: Server-Sent-Ereignisse (SSE). Im Vergleich zu WebSocket ist es einfacher und einfacher zu implementieren und ist besonders für Szenarien geeignet, in denen nur Server einen Einweg mit den Kunden mitteilen müssen.

Was sind Server-Sent-Ereignisse?

Server-Sent-Ereignisse sind Teil von HTML5, sodass Server Daten über HTTP-Long-Verbindungen in den Browser weitergeben können. Im Gegensatz zu herkömmlichen Wahlmethoden bleibt SSE nach der Erstellung einer Verbindung offen, und der Server kann jederzeit neue Daten senden, z. B. Aktienzitate, Echtzeitbenachrichtigungen oder Chat-Nachrichten.

Die grundlegende Nutzung besteht darin, eine EventSource -Instanz zu erstellen und auf eine URL auf der Serverseite zu verweisen:

 const eventsource = new eventSource ('/stream');
eventSource.onmessage = function (Ereignis) {
    console.log ('empfangene Nachricht:', event.data);
};

Solange der Server weiterhin Daten sendet, kann der Client diese weiterhin empfangen.

Wie setze ich den SSE -Support auf der Serverseite ein?

Unterschiedliche Backend -Sprachen haben unterschiedliche Implementierungsmethoden, aber der Kernpunkt ist derselbe: Halten Sie die Verbindung offen und geben Sie den Inhalt im SSE -Format aus.

Nehmen Sie Node.js Express als Beispiel:

 app.get ('/stream', (req, res) => {
    res.setheader ('Inhaltstyp', 'text/event-stream');
    res.setheader ('cache-control', 'no-cache');

    // Senden des Sendens von Daten setInterval (() => {
        Res.Write (`Data: $ {new Date ()} \ n \ n`);
    }, 1000);
});

Schlüsselpunkte:

• Legen Sie den richtigen Antwortheader ein, insbesondere text/event-stream
• Beenden Sie die Antwort nicht zu früh, halten Sie die Verbindung offen
• Das Datenformat muss data: 内容\n\n , und zwei Neulinen geben das Ende einer Nachricht an

Andere Sprachen wie Python (Flask), PHP oder Java Spring Boot können ähnlich implementiert werden.

Häufig gestellte Fragen und Notizen

1. Cross-Domänen-Probleme Wenn das Front-End und das Back-End nicht unter demselben Domänennamen stehen, muss CORS konfiguriert werden, um sicherzustellen, dass die EventSource eingeleitete Anfrage zulässig ist:

 Access-Control-Allow-Origin: *

Oder geben Sie einen bestimmten Domänennamen an.

2. Automatischer Wiederverbindenmechanismus Wenn die Verbindung unterbrochen wird, versucht der Browser automatisch, sich wieder zu verbinden, und die Standard -Wartezeit beträgt 3 Sekunden. Sie können dieses Intervall auf der Serverseite steuern:

 Wiederholung: 5000

3.. Benutzerdefinierte Ereignisart Zusätzlich zum Standard onmessage können Sie auch andere Ereignisnamen definieren:

 Ereignis: Update
Daten: {"Typ": "News", "Inhalt": "Neue Nachrichten kommen"}

Front-End-Überwachung:

 eventsource.addeventListener ('update', function (event) {
    console.log ('Update empfangen:', event.data);
});

4. Verbindungszeitüberschreitungs- und Ressourcenveröffentlichung Achten Sie darauf, dass die Verbindung nicht unbegrenzt hängen lässt. Der Server sollte über Mechanismen verfügen, um festzustellen, ob der Client getrennt ist, und Ressourcen rechtzeitig freigeben, um Speicherleckage zu vermeiden.

Wann sollte ich SSE anstelle von Websocket verwenden?

Websocket ist leistungsfähiger und unterstützt die wechselseitige Kommunikation, hat aber auch eine höhere Komplexität. Wenn Sie nur den Server benötigen, um Informationen an den Client zu bringen und keine häufigen Interaktionen zu benötigen, ist SSE eine bessere Wahl.

Zu den Vorteilen gehören:

• Vereinfachen Sie den Entwicklungsprozess und einfach sowohl vorder- als auch hintere Enden implementieren
• Unterstützen Sie die automatische Wiederverbindung
• Das Standard -HTTP -Protokoll kann verwendet werden, um das Eindringen in die Firewall zu erleichtern

Die Nachteile sind auch offensichtlich:

• Es wird nur eine Einweg-Kommunikation vom Server zum Client unterstützt
• Die Browserkompatibilität ist etwas schlecht (dh und ältere Versionen von Edge werden nicht unterstützt)

Grundsätzlich ist das. SSE ist nicht kompliziert, aber in der tatsächlichen Bereitstellung sollten Sie auf Verbindungsmanagement, Fehlerbehandlung und Leistungsoptimierung achten. Wenn Sie nur ein einfaches Echtzeit-Benachrichtigungssystem treffen möchten, ist SSE eine leichte und praktische Wahl.

Das obige ist der detaillierte Inhalt vonEmpfangen von Echtzeitdaten mit HTML5-Server-Sent-Ereignissen (SSE).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!