Einführung in die HTML5 WebSockets -API

html5 führt viele neuartige APIs vor, einschließlich WebSocket. Mit WebSocket können Entwickler leistungsstarke Echtzeitanwendungen erstellen, indem Socket-Verbindungen zwischen dem Browser und dem Server hergestellt werden. Mit anderen Worten können Clients und Server aufgrund der Existenz anhaltender Verbindungen jederzeit Daten austauschen. In diesem Tutorial wird erläutert, wie Sie eine Echtzeit-Webanwendung mit WebSocket erstellen.

Schlüsselpunkte

• Die in HTML5 eingeführte WebSocket-API ermöglicht es Entwicklern, Echtzeitanwendungen zu erstellen, indem anhaltende Socket-Verbindungen zwischen dem Browser und dem Server hergestellt werden, wodurch Clients und Server jederzeit austauschen können.
• Es ist sehr einfach, eine WebSocket -Verbindung zu öffnen. Sie müssen nur den Konstruktor von WebSocket () anrufen. Die Verbindung bleibt offen, bis der Client oder Server sie schließt, wodurch die Belastung des Servers verringert und die beste Lösung für Anwendungen mit niedriger Latenz liefert.
• Binärdaten können in Form eines Blob oder ArrayBuffer unter Verwendung der Verbindung von Connection.send () gesendet und empfangen werden. Die empfangene Nachricht kann auch eine String- oder Binärdaten sein, die in Form eines Blob oder ArrayBuffer empfangen wird.
• Erstellen von Echtzeitanwendungen mithilfe von WebSocket erfordert eine serverseitige Implementierung und kann mit verschiedenen Technologien (wie Node.js, Java, .NET, Ruby oder C) durchgeführt werden. Die WebSocket-API kann verwendet werden, um leistungsstarke Echtzeit-Anwendungen wie Social-Updates in Echtzeit, HTML5-Multiplayer-Spiele und Online-Chat-Anwendungen zu erstellen.

Frage

In einer Echtzeitanwendung muss die Verbindung zwischen dem Server und dem Client hartnäckig sein. Um die Illusion zu erstellen, dass der Server die Übertragung initiiert, wird normalerweise lange Umfragen verwendet. WebSocket löst dieses Problem, indem eine anhaltende Socket -Verbindung zwischen dem Client und dem Server hergestellt wird. Sobald die Verbindung hergestellt ist, bleibt sie geöffnet, bis der Client oder Server sie schließen möchte. Es reduziert die Belastung des Servers stark und eignet sich am besten für Anwendungen mit niedriger Latenz.

Anfänger

Es ist sehr einfach, eine WebSocket -Verbindung zu öffnen. Sie müssen nur den WebSocket () -Konstruktor anrufen, um die Verbindung zu erstellen.

var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);

WS: und WSS: sind die URL -Muster für normale und sichere WebSocket -Verbindungen. Der zweite Parameter wird verwendet, um den SubproTocol -Namen zu definieren, der ein String -Array oder eine Zeichenfolge sein kann. Der Server akzeptiert jedoch nur ein Subprotokoll. Während des Lebenszyklus einer Verbindung erhält der Browser mehrere Ereignisse wie Verbindungsöffnung, Nachrichtenempfang und Verbindungsschließung. Verwenden Sie den folgenden Code, um diese Ereignisse zu verarbeiten:

var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);

Nachdem die Verbindung geöffnet wurde, verwendet der Browser Connection.send (), um eine Nachricht an den Server zu senden. Wenn ein Fehler auftritt, zeichnet der obige Code einfach auf. Wenn der Server jederzeit eine Nachricht an den Browser sendet, wird der OnMessage -Rückruf ausgelöst. Der Ereignishandler erhält ein Ereignisobjekt, dessen Datenattribut die empfangene Nachricht enthält. Die Methode von Connection.Send () kann auch zum Senden von Binärdaten verwendet werden. Dazu können Sie Blob oder ArrayBuffer verwenden. Der folgende Code zeigt, wie Sie ArrayBuffer verwenden, um Bilder auf die Leinwand an den Server zu senden.

