suchen

Heim >Web-Frontend >H5-Tutorial >Detaillierte grafische Erläuterung des HTML5-Data-Push-SSE-Prinzips und der Anwendungsentwicklung

Detaillierte grafische Erläuterung des HTML5-Data-Push-SSE-Prinzips und der Anwendungsentwicklung

黄舟
黄舟Original
2017-03-08 15:23:152685Durchsuche

JavaScript drückt das Verhalten aus und CSS drückt das Erscheinungsbild aus. Beachten Sie, dass HTML sowohl die Struktur (logische Struktur) als auch den Inhalt (Daten selbst) ausdrückt. Normalerweise muss die Struktur nicht aktualisiert werden Genau das geschieht. Der Wunsch, nur die Daten zu ändern, ohne die Organisationsstruktur zu ändern, hat die Entstehung von Data-Pull- und Data-Push-Technologien gefördert.

SSE ist eine HTML5-Technologie, die es dem Server ermöglicht, neue Daten an den Client zu übertragen (sogenannter Daten-Push). Es gibt zwei Alternativen zum Daten-Push: keine Aktualisierungen und Daten-Pull.

Keine Update-Lösung:

Nach dem Laden des HTML erhalten Sie eine HTML-Seite, und dann fordert der Browser Bilder, CSS-Dateien und JavaScript-Dateien an usw. Sie sind alles statische Dateien, die der Browser zwischenspeichern kann. Wenn die Seite eine Back-End-Sprache wie PHP, Ruby, Python und andere Sprachen verwendet, die dynamisch HTML für Benutzer generieren.

Datenabrufschema:

Der Browser sendet Daten basierend auf einem Benutzerverhalten oder nach einem bestimmten Zeitraum oder basierend auf ein anderes Triggerschema. Die Serverseite fordert alle Daten an oder aktualisiert sie und kann die gesamte Seite über JavaScript oder ein Meta-Tag neu laden. Die bekannte Ajax-Technologie wird nur zum Anfordern der neuesten Daten verwendet. Wenn die Daten empfangen werden, verwendet die Javascript-Funktion diese, um das DOM lokal zu aktualisieren. Die Essenz des Datenabrufs besteht darin, nur neue Daten abzurufen und nur die betroffenen Teile der Seite zu aktualisieren.

Keiner der oben genannten Punkte ist ein Daten-Push. Dabei handelt es sich nicht um eine statische Datei, und der Browser initiiert auch keine Anfrage zum Aktualisieren von Daten. Beim Daten-Push wählt der Server den Client aus, um neue Daten zu senden.

Wenn die Datenquelle neue Daten enthält, kann der Server diese sofort an einen oder mehrere Clients senden, ohne auf die Anforderung dieser neuen Daten durch den Client zu warten Nachrichten, aktuelle Aktien, Chat-Nachrichten von Online-Freunden, neue Wettervorhersagen, nächste Schritte in Strategiespielen usw.

SSE eignet sich für häufige Updates, geringe Latenz und Daten vom Server zum Client. Der Unterschied zu WebSocket:

1) Komfort: Es ist nicht erforderlich, neue Komponenten hinzuzufügen Eine neue IP oder eine neue virtuelle Maschine für eine neue virtuelle Maschine. Die Portnummer ist problematisch.

2) Einfachheit auf der Serverseite. Da SSE mit vorhandenen HTTP/HTTPS-Protokollen arbeitet, kann es direkt auf vorhandenen Proxyservern und Authentifizierungstechnologien ausgeführt werden.

Der größte Vorteil von WebSocket gegenüber SSE besteht darin, dass es sich um eine bidirektionale Kommunikation handelt, was bedeutet, dass das Senden von Daten vom Server genauso einfach ist wie das Empfangen von Daten vom Server, während SSE im Allgemeinen vom Client zum Server geht Server über eine unabhängige Ajax-Anfrage Daten übertragen, daher erhöht die Verwendung von Ajax den Overhead im Vergleich zu WebSocket. Wenn Sie Daten einmal pro Sekunde oder schneller an den Server übertragen müssen, sollten Sie daher WebSocket verwenden.

Der spezifische Code lautet wie folgt:

HTML-Code

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>basic SSE test</title>
    </head>
    <body>
        <pre id = "x">initializting...
