Inicio rápido: publicar mensajes y suscribirse a mensajes mediante gestos de pulsar (HTML)

Artículo
12/12/2015

[ 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

Con la Proximidad, puedes publicar y suscribirte a mensajes entre dos dispositivos y escribir etiquetas estáticas en un dispositivo con un simple gesto de pulsar. Si dos dispositivos con proximidad se acercan a unos 3 o 4 centímetros de distancia, la Proximidad notifica a cada sistema. En este tema te mostramos cómo usar la Proximidad para publicar un mensaje o suscribirte a un mensaje.

Objetivo: Publica mensajes o suscríbete a mensajes mediante gestos de pulsar de Proximidad.

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 un nombre a la aplicación ProximityMessages 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>.


<table>
    <tr>
        <td style="width: 500px;vertical-align: top">
            <button id="publishMessageButton">Publish Message</button>
            <input type="text" id="messageText" />
            <button id="subscribeForMessageButton">Subscribe For Message</button><br />
            <button id="stopPublishingMessageButton">Stop Publishing Message</button>
            <button id="stopSubscribingForMessageButton">Stop Subscribing For Message</button><br />
            Enter a message and click "Publish Message". On another computer, click
            "Subscribe For Message". Enter proximity to transmit the message.
        </td>
        <td><div id="messageDiv" style="width: 500px;vertical-align:top"></div></td>
    </tr>
</table>

3. Agregar código de inicialización

La clase ProximityDevice sirve para publicar mensajes y suscribirse a mensajes entre dispositivos próximos. El código de este paso crea una instancia de la clase ProximityDevice y asocia funciones que se agregarán en pasos posteriores, como controladores de eventos para los eventos click de los botones HTML. Se incluye una función de acceso directo, id, para permitir un acceso cómodo a la función getElementById. La función de inicialización se llama cuando se inicia la aplicación. Obtiene una referencia al dispositivo de Proximidad predeterminado que se usará para publicar mensajes y suscribir a mensajes. También agrega los controladores de eventos para los botones.

Abre la carpeta js. Abre el archivo Default.js y reemplaza la función activated predeterminada con el siguiente código.

var proximityDevice;

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        
        initializeProximitySample();

        WinJS.UI.processAll();
    }
};

function id(elementId) {
    return document.getElementById(elementId);
}
    
function initializeProximitySample() {
    proximityDevice = Windows.Networking.Proximity.ProximityDevice.getDefault();

    if (proximityDevice) {
        id("publishMessageButton").addEventListener("click", publishMessage);
        id("subscribeForMessageButton").addEventListener("click", subscribeForMessage);
        id("stopSubscribingForMessageButton").addEventListener("click",
            stopSubScribingForMessage);
        id("stopPublishingMessageButton").addEventListener("click",
        stopPublishingMessage);
    }
    else {
        id("messageDiv").innerHTML += "Failed to initialize proximity device." +
             "Your device may not have proximity hardware.<br />";
    }
}

4. Agregar controladores de eventos de clic

En este paso, agregas el código para los eventos de clic de los botones HTML. El código del controlador de eventos para el botón publishMessageButton llama al método publishMessage para publicar un mensaje en dispositivos próximos. El código del controlador de eventos para el botón subscribeToMessageButton llama al método subscribeToMessage para recibir los mensajes publicados por un dispositivo próximo. En este ejemplo solo se reciben los mensajes identificados con el tipo Windows.SampleMessage. Siempre debes usar el prefijo Windows. para los tipos de mensajes de Proximidad publicados mediante el método publishMessage. Para simplificar esta muestra, solo se publica un mensaje o se suscribe a un mensaje cada vez. Puedes publicar y suscribirte a varios mensajes al mismo tiempo.

También puedes publicar URI mediante el método PublishUriMessage o publicar datos binarios mediante el método PublishBinaryMessage. Para obtener una lista de los tipos de mensajes que pueden publicarse usando el método PublishBinaryMessage, consulta PublishBinaryMessage(String, IBuffer).

En el archivo Default.js, agrega el siguiente código después de la función initializeProximitySample.

var publishedMessageId = -1;
var subscribedMessageId = -1;

function publishMessage() {
    // Stop publishing the current message.
    if (publishedMessageId != -1) {
        proximityDevice.stopPublishingMessage(publishedMessageId);
    }

    publishedMessageId =
    proximityDevice.publishMessage("Windows.SampleMessage", id("messageText").value);
}

function subscribeForMessage() {
    // Only subscribe for the message one time.
    if (subscribedMessageId === -1) {
        subscribedMessageId =
    proximityDevice.subscribeForMessage("Windows.SampleMessage", messageReceived);
    }
}

function messageReceived(device, message) {
    id("messageDiv").innerHTML += "Message received: " + message.dataAsString + "<br />";
}

function stopSubscribingForMessage() {
    proximityDevice.stopSubscribingForMessage(subscribedMessageId);
}

function stopPublishingMessage() {
    proximityDevice.stopPublishingMessage(publishedMessageId);
}

5. Ejecutar la aplicación

Para ver la aplicación en funcionamiento, ejecútala en dos dispositivos que tengan la Proximidad habilitada. Escribe un mensaje y haz clic en el botón Publish Message en un dispositivo. Después, haz clic en el botón Subscribe For Message en el otro dispositivo y junta los dos dispositivos con un gesto de pulsar.

Importante

Debes ejecutar este inicio rápido en dos dispositivos. En los casos en los que se usa un gesto de pulsar, cada dispositivo debe tener un dispositivo de Proximidad instalado como, por ejemplo, una radio NFC. Si no tienes hardware compatible con el gesto de pulsar de proximidad, como una radio de transmisión de datos en proximidad (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 ejemplo para simular un gesto de pulsar en una conexión de red entre dos dispositivos Windows. 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.