HTML5 -Server PUSP_MOTIC NODE JAVA COLLEGE FINDIGE

Für allgemeine Webanwendungen sind die meisten Entwickler kein Fremder. In Webanwendungen wird der interaktive Modus der Anforderung/ Antwort zwischen dem Browser und dem Server verwendet. Der Browser stellt eine Anforderung aus, und der Server generiert die entsprechende Antwort gemäß der Anforderung. Der Browser wird auf die empfangende Antwort auf Benutzer verarbeitet. Das Antwortformat kann HTML, XML oder JSON sein. Mit dem Restarchitekturstil und der Popularität von Ajax verwendet der Server JSON als Antwortdatenformat mehr. Die Webanwendung verwendet das XMLHTTPrequest -Objekt, um die Anforderung zu senden und den Inhalt der Seite dynamisch gemäß den vom Server zurückgegebenen Daten zu aktualisieren. Im Allgemeinen werden die Vorgänge der Benutzer auf der Seite, z. B. Klicken oder Verschieben der Maus, die entsprechenden Ereignisse ausgelöst. Eine Anfrage wird vom XMLHTTPREQUEST -Objekt ausgestellt, und die Seite hat ein lokales Update, nachdem der Server geantwortet hat. Die Mängel dieser Methode sind, dass die vom Server generierten Daten nicht rechtzeitig über den Browser benachrichtigt werden, sondern vom Browser bis zur nächsten Anforderung erhalten werden müssen. Für einige Anwendungen mit hohen Datenanforderungen ist diese Verzögerung inakzeptabel. Um die Anforderungen solcher Anwendungen zu erfüllen, müssen Sie einige Möglichkeiten vom Server auf den Browser verschieben, um sicherzustellen, dass die Daten Änderungen auf der Serverseite zum ersten Mal an Benutzer benachrichtigt werden können. Es gibt viele gemeinsame Lösungen, die in zwei Kategorien unterteilt werden können. Der Unterschied zwischen diesen beiden Methoden besteht darin, ob es auf dem HTTP -Protokoll basiert. Die Praxis, das HTTP -Protokoll nicht zu verwenden, besteht darin, die neuen WebSocket -Spezifikationen von HTML 5 zu verwenden, und die Methode zur Verwendung des HTTP -Protokolls umfasst eine einfache Rotation, Comet -Technologie und das in diesem Artikel beschriebene HTML 5 -Server -Push -Ereignis. Diese Technologien werden nachstehend eingeführt.

Bevor Sie das HTML 5 Server -Push -Ereignis einführen, führen Sie zunächst einige der oben genannten Anzahl von Server -Side -Daten -Push -Technologien ein. Das erste ist Websocket. Die WebSocket -Spezifikation ist ein wichtiger Bestandteil von HTML 5. Sie wurde von vielen Mainstream -Browsern und vielen auf Websocket entwickelten Anwendungen unterstützt. So wie der Name zum Ausdruck gebracht wird, verwendet WebSocket eine Jackeverbindung, basierend auf dem TCP -Protokoll. Nach der Verwendung von WebSocket erstellt es tatsächlich eine Reihe von Wortverbindungen zwischen dem Server und dem Browser, die in zwei Daten übertragen werden können. Die Funktion von Websocket ist sehr leistungsfähig und flexibel zu verwenden, was für verschiedene Szenarien geeignet sein kann. Die WebSocket -Technologie ist jedoch ebenfalls relativ kompliziert, einschließlich der Implementierung des Servers und der Browserseite, die sich von normalen Webanwendungen unterscheidet.

Mit Ausnahme von WebSocket basieren andere Implementierungsmethoden auf dem HTTP -Protokoll, um den Effekt des realen Zeitschubs zu erreichen. Die erste Methode ist eine einfache Rotation, dh der Browser sendet von Zeit zu Zeit eine Anforderung an den Server, um zu erkundigen, ob Datenaktualisierungen vorliegen. Dieser Ansatz ist relativ einfach und kann das Problem in gewissem Maße lösen. Berücksichtigen Sie jedoch sorgfältig das Zeitintervall der Rotation. Wenn das Intervall zwischen der Rotation zu lang ist, werden die Benutzer die aktualisierten Daten nicht rechtzeitig erhalten.

