HTML5-Websockets-Vollduplex-Kommunikation, detailliertes Lernbeispiel_HTML5-Tutorial-Fähigkeiten

Die meisten aktuellen Implementierungen von Echtzeit-Webanwendungen drehen sich um Polling und andere serverseitige Push-Technologien, von denen Comet die bekannteste ist. Die Comet-Technologie ermöglicht es dem Server, Daten aktiv und asynchron an den Client zu übertragen.

Bei Verwendung von Polling sendet der Browser regelmäßig HTTP-Anfragen und empfängt sofort Antworten. Bei Verwendung von Long Polling sendet der Browser eine Anfrage an den Server und der Server hält sie für einen bestimmten Zeitraum offen. Der Browser sendet eine vollständige HTTP-Anfrage, aber der Server sendet und behält eine offene Antwort, die weiterhin aktualisiert wird und auf unbestimmte Zeit offen bleibt.

Die oben genannten drei Methoden umfassen beim Senden von Echtzeitdaten HTTP-Anforderungs- und Antwortheader und enthalten eine große Menge zusätzlicher und unnötiger Headerdaten, die zu Übertragungsverzögerungen führen.

1. Interpretation von HTML5-WebSockets

1. WebSocket-Handshake

Um die WebSocket-Kommunikation herzustellen, aktualisieren Client und Server während des ersten Handshakes das HTTP-Protokoll auf das WebSocket-Protokoll. Sobald die Verbindung hergestellt ist, können WebSocket-Nachrichten im Vollduplex-Modus zwischen Client und Server hin und her gesendet werden.

Hinweis: Im Netzwerk beginnt jede Nachricht mit 0x00 Bytes und endet mit 0xFF, und die Zwischendaten verwenden das UTF-8-Codierungsformat.

2. WebSocket-Schnittstelle

Neben der Definition des WebSocket-Protokolls wird auch die WebSocket-Schnittstelle für JavaScript-Anwendungen definiert.

Code kopieren

Der Code lautet wie folgt:

Schnittstelle WebSocket{
readonly-Attribut DOMString URL;
//Bereitschaftszustand
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly-Attribut unsigned short readyState ;
readonly attribute unsigned short bufferedAmount;
//Netzwerk
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMSString data);
void close ();
};
WebSocket implementiert EventTarget;

Hinweis: Die Präfixe ws:// und wss:// stehen für WebSocket-Verbindungen bzw. sichere WebSocket-Verbindungen.

2. HTML5-WebSockets-API

In diesem Abschnitt wird die Verwendung von HTML5-WebSockets erläutert

1. Prüfen Sie, ob der Browser dies unterstützt

Verwenden Sie window.WebSocket, um festzustellen, ob der Browser dies unterstützt.

2. Grundlegende Verwendung der API

a. Erstellung von WebSocket-Objekten und Verbindung zum WebSocket-Server

Code kopieren

Der Code lautet wie folgt:

url = "ws:/ /localhost: 8080/echo";
ws = new WebSocket(url);

b. Ereignis-Listener hinzufügen

WebSocket folgt dem asynchronen Programmiermodell. Nach dem Öffnen des Sockets müssen Sie nur auf das Auftreten von Ereignissen warten, ohne den Server aktiv abzufragen. Daher müssen Sie eine Rückruffunktion hinzufügen, um auf Ereignisse zu warten.

Das WebSocket-Objekt verfügt über drei Ereignisse: Öffnen, Schließen und Nachricht. Das Open-Ereignis wird ausgelöst, wenn die Verbindung hergestellt wird, das Message-Ereignis wird ausgelöst, wenn eine Nachricht empfangen wird, und das Close-Ereignis wird ausgelöst, wenn die WebSocket-Verbindung geschlossen wird.

Code kopieren

Der Code lautet wie folgt:

