So wird’s gemacht: Herstellen einer Verbindung mit einem Streamsocket (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 einer Windows-Runtime-App mithilfe eines StreamSocket das Senden und Empfangen von Netzwerkdaten mit einem TCP-Socket ermöglichen. Ein TCP-Socket ermöglicht Low-Level-Übertragungen von Netzwerkdaten in beide Richtungen für langlebige Verbindungen. TCP-Sockets sind das zugrunde liegende Feature, das von den meisten im Internet genutzten Netzwerkprotokollen verwendet wird.

Die Clientkomponente des Beispiels erstellt einen TCP-Socket zum Herstellen einer Netzwerkverbindung, verwendet den Socket, um Daten zu senden, und schließt den Socket. Die Serverkomponente des Beispiels erstellt einen TCP-Socket, um auf Netzwerkverbindungen zu lauschen und diese zu akzeptieren, akzeptiert Verbindungen vom eingehenden Socket, verwendet den Socket, um Daten vom Client zu empfangen, und schließt den Socket. Für dieses Beispiel werden die Programmiersprachen JavaScript, C#, VB und C++ verwendet.

Die Clientkomponente des Beispiels veranschaulicht die folgenden Features:

Verwenden der StreamSocket-Klasse, um einen TCP-Socket zu erstellen.
Herstellen einer Netzwerkverbindung mit einem TCP-Netzwerkserver mit einer der StreamSocket.ConnectAsync-Methoden.
Senden von Daten an den Server mit dem Streams.DataWriter-Objekt, das es Programmierern ermöglicht, allgemeine Typen (z. B. ganze Zahlen und Zeichenfolgen) in Streams zu schreiben.
Schließen des Sockets.

Die Serverkomponente des Beispiels veranschaulicht die folgenden Features:

Verwenden der StreamSocketListener-Klasse zum Erstellen eines TCP-Sockets, um auf eine eingehende TCP-Verbindung zu lauschen.
Binden des Sockets an einen lokalen Dienstnamen mit der StreamSocketListener.BindServiceNameAsync-Methode, um auf eine eingehende Netzwerkverbindung zu lauschen.
Empfangen eines StreamSocketListener.ConnectionReceived-Ereignisses, das angibt, dass eine Verbindung vom StreamSocketListener-Objekt empfangen wurde.
Empfangen von Daten vom Client mit dem Streams.DataReader-Objekt, das es Programmierern ermöglicht, allgemeine Typen (z. B. ganze Zahlen und Zeichenfolgen) aus einem Stream zu lesen.
Schließen des Sockets.

Hinweis Dieses Beispiel erfordert Netzwerkzugriff über die Loopbackschnittstelle.

Voraussetzungen

In den folgenden Beispielen wird JavaScript verwendet. Informationen zum Erstellen Ihrer ersten App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.

Damit die Windows Store-App im Netzwerk verwendet werden kann, müssen Sie die entsprechende Funktion in der Projektdatei Package.appxmanifest festlegen. Definitionen zu den einzelnen Netzwerkfunktionen finden Sie unter So wird's gemacht: Konfigurieren von Netzwerkisolationsfunktionen.

Anweisungen

Erstellen eines neuen Projekts

Öffnen Sie Microsoft Visual Studio 2013, und wählen Sie Neues Projekt im Menü Datei aus.
Wählen Sie aus der Liste der Vorlagen JavaScript aus.
Wählen Sie unterhalb des Abschnitts die Option Store apps aus.
Wählen Sie unterhalb des Abschnitts je nach Zielplattform die Option Universal Apps, Windows apps oder Windows Phone apps und anschließend die Option Leere Anwendung aus.
Geben Sie für die App den Namen socketsSample ein, und klicken Sie auf OK.

Einrichten der Funktionen zur Aktivierung des Netzwerkzugriffs

Wenn Ihre App Netzwerkzugriff benötigt, müssen Sie Netzwerkfunktionen für sie festlegen. Für eine App, die mit einem StreamSocket eine Verbindung mit einem Netzwerkdienst herstellt, müssten Netzwerkfunktionen festgelegt werden.

Wenn die App als Client eine Verbindung mit Remotediensten im Internet herstellen können muss, ist die Funktion Internet (Client) erforderlich. Wenn die App als Client eine Verbindung mit Remotediensten in einem Heim- oder Arbeitsplatznetzwerk herstellen können muss, ist die Funktion Private Netzwerke (Client und Server) erforderlich.

Wenn die App den StreamSocketListener verwenden muss, um auf eingehende Verbindungen von Remoteendpunkten im Internet zu lauschen, ist die Funktion Internet (Client und Server) erforderlich. Wenn die App den StreamSocketListener verwenden muss, um auf eingehende Verbindungen von Remoteendpunkten in einem Heim- oder Arbeitsplatznetzwerk zu lauschen, ist die Funktion Private Netzwerke (Client und Server) erforderlich.

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

Wenn die Serverkomponente des Beispiels, die auf eingehende Verbindungen lauscht, auf demselben Gerät ausgeführt wird wie die Clientkomponente, ist Loopbackzugriff erforderlich. In Visual Studio 2013 entwickelte und ausgeführte Apps werden automatisch so registriert, dass sie von den Loopbackbeschränkungen ausgenommen werden. Weitere Informationen finden Sie unter Aktivieren von Loopback und Debuggen der Netzwerkisolation.

Weitere Informationen zum Netzwerkzugriff finden Sie unter Konfigurieren von Netzwerkisolationsfunktionen.

Diese Schritte müssen durchgeführt werden, um vor der Bereitstellung Netzwerkfunktionen für eine App einzurichten, wenn sie auf einen Netzwerkdienst im Internet oder auf ein Heim- oder Arbeitsplatznetzwerk zugreift.

Öffnen Sie die Datei "package.appxmanifest" in Microsoft Visual Studio.
Wählen Sie die Registerkarte Funktionen aus.
Wählen Sie zum Erstellen der Windows-Version des Beispiels die Funktionen Internet (Client) und Private Netzwerke (Client und Server) aus.

Wählen Sie zum Erstellen der Windows Phone-Version des Beispiels die Funktion Internet (Client und Server) aus.
Speichern und schließen Sie die Manifestdatei.

Hinzufügen einer HTML-Benutzeroberfläche

Öffnen Sie den Ordner html. Öffnen Sie eine neue startListener.html-Datei, und fügen Sie folgenden HTML-Code in den Bereichen <head> und <body> hinzu.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/js/socketsSample.js"></script>
    <script src="/js/startListener.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <p>
            StreamSocketListener will create the "server" side of a connection. It listens on
            a "service name" (often a port number) and calls a callback when it accepts a connection;
            this happens when some other application tries to connect. Once a connection is
            accepted, the acceptAsync() method needs to be called again.
        </p>
        <p>
            <label for="serviceNameAccept">Service Name:</label>
            <input id="serviceNameAccept" type="text" />
        </p>
        <p>
            <button id="buttonStartListener">Create StreamSocketListener and start to listen</button>
        </p>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <p id="statusBox"></p>
        <p id="outputBox"></p>
    </div>
</body>
</html>

Öffnen Sie den Ordner html. Öffnen Sie eine neue connectToListener.html-Datei, und fügen Sie folgenden HTML-Code in den Bereichen <head> und <body> hinzu.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/js/connectToListener.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <p>
            Next, you need the "other side of the connection" -- you need to connect to a listener.
            The host name and service name (often a port number) to connect to are the "Host
            Name:" and "Service Name:" entries. The service name should match what you started
            to listen to!
        </p>
        <p>
            The connection will automatically use IPv6 as needed. It will also resolve international
            domain names.
        </p>
        <p>
            Due to the network security system, you cannot connect to other applications running
            on the same machine. This means that you can only use "localhost" to connect to
            the same application (specifically, you can connect to a listener on the same machine
            running in the same app container)
        </p>
        <p>
            <label for="hostNameConnect">Host Name:</label>
            <input id="hostNameConnect" type="text" />
        </p>
        <p>
            <label for="serviceNameConnect">Service Name:</label>
            <input id="serviceNameConnect" type="text" />
        </p>
        <p>
            <button id="buttonOpen">Connect Now</button>
        </p>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <p id="statusBox"></p>
        <p id="outputBox"></p>
    </div>
</body>
</html>

Öffnen Sie den Ordner html. Öffnen Sie eine neue sendData.html-Datei, und fügen Sie folgenden HTML-Code in den Abschnitten <head> und <body> hinzu.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/js/sendData.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <p>
            Now you can send data to the "server". Sending data is often done with the DataWriter
            object; it will write to the socket stream. You can also hook up the socket stream
            to other streams in Windows 8.
        </p>
        <p>
            <button id="buttonSend">Send 'hello' now</button>
        </p>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <p id="statusBox"></p>
        <p id="outputBox"></p>
    </div>
</body>
</html>

Öffnen Sie den Ordner html. Öffnen Sie eine neue closeSocket.html-Datei, und fügen Sie folgenden HTML-Code in den Bereichen <head> und <body> hinzu.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/js/closeSocket.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <p>Lastly, you can close all sockets.</p>
        <p>If you don't close your socket, it will be closed for you when the application exits.</p>
        <p>
            <button id="buttonClose">Close all sockets</button>
        </p>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <p id="statusBox"></p>
        <p id="outputBox"></p>
    </div>
</body>
</html>

Definieren des Beispiels und der Szenarien

Der Code in diesem Schritt definiert das Beispiel, die HTML-Dateien und die Szenarien, die im Beispiel verwendet werden. Außerdem fügt der Code Ereignislistener hinzu und startet die App. Die Szenariooptionen ermöglichen es dem Benutzer, den Socketlistener sowie den Client für die Verbindung mit dem Listener zu starten, Daten mit dem Client an den Server zu senden und die Sockets zu schließen.

Öffnen Sie den Ordner js. Öffnen Sie die Datei default.js, und fügen Sie ihr den folgenden Code hinzu.

    var sampleTitle = "StreamSocket";

    var scenarios = [
        { url: "/html/startListener.html", title: "Start StreamSocketListener" },
        { url: "/html/connectToListener.html", title: "Connect to Listener" },
        { url: "/html/sendData.html", title: "Send Data" },
        { url: "/html/closeSocket.html", title: "Close Socket" }
    ];

    function activated(eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Use setPromise to indicate to the system that the splash screen must not be torn down
            // until after processAll and navigate complete asynchronously.
            eventObject.setPromise(WinJS.UI.processAll().then(function () {
                // Navigate to either the first scenario or to the last running scenario
                // before suspension or termination.
                var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
                return WinJS.Navigation.navigate(url);
            }));
        }
    }

    WinJS.Navigation.addEventListener("navigated", function (eventObject) {
        var url = eventObject.detail.location;
        var host = document.getElementById("contentHost");
        // Call unload method on current scenario, if there is one
        host.winControl && host.winControl.unload && host.winControl.unload();
        WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
            WinJS.Application.sessionState.lastUrl = url;
        }));
    });

    WinJS.Namespace.define("SdkSample", {
        sampleTitle: sampleTitle,
        scenarios: scenarios
    });

    WinJS.Application.addEventListener("activated", activated, false);
    WinJS.Application.start();