Die Comet -Technologie hat die Mängel der einfachen Rotation unter Verwendung von langwierigen Anfragen verbessert. Jede Anfrage für lange Rotation führt der Server die Verbindung in einem Zeitraum der Öffnung für einen bestimmten Zeitraum, anstatt sie unmittelbar nach Abschluss der Antwort zu schließen. Der Vorteil davon ist, dass innerhalb des Zeitraums, in dem die Verbindung geöffnet wird, das vom Server generierte Datenaktualisierung rechtzeitig an den Browser zurückgegeben werden kann. Wenn eine lange Verbindung geschlossen ist, öffnet der Browser sofort eine neue lange Verbindung, um die Anfrage fortzusetzen. Die Implementierung der Kometentechnologie erfordert jedoch die Unterstützung einer dritten Teilbibliothek auf dem Server und der Browserseite. Zusammenfassend ist die vier oben genannten verschiedenen Technologien aufgrund ihrer Defekte nicht empfohlen. Die Kometentechnologie ist nicht Teil des HTML 5 -Standards. WebSocket -Spezifikationen und Server -Push -Technologie sind Teil des HTML 5 -Standards. Die Websocket -Spezifikationen sind jedoch komplizierter und für Szenen geeignet, die kompliziert und zwei Datenkommunikation sein müssen. Für einfache Serverdaten -Pusharios reicht es aus, Server -Push -Ereignisse zu verwenden.

In Bezug auf den Browserunterstützung wurden Server -Push -Ereignisse auf den meisten Desktops und mobilen Browsern mit Ausnahme des IE unterstützt. Zu den Browsern und Versionen des Support Server -Push -Ereignisses gehören: Firefox 6.0+, Chrome 6.0+, Safari 5.0+, Opera 11.0+, iOS Safari 4.0+, Opera Mobile 11.1+, Chrom für Android 25.0+, Firefox für ANDR ANDR OID 19.0.0 19.0 + und Blackberry Browser 7.0+ et al. Die Unterstützung von IE hat in den folgenden Kapiteln eine detaillierte Einführung.

Die folgenden Spezifikationen der Server -Push -Ereignisspezifikation werden angegeben.

Die Server-Sent-Ereignisspezifikation ist ein wesentlicher Bestandteil der HTML 5-Spezifikation. Diese Spezifikation ist relativ einfach und besteht hauptsächlich aus zwei Teilen: Der erste Teil ist das Kommunikationsprotokoll zwischen dem Server und der Browser -Seite, und der zweite Teil ist das vom Browser verwendete EventOurce -Objekt zur Verwendung von JavaScript. Das Kommunikationsprotokoll ist ein einfaches Protokoll, das auf reinem Text basiert. Der Inhalt der Antwort auf dem Server ist Text/Ereignisstrom. Der Inhalt des Antworttextes kann als Ereignisfluss angesehen werden, der aus verschiedenen Ereignissen besteht. Jedes Ereignis besteht aus zwei Teilen: Typ und Daten, und jedes Ereignis kann eine optionale Kennung haben. Der Inhalt verschiedener Ereignisse wird durch die leeren Linien (/r/n) getrennt, die nur das Autoeinzug und das königliche Symbol enthält. Die Daten jedes Ereignisses können aus mehreren Zeilen bestehen. Die Codeliste 1 gibt ein Beispiel für die Server -Side -Antwort.

 Daten: Erster EventData: Zweite EventID: 100Event: myeventData: dritte EventID: 101: Dies ist ein Kommentar: Fouteh EventData: Fours Event Weiter

Wie in Liste 1 gezeigt, wird jedes Ereignis durch eine leere Linie getrennt. Für jede Zeile ist der Dickdarm (:) der Typ der Linie vorher und der entsprechende Wert hinter dem Dickdarm. Mögliche Typen umfassen:

1. Der Typ ist leer und zeigt an, dass die Zeile ein Kommentar ist und während der Verarbeitung ignoriert wird.
2. Der Typ ist Daten, was bedeutet, dass die Zeile Daten enthält. Es kann zu Beginn von Daten viele Male erscheinen. Alle diese Zeilen sind Daten des Vorfalls.
3. Der Typ ist Ereignis, der angibt, dass die Bank verwendet wird, um den Typ des Ereignisses zu deklarieren. Beim Empfangen der Daten erzeugt der Browser einen entsprechenden Ereignisentyp.
4. Der Typ ist ID, der angibt, dass die Linie verwendet wird, um die Kennung des Ereignisses zu deklarieren.
5. Der Typ ist wiederholt und zeigt an, dass die Linie verwendet wird, um die Wartezeit zu deklarieren, bevor der Browser nach dem Trennen der Verbindung verbunden ist.

In dem obigen Code enthält das erste Ereignis nur Daten, die Standardereignisse generieren. Die Veranstaltung ist Fours Event/nFounth eovent weiter. Wenn es mehrere Datenzeilen gibt, werden die tatsächlichen Daten mit den Daten für die Änderung der Zeile verbunden.

