So wird’s gemacht: Herstellen einer Verbindung mit einem MessageWebSocket (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 MessageWebSocket ganze Datennachrichten in einer Windows-Runtime-App senden und empfangen.

Die MessageWebSocket-Klasse stellt eine nachrichtenbasierte Abstraktion des WebSocket-Protokolls bereit. Bei der Verwendung von MessageWebSocket wird die gesamte WebSocket-Nachricht in einem einzigen Vorgang gelesen oder geschrieben. Beim StreamWebSocket können die Abschnitte einer Nachricht dagegen in einzelnen Lesevorgängen gelesen werden, d. h. die Nachricht muss nicht komplett in einem Vorgang gelesen werden.

Ein MessageWebSocket wird normalerweise in Szenarien verwendet, in denen Nachrichten nicht besonders groß sind. Es werden sowohl UTF-8- als auch Binärdateien unterstützt. Für UTF-8-Nachrichten muss MessageWebSocket verwendet werden, da StreamWebSocket nur binäre Nachrichten unterstützt.

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.

Verwenden eines MessageWebSocket für das Senden von Daten

Der Code in diesem Abschnitt erstellt ein neues MessageWebSocket, stellt eine Verbindung zu einem WebSocket-Server her und sendet Daten an den Server. Nachdem erfolgreich eine Verbindung hergestellt wurde, wartet die App auf das Aufrufen des MessageWebSocket.MessageReceived-Ereignisses, das angibt, dass Daten empfangen wurden.

Hinweis Vielleicht möchten Sie, dass für den Benutzer oder im Protokoll Meldungen zu bestimmten Ereignissen (z. B. das Herstellen einer Verbindung oder das Auftreten eines Fehlers) angezeigt werden.

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

function startSend() {
   if (!messageWebSocket) {
      var webSocket = new Windows.Networking.Sockets.MessageWebSocket();
      // MessageWebSocket supports both utf8 and binary messages.
      // When utf8 is specified as the messageType, then the developer
      // promises to only send utf8-encoded data.
      webSocket.control.messageType = Windows.Networking.Sockets.SocketMessageType.utf8;
      // Set up callbacks
      webSocket.onmessagereceived = onMessageReceived;
      webSocket.onclosed = onClosed;

      var serverAddress = new Windows.Foundation.Uri(document.getElementById("serverAddress").value);

      try {
         webSocket.connectAsync(serverAddress).done(function () {
         messageWebSocket = webSocket;
         // The default DataWriter encoding is utf8.
         messageWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
         messageWriter.writeString(document.getElementById("inputField").value);
         messageWriter.storeAsync().done("", sendError);

      }, function (error) {
         // The connection failed; add your own code to log or display 
         // the error, or take a specific action.
         });
      } catch (error) {
         // An error occurred while trying to connect; add your own code to  
         // log or display the error, or take a specific action.
      }

   }
   else {
      // The connection already exists; go ahead and send the message.
      messageWriter.writeString(document.getElementById("inputField").value);
      messageWriter.storeAsync().done("", sendError);          
   }
}

Registrieren Sie Ihren Rückruf für das MessageWebSocket.MessageReceived-Ereignis

Wenn das MessageWebSocket.MessageReceived-Ereignis eintritt, wird der registrierte Rückruf aufgerufen, und es werden Daten von MessageWebSocketMessageReceivedEventArgs empfangen.

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

function onMessageReceived(args) {
   // The incoming message is already buffered.
   var dataReader = args.getDataReader();
   // Use the dataReader to read data from the received message
}

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

Wenn das MessageWebSocket.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 (messageWebSocket) {
      messageWebSocket.close();
   }
   messageWebSocket = 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 MessageWebSocket senden und empfangen können.

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

Freigeben über