Definieren von Variablen für Sockets und Ereignisfunktionen

Der Code in diesem Schritt erstellt einige Variablen, einschließlich Listenersocket, Clientsocket, Serverlesesocket sowie verschiedene Variablen für Fehler und Ereignisse. Variablen werden erstellt, um nachzuverfolgen, ob der Clientsocket sich im verbundenen oder geschlossenen Zustand befindet. In diesem Schritt wird auch der Hostname und Dienstname (TCP-Port) für die Verbindung auf dem Server definiert. Die Werte für Hostname und Dienstname werden auf einen Standardwert festgelegt, der auf der Benutzeroberfläche geändert werden kann.

Öffnen Sie den Ordner js. Öffnen Sie eine neue Datei socketsSample.js, und fügen Sie ihr folgenden Code hinzu.

var socketsSample = {};

(function () {
    "use strict";

    socketsSample.listener = null; // A StreamSocketListener that acts as our server.
    socketsSample.serverSocket = null; // The server socket that's been accepted.
    socketsSample.serverReader = null; // The reader for the server socket.
    socketsSample.clientSocket = null; // The client socket that will connect to the server socket.
    socketsSample.connected = false;
    socketsSample.closing = false;

    socketsSample.serviceNameAccept = "22112";
    socketsSample.hostNameConnect = "localhost";
    socketsSample.serviceNameConnect = "22112";

    socketsSample.displayStatus = function (message) {
        document.getElementById("statusBox").innerHTML = message;
    };

    socketsSample.displayOutput = function (message) {
        document.getElementById("outputBox").innerHTML = message;
    };

    socketsSample.setValues = function () {
        var serviceNameAcceptInput = document.getElementById("serviceNameAccept");
        var hostNameConnectInput = document.getElementById("hostNameConnect");
        var serviceNameConnectInput = document.getElementById("serviceNameConnect");

        if (serviceNameAcceptInput) {
            serviceNameAcceptInput.value = socketsSample.serviceNameAccept;
        }
        if (hostNameConnectInput) {
            hostNameConnectInput.value = socketsSample.hostNameConnect;
        }
        if (serviceNameConnectInput) {
            serviceNameConnectInput.value = socketsSample.serviceNameConnect;
        }
    };

    socketsSample.getValues = function (evt) {
        switch (evt.target.id) {
            case "serviceNameAccept":
                socketsSample.serviceNameAccept = evt.target.value;
                break;
            case "hostNameConnect":
                socketsSample.hostNameConnect = evt.target.value;
                break;
            case "serviceNameConnect":
                socketsSample.serviceNameConnect = evt.target.value;
                break;
        }
    };
})();