Wenn die vom Server zurückgegebenen Daten die Kennung des Ereignisses enthalten, zeichnet der Browser die Kennung des kürzlich empfangenen Ereignisses auf. Wenn die Verbindung zum Server unterbrochen wird und das Browser-Ende erneut angeschlossen ist, wird das Logo des letzten Mals, als das Ereignis vom HTTP-Head-Event-ID erhalten wird. Der Server kann durch die vom Browser -Seite gesendete Ereigniskennung ermittelt werden, um festzustellen, welches Ereignis die Verbindung fortsetzt.

Für die von der Serverseite zurückgegebene Antwort muss die Browser -Seite das EventSource -Objekt in JavaScript zur Verarbeitung verwenden. EventSource verwendet eine Standard -Ereignisüberwachungsmethode, mit der nur die entsprechende Ereignisverarbeitungsmethode zum Objekt hinzugefügt werden muss. EventSource bietet drei Standard -Ereignisse, wie in Tabelle 1 gezeigt.

Wie bereits erwähnt, kann der Server ein benutzerdefiniertes Typereignis zurückgeben. Für diese Ereignisse können Sie die AddEventListener -Methode verwenden, um die entsprechende Ereignisverarbeitungsmethode hinzuzufügen. Die Codeliste 2 gibt ein Beispiel für das EreignisOrce -Objekt.

 var es = neuer EreignisSource ('Ereignisse'); Daten);});

Wie oben gezeigt, kann nach dem Erstellen des EventSource -Objekts die Ereignisverarbeitungsmethode über die OnMessage- und AddEventListener -Methoden hinzugefügt werden. Wenn der Server neue Ereignisse hat, wird die entsprechende Ereignisverarbeitungsmethode aufgerufen. Die Rolle der OnMessage -Eigenschaft des EventSource -Objekts ähnelt der von AddEventListener ('Nachricht'), aber das OnMessage -Attribut unterstützt nur eine Ereignisverarbeitungsmethode. Nach der Einführung des Spezifikationsinhalts des Server -Push -Ereignisses wird die Implementierung des Servers nachstehend eingeführt.

Aus der Beschreibung des Kommunikationsprotokolls im vorherigen Abschnitt ist es ersichtlich, dass das Server -Push -Ereignis ein einfacheres Protokoll ist. Die Implementierung der Serverseite ist relativ einfach. In der Open -Source -Community finden Sie eine Vielzahl verschiedener Server -Side -Technologien. Es ist nicht schwierig, sich selbst zu entwickeln. Dieser Artikel verwendet Java als Implementierungssprache des Servers. Siehe Referenzressourcen, entsprechend implementieren von Open-Source-basierten Eventsource-Service-Projekten. Das Folgende ist ein spezifisches Beispiel, um zu veranschaulichen, wie das Projekt mit Jetty-Eventsource-Service verwendet wird. Das Beispiel wird verwendet, um die zufällige Bewegung eines Objekts in einem begrenzten Raum zu simulieren. Das Objekt startet von einer zufälligen Position und wählt dann zufällig eine Richtung von oben, unten, links und rechts aus und bewegt einen zufälligen Abstand in diese Richtung. Der Server ändert ständig die Position des Objekts und drückt die Standortinformationen in den Browser, der vom Browser angezeigt wird.

服务器端的实现由两部分组成 ： 一部分是用来产生数据的 org.eclipse.jetty.servlets.eventsource 接口的实现 ， 另一部分是作为浏览器访问端点的继承自 org.eclipse.jetty.servlets.eventsourceservlet 类的Servlet -Implementierung. Der folgende Code enthält eine Implementierungsklasse der EventSource -Schnittstelle.

EventSource Interface Implementation Class MovementEventSource

 Öffentliche KlassenEvents implementiert EventSource {private int width = 800; logger .getLogger (getClass (). GetName ()); .Nextint (width); (LastEventid); .Split (,); POS [1], 10);} catch (numberformatexception e) {} if (isvalidmove (xpos, ypos)) {x = xpos; Informationen.); .Data (id) gemäß dem Ort; , e); Move = GetMove (); Zu beurteilen, ob die aktuelle Bewegungsposition legal ist. xdir = new int}; )};}}

Die Movement Eventsource muss die ONRESUME- und Onclose -Methode der EventSource -Schnittstelle implementieren. Sowohl die Onopen- als auch die OnResume -Methoden verfügen über einen Parameter der EventSource. -Employ -Schnittstelle, mit der Daten gesendet werden können. Die in der EventSource. -Emitter -Schnittstelle enthaltenen Methoden umfassen Daten, Ereignisse, Kommentare, ID und Schließen, die verschiedenen Arten von Ereignissen im Kommunikationsprotokoll entsprechen. Die OnResume-Methode enthält auch einen zusätzlichen Parameter LastEventid, der die Kennung des neuesten Ereignisses, das vom letzten Event-ID-Header gesendet wurde, angibt.

