Inicio rápido: Conectar aplicaciones mediante exploración o el gesto de pulsar (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
Al usar la Proximidad, puedes establecer una conexión entre dos dispositivos con un simple gesto de pulsar o explorando en busca de dispositivos que estén dentro del alcance inalámbrico. No necesitas estar conectado a una red. Puedes simplemente juntar dos dispositivos con un gesto de pulsar o conectarte mediante Wi-Fi Direct.
La mayor parte de los dispositivos dispone de NFC para iniciar una conexión entre dos instancias de la aplicación usando un gesto de pulsar. En un equipo, este canal de conexión se establece mediante Bluetooth, Wi-Fi Direct o una red de infraestructura. En Windows Phone, la conexión se puede lograr por Bluetooth o una red de infraestructura. Windows Phone no admite Wi-Fi Direct, lo que significa que pulsar para conectarse es factible entre Windows Phone y un equipo, pero dicha comunicación se ve limitada al uso de Bluetooth o una red de infraestructura.
Para un gesto de pulsar, si dos dispositivos con Proximidad se acercan a unos 3 o 4 centímetros de distancia, la Proximidad notifica a ambos sistemas. Puedes usar el gesto de pulsar para establecer un canal de comunicaciones a largo plazo por medio de infraestructura de red, Wi-Fi Direct o Bluetooth. Los gestos de pulsar solo están disponibles si el dispositivo tiene hardware de transmisión de datos en proximidad (NFC) instalado. La búsqueda de Wi-Fi Direct solo está disponible si el adaptador inalámbrico es compatible con Wi-Fi Direct.
También puedes usar la Proximidad para establecer un canal de comunicaciones a largo plazo con una aplicación del mismo nivel que se encuentre dentro del alcance inalámbrico.
En este tema te mostramos cómo usar la Proximidad para establecer una conexión entre aplicaciones del mismo nivel (por ejemplo, juegos) entre aplicaciones que comparten contenido, etc.
El ejemplo que se expone en este tema muestra cómo usar la Proximidad y la clase PeerFinder para establecer una conexión de socket a largo plazo con una aplicación del mismo nivel en otro dispositivo.
Para las conexiones que se desencadenan mediante un gesto de pulsar, si la aplicación del mismo nivel no se está ejecutando en primer plano en el dispositivo de destino, la Proximidad invita al usuario a activar la aplicación en el equipo de destino. Si la aplicación del mismo nivel no está instalada en el dispositivo de destino, la Proximidad invita al usuario a instalarla desde la Tienda Windows. Para obtener más detalles sobre la activación de aplicaciones con un gesto de pulsar, consulta "Activar las aplicaciones mediante Proximidad" en Compatibilidad con Proximidad y pulsación.
Objetivo: Establece una conexión entre dos dispositivos usando un gesto de pulsar de Proximidad o exploración inalámbrica.
Requisitos previos
Microsoft Visual Studio Express 2012 for Windows 8
Instrucciones
1. Crear un nuevo proyecto y habilitar la Proximidad
- Abre Visual Studio Express 2012 para Windows 8 y selecciona Nuevo proyecto en el menú Archivo. En la sección Javascript, selecciona Aplicación vacía. Asigna el nombre ProximityConnect a la aplicación y haz clic en Aceptar.
- Abre el archivo Package.appxmanifest y selecciona la pestaña Capacidades. Selecciona la funcionalidad Proximidad para habilitar la Proximidad. Cierra y guarda el archivo de manifiesto.
2. Agregar una interfaz de usuario HTML
Abre el archivo Default.html y agrega el siguiente código HTML en la sección <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. Agregar código de inicialización
El código de este paso asocia funciones con eventos de clic de los botones HTML. Estas funciones se agregan en los pasos posteriores como controladores de eventos. Se incluye una función de acceso directo, id, para permitir un acceso cómodo a la función getElementById.
Abre la carpeta js. Abre el archivo Default.js y reemplaza la función activated predeterminada con el siguiente código.
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. Agregar el código para establecer una conexión con una aplicación del mismo nivel
En este paso, agrega el código para los eventos de clic de los botones. También debes agregar un método para escritura en el subproceso de la interfaz de usuario. El código del controlador de eventos del botón advertiseForPeersButton establece el nombre del mismo nivel del dispositivo local e inicia PeerFinder. Si se admiten conexiones desencadenadas (pulsar), el código identifica el controlador de eventos para el evento triggeredConnectionStateChanged. En el controlador de eventos triggeredConnectionStateChanged, el código abre un socket de secuencias para enviar mensajes de texto entre las aplicaciones del mismo nivel.
El código del controlador de eventos del botón findPeersButton llama al método findAllPeersAsync para buscar dispositivos que se encuentren dentro del alcance inalámbrico. Cuando se encuentra uno o más dispositivos del mismo nivel, la muestra llama al método connectAsync para conectar el primer dispositivo del mismo nivel encontrado. Esto se indica aquí a modo de ejemplo. Debes presentarle al usuario una lista de los posibles dispositivos del mismo nivel disponibles para elegir y después conectar el que elija el usuario.
El código incluye un controlador de eventos para el evento connectionRequested que se genera cuando un dispositivo del mismo nivel abre una conexión contigo llamando al método connectAsync. Puedes hacer clic en el botón Accept Connection (Aceptar conexión) para aceptar la conexión.
El código del controlador de eventos para el botón stopFindingPeersButton llama al método stop. Este método detiene el controlador de eventos y hace que deje de anunciar y buscar dispositivos del mismo nivel, ya sea mediante una conexión inalámbrica o un gesto de pulsar.
En el archivo Default.js, agrega el siguiente código después de la función 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. Agregar el código para enviar y recibir mensajes mediante ProximityStreamSocket
Cuando se establece correctamente una conexión, el código pasa el objeto ProximityStreamSocket creado por la conexión a la función sendMessage. La función sendMessage abre una conexión de red con el dispositivo próximo. Esto te permite enviar y recibir mensajes. Asegúrate de llamar siempre al método close del objeto ProximityStreamSocket una vez que termines de trabajar con él.
En el archivo Default.js, agrega el siguiente código después de la función 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. Ejecutar la aplicación
Para ver la aplicación en funcionamiento, ejecútala en dos dispositivos que tengan la Proximidad habilitada. Después, haz clic en el botón Advertise for a Connection (Anunciar para una conexión) en ambas aplicaciones y después junta los dos dispositivos con un gesto de pulsar. Si cuentas con Wi-Fi Direct en los dos dispositivos, en lugar de pulsar, puedes hacer clic en el botón Browse for Peers (Buscar dispositivos del mismo nivel) en un dispositivo para crear la conexión.
Importante
Debes ejecutar este inicio rápido en dos dispositivos. En los escenarios en los que se use el gesto de pulsar, cada dispositivo debe tener instalado un dispositivo de proximidad, como una radio de transmisión de datos en proximidad (NFC). En los escenarios en los que se use la búsqueda inalámbrica, necesitarás dos equipos con Wi-Fi Direct habilitado o dos Windows Phone con Bluetooth habilitado. Si no tienes hardware compatible con el gesto de pulsar de proximidad, como una radio NFC, puedes usar la muestra de controlador de proximidad que se incluye con las muestras del kit para controladores de Windows (WDK). Puedes usar el controlador de muestra para simular un gesto de pulsar en una conexión de red entre dos dispositivos. Para obtener información sobre cómo descargar WDK, consulta Kit para controladores de Windows (WDK). Una vez que instales WDK y las muestras, podrás encontrar la muestra de controlador de proximidad en el directorio src\nfp de la ubicación donde instalaste las muestras de WDK. En el archivo NetNfpProvider.html del directorio src\nfp\net podrás encontrar instrucciones sobre cómo compilar y ejecutar el simulador. Una vez que inicies el simulador, se ejecutará en segundo plano mientras la aplicación de proximidad se ejecuta en primer plano. La aplicación debe estar en primer plano para que funcione la simulación del gesto de pulsar.
Resumen y siguientes pasos
En este tutorial, has creado una aplicación que usa un gesto de pulsar o exploración inalámbrica para conectar dispositivos.
También puedes usar gestos de pulsar para publicar mensajes o suscribirte a mensajes. Para ver un ejemplo, consulta el tema Publicar mensajes o suscribirse a mensajes mediante gestos de pulsar.
Temas relacionados
Directrices para el desarrollo mediante la Proximidad
Compatibilidad con Proximidad y pulsación
Pruebas y solución de problemas de la Proximidad en las aplicaciones
Windows.Networking.Proximity namespace
Muestras