Erstellen eines Listeners und Überwachen eines Dienstnamens (Port)

Der Code in diesem Abschnitt erstellt einen Listener und beginnt mit der Überwachung. Es werden auch Funktionen zum Behandeln von Ereignissen hinzugefügt, wenn der Benutzer anfordert, dass der Listener an eine IP-Adresse und einen TCP-Port gebunden wird, eine Verbindung akzeptiert und vom Client gesendete Daten liest.

Hinweis Dieses spezifische Beispiel ist in sich geschlossen (Client und Server befinden sich in derselben App). Normalerweise gibt es jedoch separate Client- und Server-Apps.

Öffnen Sie den Ordner js. Öffnen Sie eine neue Datei startListener.js, und fügen Sie ihr folgenden Code hinzu.

    var page = WinJS.UI.Pages.define("/html/startListener.html", {
        ready: function (element, options) {
            document.getElementById("buttonStartListener").addEventListener("click", startListener, false);
            document.getElementById("serviceNameAccept").addEventListener("change", socketsSample.getValues, false);
            socketsSample.setValues();
        }
    });

    function startListener() {
        if (socketsSample.listener) {
            socketsSample.displayStatus("Already have a listener; call close to close the listener.");
            return;
        }
        socketsSample.closing = false;
        var serviceName = document.getElementById("serviceNameAccept").value;
        socketsSample.listener = new Windows.Networking.Sockets.StreamSocketListener(serviceName);
        socketsSample.listener.addEventListener("connectionreceived", onServerAccept);
        socketsSample.displayStatus("Server: listener creation started.");
        socketsSample.listener.bindServiceNameAsync(serviceName).done(function () {
            socketsSample.displayStatus("Server: listener creation completed.");
        }, onError);
    }

    // This has to be a real function ; it will "loop" back on itself with the
    // call to acceptAsync at the very end.
    function onServerAccept(eventArgument) {
        socketsSample.displayStatus("Server: connection accepted.");
        socketsSample.serverSocket = eventArgument.socket;
        socketsSample.serverReader = new Windows.Storage.Streams.DataReader(socketsSample.serverSocket.inputStream);
        startServerRead();
    }

    // The protocol here is simple: a four-byte 'network byte order' (big-endian) integer
    // that says how long a string is, and then a string that is that long.
    // We wait for exactly 4 bytes, read in the count value, and then wait for
    // count bytes, and then display them.
    function startServerRead() {
        socketsSample.serverReader.loadAsync(4).done(function (sizeBytesRead) {
            // Make sure 4 bytes were read.
            if (sizeBytesRead !== 4) {
                socketsSample.displayStatus("Server: connection lost.");
                return;
            }

            // Read in the 4 bytes count and then read in that many bytes.
            var count = socketsSample.serverReader.readInt32();
            return socketsSample.serverReader.loadAsync(count).then(function (stringBytesRead) {
                // Make sure the whole string was read.
                if (stringBytesRead !== count) {
                    socketsSample.displayStatus("Server: connection lost.");
                    return;
                }
                // Read in the string.
                var string = socketsSample.serverReader.readString(count);
                socketsSample.displayOutput("Server read: " + string);
                // Restart the read for more bytes.
                startServerRead();
            }); // End of "read in rest of string" function.
        }, onError);
    }

    function onError(reason) {
        // When we close a socket, outstanding async operations will be canceled and the
        // error callbacks called.  There's no point in displaying those errors.
        if (!socketsSample.closing) {
            socketsSample.displayStatus(reason);
        }
    }