Die Hauptlogik von Ereignissen, die im Ereignis in der MovementEventource -Klasse erzeugt werden, befindet sich in der Abfragemethode. Diese Methode enthält einen unbegrenzten Zyklus, der die Position alle 2 Sekunden ändert und gleichzeitig die aktualisierte Position über die Datenmethode der Aktualisierungsposition über die Datenmethode der EventSource. -Employ -Schnittstelle an das Browser -Ende sendet. Jedes Ereignis hat eine entsprechende Kennung, und der Wert der Kennung ist die Position selbst. Wenn der Browser nach dem Trennen der Verbindung neu angeschlossen ist, kann das Objekt von der letzten Position verschoben werden.

Es ist einfach, den Dienst des Dienstes zu implementieren, der der MovementEventSource -Klasse entspricht. Bei der Implementierung der NeweventSource -Methode muss eine MovementEventSource -Klasse zurückgegeben werden, wie unten gezeigt. Immer wenn der Browser festgelegt ist, erstellt der Dienst ein Objekt einer neuen MovementEventource -Klasse, um die Anfrage zu bewältigen.

 Public Class MovementServlet ExtendsArcesOrceservlet {@Override Protected EventSource NewsSource (httpServletRequest, String ClientID) Return New Movement Eventsource (800, 600, 20);}}}