<script> var es = new EventSource("basic_sse.php"); es.addEventListener("message",function(e){ //e.data document.getElementById("x").innerHTML += "\n"+e.data; },false);//使用false表示在冒泡阶段处理事件，而不是捕获阶段。 </script>

Es sollte Beachten Sie Folgendes: Es ist am besten, dies zu überprüfen, bevor Sie serverseitige Daten verwenden, um potenzielle JavaScript-Injection-Angriffe zu verhindern.

PHP-Code

<?php
    header(&#39;Content-Type: text/event-stream&#39;);
    header(&#39;Cache-Control: no-cache&#39;);
    $time = date(&#39;r&#39;);
    echo "data: The server time is: {$time}\n\n";
    flush();
?>

„Content-Type: text/event-stream“ ist speziell für SSE Entworfener MIME-Typ,

Screenshot der Wirkung

Wenn Daten-Push die falsche Wahl ist

Erwägen Sie zuerst In Im statischen Fall wird kein Daten-Push eingeführt. Immer wenn der Benutzer eine Seite öffnet, wird eine Socket-Verbindung zwischen dem Browser und dem Server hergestellt. Die Server-Telefoninformationen werden dann an den Benutzer zurückgegeben Das Laden einer statischen HTML-Datei oder eines Bildes kann komplex sein, wie das Ausführen einer Hintergrundsprache, die eine Verbindung zu vielen Datenbanken herstellt. Der entscheidende Punkt hierbei ist, dass der Socket geschlossen wird, sobald die erforderlichen Informationen zurückgegeben werden, und jede HTTP-Anfrage eine dieser relativ kurzlebigen Socket-Verbindungen öffnet, deren Ressourcen auf dem Server begrenzt sind, sobald sie ihre beabsichtigten Aufgaben erfüllen zum Recycling.

Jetzt vergleichen wir den Daten-Push. Eine Anfrage wird nie abgeschlossen, es müssen immer viele Informationen gesendet werden, sodass der Socket offen bleibt. Da es sich um begrenzte Ressourcen handelt, ist die Anzahl der gleichzeitigen SSE-Verbindungen natürlich begrenzt.

Stellen Sie sich eine Situation vor, in der Sie telefonischen Service-Support für Ihre neueste Anwendung leisten. Es gibt 10 Callcenter-Mitarbeiter, die 1000 Benutzer betreuen. Der Benutzer stößt auf ein Problem und einer der Operatoren nimmt den Anruf entgegen und legt dann auf. Neue Kundenanrufe bleiben in der Warteschlange, bis einer der Telefonisten auflegt, was ein typisches Netzwerkdienstmuster ist.

Jetzt rief jedoch ein Kunde an und sagte: „Ich habe jetzt kein Problem, aber ich werde Ihr Produkt in den nächsten Stunden verwenden, und wenn ich auf Probleme stoße, hoffe ich, dass Sie sofort reagieren.“ Dieser Kunde telefoniert mehrere Stunden lang mit dem Betreiber und 10 % der Serviceressourcen des Callcenters werden verschwendet. Wenn es 10 solcher Kunden gibt, können die anderen 990 Kunden nicht anrufen. Dies ist das Daten-Push-Modell.

Natürlich ist das nicht immer eine schlechte Sache. Wenn dieser Kunde den ganzen Nachmittag über alle paar Sekunden ein Problem hat, verschwendet das Offenhalten des Telefons nicht 10 % der Serviceressourcen, sondern erhöht diese. Da jede Frage einen neuen Anruf erfordert (z. B. einen Datenabruf), müssen Betreiber zusätzliche Zeit für die Überprüfung der Kundenidentität und den Abruf von Konten aufwenden, was die Serviceeffizienz verringert. Das Bleiben am Telefon macht die Kunden in der Regel nicht nur zufriedener, sondern verbessert auch die Produktivität des Callcenters, was das am besten geeignete Szenario für den Datenpush ist.


Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung des HTML5-Data-Push-SSE-Prinzips und der Anwendungsentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in den Code des lokalen HTML5-Speichers LocalstorageNächster Artikel：Detaillierte Einführung in den Code des lokalen HTML5-Speichers Localstorage

In Verbindung stehende Artikel

Mehr sehen