Erstellen des Sockets und Herstellen einer Verbindung zu einem Remote-Endpunkt

Der Code in diesem Schritt fügt eine Funktion zum Erstellen eines Sockets hinzu und stellt unter Verwendung der StreamSocket.ConnectAsync-Methode eine Verbindung mit dem Remoteendpunkt, normalerweise einem Server, her. Außerdem wird eine Funktion zum Behandeln von Verbindungsfehlern des Clients hinzugefügt.

Öffnen Sie den Ordner js. Öffnen Sie eine neue Datei connectToListener.js, und fügen Sie ihr folgenden Code hinzu.

    var page = WinJS.UI.Pages.define("/html/connectToListener.html", {
        ready: function (element, options) {
            document.getElementById("buttonOpen").addEventListener("click", openClient, false);
            document.getElementById("hostNameConnect").addEventListener("change", socketsSample.getValues, false);
            document.getElementById("serviceNameConnect").addEventListener("change", socketsSample.getValues, false);
            socketsSample.setValues();
        }
    });

    function openClient() {
        if (socketsSample.clientSocket) {
            socketsSample.displayStatus("Already have a client; call close to close the listener and the client.");
            return;
        }
        socketsSample.closing = false;
        var serverHostName = new Windows.Networking.HostName(document.getElementById("hostNameConnect").value);
        var serviceName = document.getElementById("serviceNameConnect").value;
        socketsSample.clientSocket = new Windows.Networking.Sockets.StreamSocket();
        socketsSample.displayStatus("Client: connection started.");
        socketsSample.clientSocket.connectAsync(serverHostName, serviceName).done(function () {
            socketsSample.displayStatus("Client: connection completed.");
            socketsSample.connected = true;
        }, onError);
    }

    function onError(reason) {
        socketsSample.clientSocket = null;

        // When we close a socket, outstanding async operations will be canceled and the
        // error callbacks called.  There's no point in displaying those errors.
        if (!socketsSample.closing) {
            socketsSample.displayStatus(reason);
        }
    }