var connection = new WebSocket("ws://localhost:8787", 'json');
connection.onopen = function() {
  connection.send('Hello, Server!!'); // 连接打开后向服务器发送消息。
};
connection.onerror = function(error) {
  console.log('Error Logged: ' + error); // 记录错误
};
connection.onmessage = function(e) {
  console.log('Received From Server: ' + e.data); // 记录接收到的消息
};

In ähnlicher Weise kann die empfangene Nachricht eine String- oder Binärdaten sein. Binärdaten können als Blob oder ArrayBuffer empfangen werden.

Einfache WebSocket -Anwendung

Um eine runnable Anwendung zu erstellen, benötigen Sie auch eine serverseitige Implementierung. Sie können node.js, java, .net, ruby ​​oder c verwenden, um serverseitige Implementierungen zu erstellen. In diesem Abschnitt wird angezeigt, wie Sie eine einfache Anwendung mit WebSocket erstellen. Mit der Beispielanwendung kann der Benutzer dem Server bestimmte Fragen stellen. Die serverseitige Implementierung erfolgt mit dem Java JWebsocket-Framework unter Windows 7. Um die Umgebung einzurichten, befolgen Sie daher diese einfachen Schritte. Ich gehe davon aus, dass Sie den neuesten JDK (JDK 7) auf Ihrem Windows 7 -PC installiert haben.

Schritt 1

Gehen Sie zur JWebsocket -Download -Seite und laden Sie die erste als Server gekennzeichnete ZIP -Datei herunter.

Schritt 2

dekomprimieren Sie das Archiv und platzieren Sie es irgendwo in C:. Erstellen Sie dann eine neue Umgebungsvariable namens JWebsocket_Home, die das Stammverzeichnis der JWebsocket -Installation verweist. Dies ist der Weg zum Ordner jWebsocket-1.0. Fügen Sie Ihrem Klassenpfad das folgende Glas hinzu:

• jwebsocket_home/libs/jwebsocketserver-1.0.jar
• jwebsocket_home/libs/jwebsocketserverapi-1.0.jar
• jwebsocket_home/libs/jwebsocketcommon-1.0.jar

Schritt 3

Erstellen Sie eine neue Java -Quelldatei und nennen Sie es SocketListener.java. Fügen Sie dieser Datei den folgenden Code hinzu. (Der Java-Code-Teil wird hier weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Halten Sie also einfach die logische Kernbeschreibung.)

Schritt 4

socketListener.java kompilieren und den Server mit dem Befehl Java SocketListener starten.

Schritt 5

Nachdem Sie die serverseitige Implementierung abgeschlossen haben, ist es an der Zeit, einen Client zu erstellen, der mit dem Server interagiert. (Die HTML- und JavaScript-Code-Teile werden hier weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt, sodass Sie einfach die logische Kernbeschreibung behalten können)

Schlussfolgerung

Mit der WebSocket-API können Sie sehr leistungsstarke Echtzeitanwendungen erstellen. Denken Sie jedoch daran, dass WebSocket eine Cross-Domain-Kommunikation ermöglicht. Daher sollten Sie nur mit Servern und Kunden kommunizieren, denen Sie vertrauen. Hier sind einige Beispielanwendungen, die Sie mit dieser API erstellen können:

• Soziales Update in Echtzeit
• HTML5 Multiplayer -Spiel
• Online -Chat -App

Weitere Informationen zur WebSocket -API finden Sie im Mozilla Developer -Netzwerk. (Der FAQ-Teil wird hier weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Halten Sie also einfach die logische Kernbeschreibung.)

Das obige ist der detaillierte Inhalt vonEinführung in die HTML5 WebSockets -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!