In der Server -Implementierung sollte beachtet werden, dass der entsprechende Serverfilterunterstützung hinzugefügt werden sollte. Dies ist die Anforderung des Jettierungs-Continuations-Frameworks, auf das das Projekt von Jetty-Eventsource-Servlet angewiesen ist. Andernfalls wird in dem Fall Fehler auftreten. Die Methode zum Hinzufügen eines Filters besteht darin, den Konfigurationsinhalt wie unten in der Datei web.xml gezeigt hinzuzufügen.

 <Filter> <Filter-name> Fortsetzung </filter-name> <Filter-Klasse> org.eclipse.jetty.continuation.ContinuationFilter </Filter-Class> </filter> <filter-ma pping> <Filter-name> Fortsetzung </filter-name> <url-pattern>/SSE/*</url-puftern> </filtermapping>

Die Implementierung der Browser -Seite ist relativ einfach. Der folgende Code gibt die entsprechende Implementierung an. Verwenden Sie ein Quadrat auf der Seite, um ein Objekt darzustellen. Wenn ein neues Ereignis empfangen wird, befindet sich die Position des Blocks gemäß den in den Ereignisdaten angegebenen Koordinateninformationen auf der Seite.

 var es = new eventsource ('sse/move'); [1]; $ ('#Box').

Nach der Einführung der grundlegenden Serverseite und des Browserendes wird der wichtigste IE -Support unten eingeführt.

Ein großes Problem mit dem nativen EventSource -Objekt des Browsers ist, dass der IE keine Unterstützung bietet. Um die gleiche Unterstützung für den IE zu bieten, gibt es im Allgemeinen zwei Möglichkeiten. Der erste Weg ist die Verwendung des ursprünglichen EventSource -Objekts für andere Browser, während die einfache Rotation oder die Kometentechnologie für den IE verwendet wird. . In diesem Artikel wird die Polyfill -Technologie verwendet, in der nur eine dritte JavaScript -Bibliothek auf die Seite geladen wird. Das Anwenden des Browser -Seitencodes muss nicht geändert werden. Es wird im Allgemeinen empfohlen, eine zweite Methode anzuwenden, da auf dieser Weise auf der Serverseite nur eine Implementierungstechnologie erforderlich ist.

Es ist nicht einfach, ein ähnliches primäres Eventsource -Objekt für den IE bereitzustellen. Theoretisch wird nur das XMLHTTPREquest -Objekt benötigt, um den Antwortinhalt der Serverseite zu erhalten, und durch Textanalyse können die entsprechenden Ereignisse extrahiert und die entsprechende Ereignisverarbeitungsmethode ausgelöst werden. Das Problem ist, dass das XMLHTTPrequest -Objekt unter IE den Antwortinhalt des erhaltenen Teils nicht unterstützt. Erst nachdem die Antwort abgeschlossen ist, kann sie erhalten werden. Da das Server -Push -Ereignis eine lange Verbindung verwendet. Wenn die Verbindung immer geöffnet ist, kann das entsprechende Ereignis nicht über das XMLHTTPrequest -Objekt ausgelöst werden, und das entsprechende Ereignis kann nicht ausgelöst werden. Insbesondere kann sein Responsext -Attribut nicht erhalten werden, wenn das ReadyState des XMLHTTPREquest -Objekts 3 (ReadyState_interaction) ist.

Um das Problem von XMLHTTPREquest -Objekten unter IE zu lösen, müssen Sie das in IE 8 eingeführte XdomainRequest -Objekt verwenden. Die Rolle des XdomainRequest -Objekts besteht darin, eine Cross -Domain -Ajax -Anfrage zu senden. Das XdomainRequest -Objekt liefert das On -Progress -Ereignis. Wenn das On -Progress -Ereignis auftritt, kann ein gewisser Inhalt der Antwort über die Responsext -Eigenschaft erhalten werden. Dies ist der größte Unterschied zwischen dem XMLHTTPrequest -Objekt und dem XMLHTTPrequest -Objekt. Nach Verwendung des XdomainRequest -Objekts, um die Verbindung zur Serverseite zu öffnen, kann sie auf dem Server mit dem On -Progress -Ereignis des XdomainRequest -Objekts verarbeitet werden.

Aufgrund des ursprünglichen Zwecks des XdomainRequest -Objekts besteht jedoch auch die Einschränkung des XdomainRequest -Objekts, wenn die Sicherheitsprobleme des Cross -Domain -Zugangs geprüft werden. Diese Einschränkungen wirken sich auf die Implementierung als EventSource -Objekt aus. Die spezifischen Einschränkungen und Lösungen sind nachstehend dargestellt:

1. Die Antwort des Servers muss den Kopf der Zugriffskontrolle enthalten, mit der die URL zugelassen ist, aus der die Domänen zulässig sind. *Es bedeutet, dass der Zugriff aus einer Domäne zugelassen wird, und dieser Wert wird nicht empfohlen. Verwenden Sie im Allgemeinen dieselbe Domäne wie die aktuelle Anwendung, wobei Sie nur den Zugriff aus der Vorderdomäne einschränken.
2. Die Anforderung des XdomainRequest -Objekts kann keinen benutzerdefinierten HTTP -Kopf enthalten, der die Kennung des kürzlich vom Browser empfangenen Browsers einschränkt. Diese Kennung kann nur andere Möglichkeiten von HTTP -Anfragen übergeben werden, z.
3. Der Inhaltstyp (Inhaltstyp) des XdomainRequest-Objekts kann nur Text/Ebene sein. Dies bedeutet, dass bei der Verwendung der Postanforderung das vom Server verwendete Framework wie Service den Inhalt der Postanforderung nicht automatisch analysiert. Der ursprüngliche Anforderungsinhalt kann nur auf dem Server analysiert werden, um die Werte der Parameter zu erhalten.
4. Die vom XdomainRequest -Objekt ausgestellte Anfrage enthält keine Informationen zur Benutzerauthentifizierung, einschließlich Cookies. Dies bedeutet, dass andere Methoden von HTTP -Anfragen, wenn der Server authentifiziert werden muss, die Authentifizierungsinformationen des Benutzers wie die ID der Sitzung übergeben hat.

Aufgrund dieser Einschränkungen des XdomainRequest -Objekts muss die Implementierung des Servers auch entsprechende Änderungen vornehmen. Diese Änderungen umfassen die Rückgabe des Kopfs der Zugriffskontrolle.

Die in diesem Artikel verwendete Polyfill -Bibliothek ist das von Yaffle auf GitHub entwickelte EventSource -Projekt. Nachdem Sie die Polyfill -Bibliothek verwendet und die Implementierung der Serverseite geändert haben, können Sie den Server verwenden, um das Ereignis in den Browser zu drücken, dh 8 und höher. Wenn Sie IE 7 unterstützen müssen, können Sie nur eine einfache Anfrage oder Comet -Technologie verwenden. Siehe Referenzressourcen im Beispielcode dieses Artikels.

Wenn Sie die Daten vom Server in den Browser drücken müssen, umfassen die Technologien, die basierend auf den HTML 5 -Spezifikationsstandards verwendet werden können, WebSocket- und Server -Push -Ereignisse. Entwickler können die richtige Technologie entsprechend den spezifischen Anforderungen der Anwendung auswählen. Wenn Sie nur Daten vom Server pushen müssen, ist der Standard des Server -Push -Ereignisses einfacher und einfacher zu erreichen. Dieser Artikel hat den Standardinhalt des Server -Push -Ereignisses, die Implementierung des Servers und der Browser -Seite im Detail eingeführt und auch analysiert, wie der IE -Browser unterstützt wird.