Démarrage rapide : connexion d’applications à l’aide d’un geste tactile ou de la navigation (HTML)
[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Quand vous utilisez la fonctionnalité de proximité, vous pouvez créer une connexion entre deux appareils avec un simple geste tactile ou en recherchant les appareils à portée de connexion sans fil. Il n’est pas nécessaire d’être connecté à un réseau. Vous pouvez simplement connecter deux appareils à l’aide d’une action d’appui ou de Wi-Fi Direct.
Pour lancer une connexion entre deux instances de l’application à l’aide d’une action d’appuyer, la plupart des appareils doivent disposer de la technologie NFC. Sur un PC, ce canal de connexion peut être établi via Bluetooth, Wi-Fi Direct ou un réseau à infrastructure. Sur Windows Phone, la connexion peut être établie via Bluetooth ou un réseau à infrastructure. La fonctionnalité Wi-Fi Direct n’est pas prise en charge sur Windows Phone. Cela signifie que l’action d’appuyer pour effectuer une connexion fonctionne entre Windows Phone et un PC, mais que la communication est limitée à l’utilisation de la fonctionnalité Bluetooth ou d’un réseau à infrastructure.
Pour un geste tactile, si deux appareils ayant la fonctionnalité de proximité s’approchent l’un de l’autre de 3 ou 4 centimètres, la fonctionnalité de proximité envoie une notification aux deux systèmes. Vous pouvez aussi utiliser l’action par appui pour configurer un canal de communication à long terme, à l’aide d’un réseau à infrastructure, de Wifi-Direct ou de Bluetooth. Les actions par appui ne sont disponibles que si votre appareil est équipé d’un matériel de communication en champ proche. La recherche Wi-Fi Direct n’est disponible que si votre adaptateur sans fil prend en charge Wi-Fi Direct.
Vous pouvez également utiliser la fonctionnalité de proximité pour configurer un canal de communication à long terme vers une application homologue à portée de connexion sans fil.
Cette rubrique explique comment utiliser la fonctionnalité de proximité pour créer une connexion entre plusieurs applications : par exemple, entre des applications homologues, telles que des jeux, ou des applications partageant un contenu.
L’exemple de cette rubrique montre comment utiliser la fonctionnalité de proximité et la classe PeerFinder pour créer une connexion de socket à long terme avec une application homologue sur un autre appareil.
Pour les connexions déclenchées par un geste tactile, la fonctionnalité de proximité invite l’utilisateur à activer l’application homologue sur l’appareil cible si celle-ci n’y est pas exécutée au premier plan. Si l’application homologue n’est pas installée sur l’appareil cible, la fonctionnalité de proximité invite l’utilisateur à l’installer à partir du Windows Store. Pour plus d’informations sur l’activation d’applications à l’aide de l’action d’appuyer, voir « Activation d’applications par proximité » dans Prise en charge de la fonctionnalité de proximité et du geste tactile.
Objectif: Utilisez la fonctionnalité de proximité pour créer une connexion entre deux périphériques à l’aide d’un geste d’appui ou de la navigation sans fil.
Prérequis
Microsoft Visual Studio Express 2012 pour Windows 8
Instructions
1. Créer un nouveau projet et activer la fonctionnalité de proximité
- Ouvrez Visual Studio Express 2012 pour Windows 8, puis sélectionnez Nouveau projet dans le menu Fichier. Dans la section Javascript, sélectionnez Application vide. Nommez l’application ProximityConnect et cliquez sur OK.
- Ouvrez le fichier Package.appxmanifest, puis sélectionnez l’onglet Capacités. Sélectionnez Proximité pour activer cette fonctionnalité. Fermez et enregistrez le fichier manifeste.
2. Ajouter une interface utilisateur HTML
Ouvrez le fichier Default.html et ajoutez le code HTLML suivant à la section <body>.
<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. Ajouter du code d’initialisation
Le code de cette étape associe des fonctions aux événements de clic des boutons HTML. Ces fonctions seront ajoutées lors des étapes ultérieures en tant que gestionnaires d’événements. Une fonction de raccourci, id, est incluse pour fournir un accès pratique à la fonction getElementById.
Ouvrez le dossier js. Ouvrez le fichier Default.js et remplacez la fonction activated par défaut par le code suivant.
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. Ajouter le code pour se connecter à une application homologue
Dans cette étape, vous ajoutez du code pour les événements de clic des boutons. Vous ajoutez aussi une méthode pour écrire dans le thread d’interface utilisateur. Le code du gestionnaire d’événements du bouton advertiseForPeersButton définit le nom d’homologue de l’appareil local et démarre PeerFinder. Si les connexions déclenchées sont prises en charge (appui), le code identifie le gestionnaire d’événements pour l’événement triggeredConnectionStateChanged. Dans le gestionnaire d’événements triggeredConnectionStateChanged, le code ouvre un socket de flux pour envoyer des messages texte entre les applications homologues.
Le code du gestionnaire d’événements pour le bouton findPeersButton appelle la méthode findAllPeersAsync pour rechercher les appareils à portée de connexion sans fil. Si un ou plusieurs homologues sont trouvés, l’exemple appelle la méthode connectAsync pour établir une connexion au premier homologue trouvé. Il ne s’agit-là que d’un exemple. Vous devez proposer une liste d’applications homologues dans laquelle l’utilisateur peut effectuer un choix, puis établir une connexion à l’application homologue choisie.
Le code inclut un gestionnaire d’événements pour l’événement connectionRequested qui se produit lorsqu’un homologue se connecte à votre application en appelant la méthode connectAsync. Pour accepter la connexion, cliquez sur le bouton Accepter la connexion.
Le code du gestionnaire d’événements pour le bouton stopFindingPeersButton appelle la méthode stop. Cette méthode fait cesser le gestionnaire d’événements de publier et de rechercher des homologues, via une connexion sans fil ou via un geste tactile.
Dans le fichier Default.js, ajoutez le code suivant après la fonction id.
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. Ajouter le code requis pour envoyer et recevoir des messages avec ProximityStreamSocket
Lorsqu’une connexion est établie avec succès, le code passe l’objet ProximityStreamSocket créé par la connexion à la fonction sendMessage. La fonction sendMessage établit une connexion réseau avec l’appareil à proximité. Ceci vous permet d’envoyer et de recevoir des messages. Veillez toujours à appeler la méthode close de l’objet ProximityStreamSocket quand vous en avez terminé avec cet objet.
Dans le fichier Default.js, ajoutez le code suivant après la fonction connectToPeer.
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. Exécuter l’application
Pour voir l’application en action, exécutez-la sur deux appareils dont la fonctionnalité de proximité est activée. Cliquez ensuite sur le bouton Publier pour une connexion dans les deux applications et effectuez un geste tactile sur les deux appareils. Si Wi-Fi Direct est installé sur les deux appareils, au lieu d’effectuer un geste tactile, vous pouvez créer la connexion en cliquant sur le bouton Rechercher des homologues sur un des appareils.
Important
Les instructions de cette rubrique de démarrage rapide doivent être effectuées sur deux appareils. Pour les scénarios qui impliquent une action d’appuyer, chaque appareil doit être doté de la technologie appropriée, par exemple la communication en champ proche (NFC) par ondes radio. Pour les scénarios qui utilisent la navigation sans fil, vous devez disposer de deux PC avec activation de la connexion Wi-Fi Direct, ou de deux Windows Phone avec activation de la connexion Bluetooth. Si vous ne possédez aucun matériel prenant en charge l’action d’appuyer pour la proximité, comme la communication en champ proche (NFC) par ondes radio, vous pouvez utiliser le pilote de proximité proposé à titre d’exemple dans le cadre des exemples du WDK (Windows Driver Kit). Ce pilote peut vous servir à simuler une action par appui sur une connexion réseau établie entre deux appareils. Pour plus d’informations sur le téléchargement du Windows Driver Kit (WDK), voir Windows Driver Kit (WDK). Après avoir installé le WDK et les exemples, vous trouverez l’exemple de pilote de proximité dans le répertoire src\nfp, là où vous avez installé les exemples WDK. Reportez-vous au fichier NetNfpProvider.html, dans le répertoire src\nfp\net, pour obtenir des instructions sur la création et l’exécution du simulateur. Une fois le simulateur démarré, celui-ci s’exécute en arrière-plan tandis que votre application de proximité opère au premier plan. Pour que la simulation de l’action par appui fonctionne, votre application doit se trouver au premier plan.
Récapitulatif et étapes suivantes
Dans ce didacticiel, vous avez créé une application qui permet à l’utilisateur de connecter des périphériques à l’aide d’un geste d’appui ou de la navigation sans fil.
Vous pouvez également publier des messages ou vous y abonner avec un geste d’appui. Pour obtenir un exemple, voir Publication et abonnement à des messages à l’aide d’un geste d’appui.
Rubriques associées
Recommandations sur le développement avec la fonctionnalité de proximité
Prise en charge de la fonctionnalité de proximité et du geste tactile
Évaluation de la proximité dans les applications et résolution des problèmes qui en découlent
Windows.Networking.Proximity namespace
Exemples