ws.onopen = function( ){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function( ){
log("geschlossen");
}

c. Nachricht senden

Wenn der Socket geöffnet ist (d. h. nach dem Aufruf des Onopen-Listeners und vor dem Aufruf des Onclose-Listeners), können Sie die Sendemethode zum Senden einer Nachricht verwenden.

ws.send("Hello World");

3. HTML5-WebSockets-Anwendungsbeispiele

In diesem Abschnitt wird die zuvor beschriebene Geolocation-Schnittstelle kombiniert, um eine Anwendung zu erstellen, die die Entfernung direkt auf der Webseite berechnet.

1. HTML-Datei schreiben

Code kopieren

Der Code lautet wie folgt:

HTML5 WebSocket / Geolocation Tracker

Geolocation:

Ihr Browser unterstützt keine HTML5-Geolocation

WebSocket:

Ihr Browser unterstützt keine HTML5 Web Sockets

2. WebSocket-Code hinzufügen

Code kopieren

Der Code lautet wie folgt:

Funktion LoadDemo(){
/ /Stellen Sie sicher, dass der Browser WebSocket unterstützt
if(window.WebSocket){
url = "ws://localhost:8080";//broadcast WebSocket server location
ws = new WebSocket(url );
ws.onopen = function(){
updateSocketStatus("Verbindung hergestellt");
}
ws.onmessage = function(e){
updateSocketeStatus("Standortdaten aktualisieren: " dataReturned( e.data));
}
}
}

3. Geolocation-Code hinzufügen

Code kopieren

Der Code lautet wie folgt:

var geo;
if(navigator .geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("Der Browser unterstützt HTML5 Geolocation");
}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//Alle 20 Sekunden aktualisieren

function updateLocation(position){
var width = position.coords.latitude;
var longitude = position.coords.longitude;
var timestamp = position.timestamp;
updateGeolocationStatus(" Uhrzeit der Standortaktualisierung: „Zeitstempel);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}

4. Alle Inhalte zusammenführen

Code kopieren

Der Code lautet wie folgt:

HTML5 WebSocket / Geolocation 追踪器

Geolocation:

你的浏览器不支持HTML5 Geolocation

WebSocket:

你的浏览器不支持HTML5 Web Sockets

<script></p> <p> //Referenz auf WebSocket</p> <p> var ws;</p> <p> //Die eindeutige Zufalls-ID, die für diese Sitzung generiert wurde</p> <p> var myId = Math.floor(100000*Math.random());</p> <p> //Anzahl der aktuell angezeigten Zeilen</p> <p> var rowCount;</p> <p> Funktion updateSocketStatus(message){</p> <p> document.getElementById("socketStatus").innerHTML = message;</p> <p> }</p> <p> Funktion updateGeolocationStatus(message){</p> <p> document.getElementById("geoStatus").innerHTML = message;</p> <p> }</p> <p> Funktion loadDemo(){</p> <p> //Stellen Sie sicher, dass der Browser WebSocket unterstützt</p> <p> if(window.WebSocket){</p> <p> url = "ws://localhost:8080";//broadcast WebSocket-Serverstandort</p> <p> ws = new WebSocket(url);</p> <p> ws.onopen = function(){</p> <p> updateSocketStatus("Verbindung hergestellt");</p> <p> }</p> <p> ws.onmessage = function(e){</p> <p> updateSocketStatus("Standortdaten aktualisieren:" dataReturned(e.data));</p> <p> }</p> <p> }</p> <p> var geo;</p> <p> if(navigator.geolocation){</p> <p> geo = navigator.geolocation;</p> <p> updateGeolocationStatus("Der Browser unterstützt HTML5 Geolocation");</p> <p> }</p> <p> geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//Alle 20 Sekunden aktualisieren</p> <p> Funktion updateLocation(position){</p> <p> var width = position.coords.latitude;</p> <p> var longitude = position.coords.longitude;</p> <p> var timestamp = position.timestamp;</p> <p> updateGeolocationStatus("Standortaktualisierungszeit: "Zeitstempel);</p> <p> var toSend = JSON.stringify([myId,latitude,longitude]);</p> <p> sendMyLocation(toSend);</p> <p> }</p> <p> Funktion sendMyLocation(newLocation){</p> <p> if(ws){</p> <p> ws.send(newLocation)</p> <p> }</p> <p> }</p> <p> Funktion dataReturned(locationData){</p> <p> var allData = JSON.parse(locationData);</p> <p> var incomingId = allData[1];</p> <p> var incomingLat = allData[2];</p> <p> var incomingLong = allData[3];</p> <p> var incomingRow = document.getElementById(incomingId);</p> <p> if(!incomingRow){</p> <p> incomingRow = document.getElementById("div");</p> <p> incomingRow.setAttribute("id",incomingId);</p> <p> incomingRow.userText = (incomingId == myId)?"Me":'User' rowCount;</p> <p> rowCount ;</p> <p> document.body.appendChild(incomingRow);</p> <p> }</p> <p> incomingRow.innerHTML = incomingRow.userText " \ Lat: " </p> <p> incomingLat " \ Lon: " </p> <p> incomingLong;</p> <p> return incomingRow.userText;</p> <p> }</p> <p> Funktion handleLocationError(error){</p> <p> switch(error.code){</p> <p> Fall 0:</p> <p>updateGeolocationStatus("Fehler beim Abrufen der Standortinformationen: " error.message);</p> <p>break;</p> <p> Fall 1:</p> <p>updateGeolocationStatus("Der Benutzer blockiert den Zugriff auf Standortinformationen.");</p> <p>break;</p> <p> Fall 2:</p> <p>updateGeolocationStatus("Der Browser kann Ihre Standortinformationen nicht erkennen: " error.message);</p> <p>break;</p> <p> Fall 3:</p> <p>updateGeolocationStatus("Beim Abrufen von Standortinformationen ist beim Browser eine Zeitüberschreitung aufgetreten.");</p> <p>break;</p> <p> }<br> }</p> <p> </script>