Anwendungscache-API ("AppCache")26
TOC
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Die WebSocket-API

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen nun die WebSocket-API entsprechend der Definition in der WebSocket-Spezifikation des World Wide Web Consortium (W3C). Die WebSockets-Technologie bietet eine neue W3C-JavaScript-API und ein Protokoll für die bilaterale Kommunikation über das Internet. Dieses neue Protokoll vereinfacht die direkte Arbeit mit festen Datenformaten und umgeht das langsamere dokumentbasierte HTTP-Protokoll.

Das derzeitige HTTP-Standardprotokoll ist langsam, weil es Dokumente auf einem Server abfragen und warten muss, bis das Dokument gesendet wird, bevor es eine Webseite anzeigen kann. Mit WebSockets können Sie Daten mit Text, binären Arrays oder Blobs sofort senden und empfangen.

Die WebSocket-API ist einfach und unkompliziert und benötigt sehr wenig Code. Sie können den bidirektionalen Datenaustausch mit geringer Wartezeit nutzen, um schnellere Onlinespiele zu erstellen, Sofortbenachrichtigungen aus sozialen Netzwerken zu generieren, Aktienmärkte und Wetterinformationen in Echtzeit sowie andere zeitbasierte Daten anzuzeigen.

Implementieren von WebSockets

Das Implementieren dieser neuen Datenaustauschtechnologie ist einfach, wenn Sie folgende Schritte befolgen:

1. Verwenden Sie einen Clientbrowser, der das WebSocket-Protokoll implementiert.
2. Schreiben Sie Code in eine Webseite, der ein Clientwebsocket erstellt.
3. Schreiben Sie Code auf einem Webserver, der über ein Websocket auf eine Clientanfrage antwortet.

Verwenden eines WebSocket-Clients

Internet Explorer 10 implementiert wie auch andere wichtige Browser das WebSocket-Protokoll. Aktuelle Informationen zur Browserunterstützung finden Sie unter caniuse.com.

Das WebSocket-Protokoll verwendet gemäß der Definition auf der Website IETF-Tools die nachstehenden URL-Schemas.


ws://
wss://

Schreiben von WebSocket-Clientcode

Folgende Aktionen müssen von Ihrem Webseitencode ausgeführt werden:

1. Websocket initialisieren und mit dem Server verbinden.
2. Testen, ob der Vorgang erfolgreich war.
3. Daten senden und empfangen.

Mit dem folgenden Code wird typischerweise die Websocket-URL definiert:


var host = 'ws://example.microsoft.com';

Der folgende Code zeigt, wie Sie eine Verbindung mit einem Websocket herstellen und überprüfen können, ob dies erfolgreich war.


 var host = "ws://sample-host/echo";
 try {
    socket = new WebSocket(host);

    socket.onopen = function (openEvent) {
       document.getElementById("serverStatus").innerHTML = 
          'WebSocket Status:: Socket Open';
    };

 socket.onmessage = function (messageEvent) {

    if (messageEvent.data instanceof Blob) {
    var destinationCanvas = document.getElementById('destination');
    var destinationContext = destinationCanvas.getContext('2d');
    var image = new Image();
    image.onload = function () {
       destinationContext.clearRect(0, 0, 
          destinationCanvas.width, destinationCanvas.height);
       destinationContext.drawImage(image, 0, 0);
    }
    image.src = URL.createObjectURL(messageEvent.data);
 } else {
    document.getElementById("serverResponse").innerHTML = 
       'Server Reply:: ' + messageEvent.data;
    }
 };

 socket.onerror = function (errorEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Error was reported';
    };

 socket.onclose = function (closeEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Socket Closed';
    };
 }
  catch (exception) { if (window.console) console.log(exception); }
 }

 function sendTextMessage() {

    if (socket.readyState != WebSocket.OPEN) return;

    var e = document.getElementById("textmessage");
    socket.send(e.value);
 }

 function sendBinaryMessage() {
    if (socket.readyState != WebSocket.OPEN) return;

    var sourceCanvas = document.getElementById('source');

    socket.send(sourceCanvas.msToBlob());
 }    


Dieser Code setzt voraus, dass Sie serverStatus, destination, serverResponse, textmessage und serverData als Elemente mit IDs in Ihrer Webseite verwenden. Wenn die F12-Entwicklungstools ausgeführt werden, wird das Catch-Ergebnis im Konsolenfenster angezeigt. Um Textnachrichtendaten zu senden, verwenden Sie Code wie den folgenden.


var e = document.getElementById("msgText");
socket.send(e.value);

Im vorangehenden Codebeispiel wird davon ausgegangen, dass der Nachrichtentext, der gesendet werden soll, auf Ihrer Webseite in einem msgText-Element mit ID vorliegt. Ebenso können Sie mit dem onmessage-Ereignis neue Nachrichten erkennen oder Nachrichten mit der Methode zum Senden an den Server senden. Mit der send-Methode können Sie Text, binäre Arrays oder Blob-Daten senden.

Schreiben von WebSocket-Servercode

Servercode zur Verarbeitung von Sockets kann in einer beliebigen Sprache geschrieben werden. Unabhängig von der verwendeten Sprache muss der Code jedoch WebSocket-Anforderungen akzeptieren und ordnungsgemäß verarbeiten.

WebSocket-Programmierung

WebSocket stellt eine Reihe von Objekten, Methoden und Eigenschaften bereit, die Sie für die WebSocket-Programmierung verwenden können.

NameTypBeschreibung
WebSocket ObjektStellt einen bidirektionalen Kanal für den Remotehost bereit.
close MethodeSchließt ein Websocket.
send MethodeSendet Daten mit einem Websocket an einen Server.
binaryType EigenschaftBinärdatenformat, das von onmessage empfangen wird.
bufferedAmount EigenschaftAnzahl der Datenbytes, die mit "send" in die Warteschlange gestellt wurden.
extensions EigenschaftMeldet die Erweiterungen, die vom Server ausgewählt wurden.
onclose EigenschaftDer Ereignishandler, der beim Schließen des Sockets aufgerufen wird.
onerror EigenschaftDer Ereignishandler, der bei einem Fehler aufgerufen wird.
onmessage EigenschaftDer Ereignishandler, der benachrichtigt werden soll, dass eine neue Nachricht empfangen wurde.
onopen EigenschaftDer Ereignishandler, der aufgerufen wird, wenn das Websocket eine Verbindung hergestellt hat.
protocol EigenschaftMeldet das Protokoll, das vom Server ausgewählt wurde.
readyState EigenschaftMeldet den Status der Websocket-Verbindung.
url EigenschaftMeldet die aktuelle URL des Sockets.

 

API-Referenz

WebSocket API

IEBlog-Beiträge

WebSockets in Windows
Für Websites vorbereitete WebSockets

Spezifikation

Die WebSocket-API

Verwandte Themen

Erstellen von Echtzeit-Web-Apps mit HTML5-WebSockets
Erstellen von Echtzeit-Web-Apps mit WebSockets unter Verwendung von IIS, ASP.NET und WCF
Erstellen von Windows-Runtime-Sockets-Apps
Erste Schritte mit WebSockets in Windows 8
Einführung in System.Net.WebSockets: ein einfacher ASP.NET-Echo-Server
WebSockets: stabil und entwicklerfreundlich

 

 

Anzeigen:
© 2016 Microsoft