So wird’s gemacht: Herstellen einer Verbindung mit einem StreamWebSocket (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Thema wird gezeigt, wie Sie mit StreamWebSocket Datenströme in einer Windows-Runtime-App senden und empfangen.

Die StreamWebSocket-Klasse stellt eine streambasierte Abstraktion des nachrichtenbasierten WebSocket-Protokolls bereit. Dies eignet sich für Szenarien, in denen große Dateien (z. B. Fotos oder Filme) zwischen einem Client und einem Server übertragen werden müssen. Der Server muss das WebSocket-Protokoll unterstützen. Bei der Verwendung von StreamWebSocket können die Abschnitte einer Nachricht in einzelnen Lesevorgängen gelesen werden, d. h. die Nachricht muss nicht komplett in einem Vorgang gelesen werden (wie bei MessageWebSocket).

Die StreamWebSocket-Klasse unterstützt nur binäre Nachrichten. Für UTF-8-Nachrichten muss MessageWebSocket verwendet werden.

Voraussetzungen

In den folgenden Beispielen wird JavaScript verwendet. Die Beispiele basieren auf dem WebSocket-Beispiel. Allgemeine Informationen zum Erstellen einer Windows-Runtime-App mit JavaScript finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript. Darüber hinaus werden in diesem Thema JavaScript-Zusagen zum Ausführen asynchroner Vorgänge verwendet. Weitere Informationen zu diesem Programmierungsmuster finden Sie unter Asynchrone Programmierung in JavaScript mit Zusagen.

Damit die Windows-Runtime-App im Netzwerk verwendet werden kann, müssen Sie alle erforderlichen Netzwerkfunktionen in der Projektdatei Package.appxmanifest festlegen. Wenn Ihre App als Client eine Verbindung mit Remotediensten im Internet herstellen muss, ist die Funktion Internet (Client) erforderlich. Wenn die App als Client eine Verbindung mit Remotediensten in einem Heim- oder Arbeitsplatznetzwerk herstellen muss, ist die Funktion Heim- oder Arbeitsplatznetzwerke erforderlich.

Hinweis Unter Windows Phone gibt es nur eine Netzwerkfunktion – Internet (Client und Server) –, die den Netzwerkzugriff komplett für die App aktiviert.

Weitere Informationen finden Sie unter So wird's gemacht: Festlegen von Netzwerkfunktionen.

Anweisungen

1. Erstellen Sie ein StreamWebSocket-Objekt für das Senden und Empfangen von Daten.

Der Code in diesem Abschnitt erstellt ein neues StreamWebSocket, stellt eine Verbindung zu einem WebSocket-Server her, sendet Daten an den Server und wartet auf eine Antwort.

Als Erstes überprüfen wir, ob der zu verwendende Server-URI gültig ist. Anschließend stellen wir anhand des URIs eine Verbindung mit dem WebSocket-Server her und warten auf den Eingang der Antwort vom Server.

Zuerst wird die URI-Eingangsadresse überprüft, um sicherzustellen, dass der Benutzer eine gültige URI-Adresse übergeben hat. Dieser Schritt ist nicht erforderlich, wenn die App den URI für den WebSocket-Server schon kennt.

Eine Ausnahme wird ausgelöst, wenn eine ungültige Zeichenfolge für den Uniform Resource Identifier (URI) an den Konstruktor für das Windows.Foundation.Uri-Objekt übergeben wird.

In JavaScript gibt es keine Methode zum Analysieren einer Zeichenfolge für einen URI. Verwenden Sie zum Abfangen dieser Ausnahme in diesem Fall einen try/catch-Block für den Code, mit dem der URI erstellt wird.

Im Beispiel wird auch überprüft, ob das HTTP-Schema im URI WS oder WSS lautet, da dies die einzigen von StreamWebSocket unterstützten Schemas sind.

Wenn der vom Benutzer eingegebene URI gültig ist, stellt die App eine Verbindung mit dem WebSocket-Server her und kann Daten senden und empfangen.

Ausnahmen aufgrund von Netzwerkfehlern (z. B. Unterbrechung der Netzwerkverbindung, Verbindungsfehler und HTTP-Serverfehler) können jederzeit auftreten. Diese Fehler haben zur Folge, dass Ausnahmen ausgelöst werden. Wenn sie nicht von Ihrer App behandelt wird, kann eine Ausnahme dazu führen, dass die gesamte App von der Runtime beendet wird. Beim Aufrufen der meisten asynchronen Netzwerkmethoden müssen Sie Code zum Behandeln von Ausnahmen schreiben. In manchen Fällen kann eine Netzwerkmethode beim Auftreten einer Ausnahme wiederholt werden, um das Problem zu beheben. In anderen Fällen muss die App ohne Netzwerkverbindung mit zuvor zwischengespeicherten Daten weiter ausgeführt werden. Weitere Informationen zum Behandeln von Netzwerkausnahmen finden Sie unter Behandeln von Ausnahmen in Netzwerk-Apps.

Hinweis Vielleicht möchten Sie, dass Meldungen zu bestimmten Ereignissen (z. B. das Herstellen einer Verbindung oder das Auftreten eines Fehlers) für den Benutzer angezeigt oder im Protokoll erfasst werden. Das Beispiel ruft eine displayStatus-Funktion auf, die Sie in diesem Fall implementieren müssten.

Hinweis Die writeOutgoing()-Funktion und die readIncoming()-Funktion zum Durchführen von Schreib- und Lesevorgängen werden in den folgenden Schritten definiert.

Öffnen Sie den Ordner js. Öffnen Sie die zu verwendende JS-Datei, und fügen Sie folgenden Code ein.


// Define some variables we will use
var streamWebSocket;
var dataWriter;
var dataReader;
// The data to send
var data = "Hello World";
var countOfDataSent;
var countOfDataReceived;

function start() {
   if (streamWebSocket) {
      // The WebSocket is already running. Go ahead and immediately return,  
      // or display a message that indicates that it is running.
      return;
   }

   var webSocket = new Windows.Networking.Sockets.StreamWebSocket();
   webSocket.onclosed = onClosed;

   // WebSocket server to test connections
   // If the scheme is wss:, then the server will
   // echo back what it receives
   var uriString = "wss://echo.websocket.org";

   // We might get the uriString from the user so
   // we need to check that we have a valid URI
   var serverUri;
   try {
      serverUri = new Windows.Foundation.Uri(uriString);
      }
   catch (Exception) {
      displayStatus("Invalid URI, please re-enter a valid URI.");
      return;
   }

   if (serverUri.schemeName != "ws" && serverUri.schemeName != "wss") {
      displayStatus("Only 'ws' and 'wss' schemes supported. Please re-enter URI");
      return;
   }

   // Asynchronous networking methods can throw execptions
   webSocket.connectAsync(uri).done(function () {
      diaplayStatus("Connected");

      streamWebSocket = webSocket;
      dataWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
      dataReader = new Windows.Storage.Streams.DataReader(webSocket.inputStream);
      // When buffering, return as soon as any data is available.
      dataReader.inputStreamOptions = Windows.Storage.Streams.InputStreamOptions.partial;
      countOfDataSent = 0;
      countOfDataReceived = 0;

      // Continuously send data to the server
      writeOutgoing();

      // Continuously listen for a response
      readIncoming();

   }, function (error) {
      var errorStatus = Windows.Networking.Sockets.WebSocketError.getStatus(error.number);
      if (errorStatus === Windows.Web.WebErrorStatus.cannotConnect ||
         errorStatus === Windows.Web.WebErrorStatus.notFound ||
         errorStatus === Windows.Web.WebErrorStatus.requestTimeout) {
         displayStatus("Cannot connect to the server");
      } else {
         displayStatus("Failed to connect: " + getError(error));
      }
   });
}

2. Senden ausgehender Daten

Mit dem Code in diesem Abschnitt kann Ihr WebSocket-Objekt Daten an einen Server senden.

Hinweis Die writeError()-Funktion wird in einem nachfolgenden Schritt definiert.

Fügen Sie folgenden Code in Ihrer JS-Datei hinzu, um die Funktion writeOutgoing() zu definieren.

function writeOutgoing() {
   try {
      var size = dataWriter.measureString(data);
      countOfDataSent += size;

      dataWriter.writeString(data);
      dataWriter.storeAsync().done(function () {
         // Add a 1 second delay so the user can see what's going on.
         setTimeout(writeOutgoing, 1000);
      }, writeError);
   }
   catch (error) {
      displayStatus("Sync write error: " + getError(error));
   }
}

3. Lesen eingehender Daten

Mit dem Code in diesem Abschnitt kann Ihr WebSocket-Objekt Daten von einem Server lesen.

Hinweis Die readError()-Funktion wird in einem nachfolgenden Schritt definiert.

Fügen Sie folgenden Code in Ihrer JS-Datei hinzu, um die readIncoming()-Funktion zu definieren.


function readIncoming(args) {
   // Buffer as much data as you require for your protocol.
   dataReader.loadAsync(100).done(function (sizeBytesRead) {
      countOfDataReceived += sizeBytesRead;

      var incomingBytes = new Array(sizeBytesRead);
      dataReader.readBytes(incomingBytes);

      // Do something with the data.
      // Alternatively you can use DataReader to read out individual booleans,
      // ints, strings, etc.

      // Start another read.
      readIncoming();
   }, readError);
}

4. Fügen Sie Code zur Fehlerbehandlung hinzu.

Beim Aufrufen der meisten asynchronen Netzwerkmethoden müssen Sie Code zum Behandeln von Ausnahmen schreiben. Ihr Ausnahmehandler kann detailliertere Informationen zur Ursache abrufen, um die Ausnahme besser verstehen und entsprechende Entscheidungen treffen zu können. Weitere Informationen finden Sie unter So wird's gemacht: Behandeln von Ausnahmen in Netzwerk-Apps.

Fügen Sie Ihrer JS-Datei Code hinzu, um die writeError()- und readError()-Funktionen zum Protokollieren von Schreib- und Lesefehlern (oder für andere Aktionen) zu definieren. Die jeweils verwendete Implementierung kann variieren.
```
function writeError(error) {
   // Add your code to handle write errors.
}

function readError(error) {
   // Add your code to handle read errors.
}
```

5. Registrieren des Rückrufs für das StreamWebSocket.Closed-Ereignis

Wenn das StreamWebSocket.Closed-Ereignis eintritt, wird der registrierte Rückruf aufgerufen, und es werden Daten von WebSocketClosedEventArgs empfangen, um die Verbindung zu schließen.

Fügen Sie folgenden Code in Ihrer JS-Datei hinzu.

function onClosed(args) {
   // You can add code to log or display the code and reason
   // for the closure (stored in args.code and args.reason)
   if (streamWebSocket) {
      streamWebSocket.close();
   }
   streamWebSocket = null;
}

Zusammenfassung und nächste Schritte

In diesem Lernprogramm haben wir erläutert, wie Sie eine Verbindung zu einem WebSocket-Server herstellen und Daten mit einem StreamWebSocket senden und empfangen können.

Ein vollständiges Beispiel zum Senden und Empfangen von Daten mit WebSockets finden Sie unter WebSocket-Beispiel.