Schnellstart: Verbinden von Apps durch Koppeln oder Navigation (HTML)
[ 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]
Wenn Sie die Näherung verwenden, können Sie durch eine einfache Tippbewegung oder durch Suchen nach Geräten in Drahtlosreichweite eine Verbindung zwischen zwei Geräten herstellen. Sie müssen nicht mit einem Netzwerk verbunden sein. Sie können einfach zwei Geräte koppeln oder mit Wi-Fi Direct eine Verbindung herstellen.
Auf den meisten Geräten ist NFC (Near Field Communication) erforderlich, um per Tippbewegung eine Verbindung zwischen zwei Instanzen der App herzustellen. Auf einem PC kann dieser Verbindungskanal über Bluetooth, Wi-Fi Direct oder ein Infrastrukturnetzwerk hergestellt werden. Unter Windows Phone kann die Verbindung über Bluetooth oder ein Infrastrukturnetzwerk hergestellt werden. Wi-Fi Direct wird unter Windows Phone nicht unterstützt. Dies bedeutet, dass die Verbindung mittels Koppeln zwischen einem Windows Phone und einem PC funktioniert, diese Kommunikation aber auf die Verwendung von Bluetooth oder eines Infrastrukturnetzwerks beschränkt ist.
Wenn zwei Geräte mit Näherung einander bis auf 3–4 Zentimeter nähern, werden beide Systeme bei einer Tippbewegung von der Näherung benachrichtigt. Sie können die Kopplung auch verwenden, um einen langfristigen Kommunikationskanal per Infrastrukturnetzwerk, Wi-Fi Direct oder Bluetooth einzurichten. Die Kopplung per Tippbewegungen ist nur verfügbar, wenn auf dem Gerät Hardware für NFC (Near-Field Communication, Nahfeldkommunikation) installiert ist. Die Suche per Wi-Fi Direct ist nur verfügbar, wenn der Drahtlosadapter Wi-Fi Direct unterstützt.
Sie können auch Näherung verwenden, um einen langfristigen Kommunikationskanal mit einer Peer-App innerhalb des Funkbereichs einzurichten.
In diesem Thema wird erläutert, wie Sie mithilfe der Näherung eine Verbindung zwischen Peer-Apps (z. B. Spielen), zwischen Inhalt teilenden Apps usw. herstellen.
Anhand des Beispiels in diesem Thema wird die Verwendung der Näherung und der PeerFinder-Klasse zum Herstellen einer langfristigen Socketverbindung mit einer Peer-App auf einem anderen Gerät dargestellt.
Wenn die Peer-App bei durch Koppeln hergestellten Verbindungen auf dem Zielgerät nicht im Vordergrund ausgeführt wird, fordert die Näherung den Benutzer auf, die App auf dem Zielgerät zu aktivieren. Ist die Peer-App nicht auf dem Zielgerät installiert, wird der Benutzer des Zielgeräts gefragt, ob die App aus dem Windows Store installiert werden soll. Ausführliche Informationen zum Aktivieren von Apps mittels Tippbewegung finden Sie unter „Aktivieren von Apps mithilfe von Näherung“ in Unterstützen von Näherung und Kopplung.
Ziel: Erstellen Sie durch Koppeln mittels Näherung oder drahtloses Browsen eine Verbindung zwischen zwei Geräten.
Voraussetzungen
Microsoft Visual Studio Express 2012 für Windows 8
Anweisungen
1. Erstellen eines neuen Projekts und Aktivieren von Näherung
- Öffnen Sie Visual Studio Express 2012 für Windows 8, und klicken Sie im Menü Datei auf Neues Projekt. Wählen Sie im Abschnitt JavaScript die Option Leere Anwendung aus. Geben Sie für die App den Namen ProximityConnect ein, und klicken Sie auf OK.
- Öffnen Sie die Datei Package.appxmanifest, und klicken Sie auf die Registerkarte Funktionen. Wählen Sie die Funktion Näherung aus, um die Näherung zu aktivieren. Schließen und speichern Sie die Manifestdatei.
2. Hinzufügen einer HTML-Benutzeroberfläche
Öffnen Sie die Datei "Default.html", und fügen Sie dem <body>-Abschnitt den folgenden HTML-Code hinzu.
<div style="position:absolute;margin:0">
Display Name: <input type="text" id="displayNameTextBox" style="width:300px" />
<button id="advertiseForPeersButton">Advertise for a Connection</button>
<button id="acceptButton">Accept Connection</button>
<button id="findPeersButton">Browse for Peers</button>
<button id="stopFindingPeersButton">Stop Browsing for Peers</button><br />
<input id="sendMessageText" type="text" style="width:200px" />
<button id="sendMessageButton">Send Message</button><br />
<div id="messageDiv" style="position:relative;width:600px"></div>
</div>
3. Hinzufügen von Initialisierungscode
Der Code in diesem Schritt ordnet Funktionen den Klickereignissen der HTML-Schaltflächen zu. Diese Funktionen werden in einem späteren Schritt als Ereignishandler hinzugefügt. Für den schnellen Zugriff auf die Funktion getElementById ist eine Verknüpfungsfunktion – id – enthalten.
Öffnen Sie den Ordner js. Öffnen Sie die Datei "Default.js", und ersetzen Sie die Standardfunktion activated durch den folgenden Code.
app.onactivated = function (args) {
if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
id("advertiseForPeersButton").addEventListener("click", advertiseForPeers);
id("acceptButton").addEventListener("click", acceptConnection);
id("findPeersButton").addEventListener("click", findPeers);
id("stopFindingPeersButton").addEventListener("click", stopFindingPeers);
displayNameTextBox.value = Windows.Networking.Proximity.PeerFinder.displayName;
Windows.Networking.Proximity.PeerFinder.addEventListener("connectionrequested", connectionRequested);
// Detect if app launched from a tap.
if ((args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) &&
(args.detail.arguments === "Windows.Networking.Proximity.PeerFinder:StreamSocket")) {
advertiseForPeers(true);
}
args.setPromise(WinJS.UI.processAll());
}
};
function id(elementId) {
return document.getElementById(elementId);
}
4. Hinzufügen des Codes zum Verbinden mit einer Peer-App
In diesem Schritt fügen Sie den Code für die Klickereignisse der Schaltflächen hinzu. Sie fügen auch eine Methode zum Schreiben in den UI-Thread hinzu. Der Code im Ereignishandler für die advertiseForPeersButton-Schaltfläche legt den Peernamen für das lokale Gerät fest und startet PeerFinder. Wenn ausgelöste Verbindungen unterstützt werden (Koppeln), identifiziert der Code den Ereignishandler für das triggeredConnectionStateChanged-Ereignis. Im triggeredConnectionStateChanged-Ereignishandler öffnet der Code ein Streamsocket zum Senden von Textnachrichten zwischen den Peer-Apps.
Der Code im Ereignishandler für die findPeersButton-Schaltfläche ruft die findAllPeersAsync-Methode auf, um nach Geräten innerhalb der Drahtlosreichweite zu suchen. Wenn ein oder mehrere Peers gefunden werden, wird vom Beispiel die connectAsync-Methode aufgerufen, um eine Verbindung mit dem ersten gefundenen Peer herzustellen. Wird ausschließlich für Beispielszwecke angegeben. Präsentieren Sie dem Benutzer nun eine Liste möglicher Peers, unter denen er eine Auswahl treffen kann, und stellen Sie anschließend eine Verbindung mit dem ausgewählten Peer her.
Der Code enthält einen Ereignishandler für das connectionRequested-Ereignis, das auftritt, wenn ein Peer durch Aufrufen der connectAsync-Methode eine Verbindung mit Ihnen herstellt. Sie können auf die Schaltfläche Accept Connection klicken, um die Verbindung zu akzeptieren.
Der Code im Ereignishandler für die stopFindingPeersButton-Schaltfläche ruft die stop-Methode auf. Die Methode beendet die Ankündigung oder Suche des Ereignishandlers nach Peers, unabhängig davon, ob dies über eine Funkverbindung oder Tippbewegung erfolgte.
Fügen Sie in der Datei "Default.js" den folgenden Code hinter der id-Funktion hinzu.
var started = false;
// Click event for "Advertise" button.
function advertiseForPeers(launchedFromTap) {
Windows.Networking.Proximity.PeerFinder.displayName = displayNameTextBox.Text;
if (Windows.Networking.Proximity.PeerFinder.supportedDiscoveryTypes &
Windows.Networking.Proximity.PeerDiscoveryTypes.triggered) {
Windows.Networking.Proximity.PeerFinder.addEventListener(
"triggeredconnectionstatechanged", triggeredConnectionStateChanged);
id("messageDiv").innerHTML +=
"You can tap to connect a peer device that is " +
"also advertising for a connection.<br />";
} else {
id("messageDiv").innerHTML +=
"Tap to connect is not supported.<br />";
}
if (!launchedFromTap) {
if (!(Windows.Networking.Proximity.PeerFinder.SupportedDiscoveryTypes &
Windows.Networking.Proximity.PeerDiscoveryTypes.Browse)) {
id("messageDiv").innerHTML +=
"Peer discovery using Wi-Fi Direct is not supported.<br />";
}
}
if (!started) {
Windows.Networking.Proximity.PeerFinder.start();
started = true;
}
}
function triggeredConnectionStateChanged(e) {
if (e.state === Windows.Networking.Proximity.TriggeredConnectState.peerFound) {
id("messageDiv").innerHTML +=
"Peer found. You may now pull your devices out of proximity.<br />";
}
if (e.state === Windows.Networking.Proximity.TriggeredConnectState.completed) {
id("messageDiv").innerHTML += "Connected. You may now send a message.<br />";
sendMessage(e.socket);
}
}
// Click event for "Browse" button.
function findPeers() {
if (Windows.Networking.Proximity.PeerFinder.supportedDiscoveryTypes &
Windows.Networking.Proximity.PeerDiscoveryTypes.browse) {
Windows.Networking.Proximity.PeerFinder.findAllPeersAsync().done(
function (peerInfoCollection) {
if (peerInfoCollection.length > 0) {
// Connect to first peer found - example only.
// In your app, provide the user with a list of available peers.
connectToPeer(peerInfoCollection[0]);
}
},
function (err) {
id("messageDiv").innerHTML += "Error finding peers: " + err + "<br />";
});
} else {
id("messageDiv").innerHTML +=
"Peer discovery using Wi-Fi Direct is not supported.<br />";
}
}
function connectToPeer(peerInfo) {
id("messageDiv").innerHTML += ("Peer found. Connecting to " + peerInfo.displayName + "<br />");
Windows.Networking.Proximity.PeerFinder.connectAsync(peerInfo).done(
function (socket) {
id("messageDiv").innerHTML += "Connection successful. You may now send messages.<br />";
sendMessage(socket);
},
function (err) {
id("messageDiv").innerHTML += "Connection failed: " + err + "<br />";
});
requestingPeer = null;
}
function stopFindingPeers() {
Windows.Networking.Proximity.PeerFinder.stop();
started = false;
if (proximitySocket != null) { closeSocket(); }
}
// Handle external connection requests.
var requestingPeer;
function connectionRequested(e) {
id("messageDiv").innerHTML +=
"Connection requested by " + e.peerInformation.DisplayName + ". " +
"Click 'Accept Connection' to connect.";
requestingPeer = e.PeerInformation;
}
function acceptConnection() {
if (requestingPeer == null) {
id("messageDiv").innerHTML += "No peer connection has been requested.";
return;
}
connectToPeer(requestingPeer);
}
5. Hinzufügen des Codes zum Senden und Empfangen von Nachrichten mit dem ProximityStreamSocket
Wenn eine Verbindung hergestellt wurde, übergibt der Code das von der Verbindung hergestellte ProximityStreamSocket-Objekt an die sendMessage-Funktion. Die sendMessage-Funktion stellt eine Netzwerkverbindung mit dem Näherungsgerät her. Dadurch können Sie Nachrichten hin- und hersenden. Stellen Sie sicher, dass Sie immer die close-Methode des ProximityStreamSocket-Objekts aufrufen, wenn Sie damit fertig sind.
Fügen Sie in der Datei "Default.js" den folgenden Code hinter der connectToPeer-Funktion hinzu.
var proximitySocket;
var dataWriter;
// Reference socket streams for writing and reading messages.
function sendMessage(socket) {
id("sendMessageButton").addEventListener("click", sendMessageText);
// Get the network socket from the proximity connection.
proximitySocket = socket;
// Create DataWriter for writing messages to peers.
dataWriter = new Windows.Storage.Streams.DataWriter(proximitySocket.outputStream);
// Listen for messages from peers.
var dataReader = new Windows.Storage.Streams.DataReader(proximitySocket.inputStream);
startReader(proximitySocket, dataReader);
}
// Send a message to the socket.
function sendMessageText() {
var msg = id("sendMessageText").value;
if (msg.length > 0) {
var msgLength = dataWriter.measureString(msg);
dataWriter.writeInt32(msgLength);
dataWriter.writeString(msg);
dataWriter.storeAsync().done(
function (byteCount) {
if (byteCount > 0) {
id("messageDiv").innerHTML += "Message sent: " + msg + "<br />";
} else {
id("messageDiv").innerHTML += "The remote peer closed the socket.";
closeSocket();
}
},
function (err) {
id("messageDiv").innerHTML += "Send error: " + err.message + "<br />";
closeSocket();
});
}
}
// Read out and print the message received from the socket.
function startReader(socket, reader) {
var initialLength = 4;
reader.loadAsync(initialLength).done(
function (byteCount) {
if (byteCount > 0) {
var msgLength = reader.readInt32();
reader.loadAsync(msgLength).done(
function (byteCount) {
if (byteCount > 0) {
var message = reader.readString(msgLength);
id("messageDiv").innerHTML += "Received message: " + message + "<br />";
// After receiving a message, listen for the next message.
startReader(socket, reader);
}
else {
id("messageDiv").innerHTML += "The remote peer closed the socket.";
closeSocket();
}
},
function (err) {
id("messageDiv").innerHTML += "Receive error: " + err.message + "<br />";
reader.close();
});
}
else {
id("messageDiv").innerHTML += "The remote peer closed the socket.";
reader.close();
}
},
function (err) {
id("messageDiv").innerHTML += "Receive error: " + err.message + "<br />";
reader.close();
});
}
function closeSocket() {
if (proximitySocket) {
proximitySocket.close();
proximitySocket = null;
}
if (dataWriter) {
dataWriter.close();
dataWriter = null;
}
}
6. Ausführen der App
Um die App in Aktion zu erleben, führen Sie sie auf zwei Geräten aus, auf denen die Näherung aktiviert ist. Klicken Sie dann in beiden Apps auf die Schaltfläche Eine Verbindung ankündigen, und koppeln Sie die Geräte. Wenn Sie auf beiden Geräten über Wi-Fi Direct verfügen, können Sie statt einer Koppelung auch auf einem Gerät auf die Schaltfläche Browse for Peers klicken, um die Verbindung herzustellen.
Wichtig
Diese Schnellstartanleitung muss auf zwei Geräten ausgeführt werden. Für Szenarien, in denen eine Tippbewegung verwendet wird, muss auf jedem Gerät ein Näherungsgerät (z. B. NFC-Funk) installiert sein. Für Szenarien mit drahtloser Suche benötigen Sie zwei PCs, auf denen Wi-Fi Direct aktiviert ist, oder zwei Windows Phones, auf denen Bluetooth aktiviert ist. Wenn Sie keine Hardware haben, die die Näherungskopplung unterstützt (z. B. NFC-Funk), können Sie das Beispiel für den Näherungstreiber verwenden, das in den Beispielen für das Windows-Treiberkit (WDK) enthalten ist. Sie können den Beispieltreiber verwenden, um eine Koppelbewegung über eine Netzwerkverbindung zwischen zwei Geräten zu simulieren. Informationen zum WDK-Download finden Sie im Thema zum Windows-Treiberkit (WDK). Nachdem Sie das WDK und die Beispiele installiert haben, finden Sie das Näherungstreiberbeispiel im Verzeichnis „src\nfp“ in dem Speicherort, in dem Sie die WDK-Beispiele installiert haben. Anweisungen zum Erstellen und Ausführen des Simulators finden Sie in der Datei „NetNfpProvider.html“ im Verzeichnis „src\nfp\net“. Nachdem Sie den Simulator gestartet haben, wird er im Hintergrund ausgeführt, während die Näherungs-App im Vordergrund ausgeführt wird. Damit die Koppelsimulation funktioniert, muss Ihre App sich im Vordergrund befinden.
Zusammenfassung und nächste Schritte
In diesem Lernprogramm haben Sie eine App erstellt, bei der Geräte mit einer Tippbewegung oder durch drahtloses Browsen miteinander verbunden werden.
Mithilfe von Tippbewegungen können Sie Nachrichten auch veröffentlichen und abonnieren. Ein Beispiel finden Sie unter Veröffentlichen und Abonnieren von Nachrichten durch Tippen.
Verwandte Themen
Richtlinien für das Entwickeln mithilfe von Näherung
Unterstützen von Näherung und Koppeln
Testen der Näherung in Apps und Behandeln von Problemen
Windows.Networking.Proximity namespace
Beispiele