Senden und Empfangen von Daten auf dem Client

Der Code in diesem Schritt fügt eine Funktion zum Senden von Daten an den Server mithilfe der Methoden der Windows.Storage.Stream.DataWriter-Klasse hinzu.

Öffnen Sie den Ordner js. Öffnen Sie eine neue Datei sendData.js, und fügen Sie ihr den folgenden Code hinzu.

    var page = WinJS.UI.Pages.define("/html/sendData.html", {
        ready: function (element, options) {
            document.getElementById("buttonSend").addEventListener("click", sendHello, false);
        }
    });

    function sendHello() {
        if (!socketsSample.connected) {
            socketsSample.displayStatus("Client: you must connect the client before using it.");
            return;
        }
        var writer = new Windows.Storage.Streams.DataWriter(socketsSample.clientSocket.outputStream);
        var string = "Hello World";
        var len = writer.measureString(string); // Gets the UTF-8 string length.
        writer.writeInt32(len);
        writer.writeString(string);
        socketsSample.displayStatus("Client sending: " + string + ".");
        writer.storeAsync().done(function () {
            socketsSample.displayStatus("Client sent: " + string + ".");
            writer.detachStream();
        }, onError);
    }

    function onError(reason) {
        // When we close a socket, outstanding async operations will be canceled and the
        // error callbacks called.  There's no point in displaying those errors.
        if (!socketsSample.closing) {
            socketsSample.displayStatus(reason);
        }
    }

Schließen der Sockets

Der Code in diesem Schritt schließt die Sockets mit der StreamSocket.Close-Methode. Beim Schließen von Sockets werden alle ausstehenden Vorgänge beendet und Fehlerroutinen aufgerufen.

Öffnen Sie den Ordner js. Öffnen Sie eine neue Datei socketClose.js, und fügen Sie ihr folgenden Code hinzu.

    var page = WinJS.UI.Pages.define("/html/closeSocket.html", {
        ready: function (element, options) {
            document.getElementById("buttonClose").addEventListener("click", closeListenerAndSockets, false);
        }
    });

    function closeListenerAndSockets() {
        socketsSample.closing = true;
        if (socketsSample.listener) {
            socketsSample.listener.close();
            socketsSample.listener = null;
        }
        if (socketsSample.serverSocket) {
            socketsSample.serverSocket.close();
            socketsSample.serverSocket = null;
        }
        if (socketsSample.clientSocket) {
            socketsSample.clientSocket.close();
            socketsSample.clientSocket = null;
            socketsSample.connected = false;
        }
        socketsSample.displayStatus("Client and server closed.");
    }

Ausführen der App

Zum Ausführen der App drücken Sie in Visual Studio die F5-Taste, um das Projekt auszuführen. Wählen Sie die Schaltflächen aus, um den Listener zu starten, die Verbindung des Clients mit dem Listener herzustellen, Daten zu senden und Sockets zu schließen.

Zusammenfassung und nächste Schritte

In diesem Thema haben Sie eine App erstellt, die einen TCP-Streamsocket verwendet, um eine Netzwerkverbindung herzustellen und Daten mit einem StreamSocket-Objekt zu senden. Die App hat weiterhin verdeutlicht, wie TCP-Verbindungen überwacht und eine Verbindung eines Datenstromsockets akzeptiert wird, mit der Daten gesendet und empfangen werden können.

Der Quellcode und die Builddateien für dieses Thema sind als StreamSocket-Beispiel verfügbar.

Sie können auch einen Datagrammsocket verwenden, um Netzwerkverbindungen zum Senden von Daten herzustellen. Ein Beispiel dazu finden Sie unter So wird's gemacht: Herstellen einer Verbindung mit einem Datagrammsocket.

Freigeben über