Guia de início rápido: Usando toque para publicar ou assinar mensagens (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Com a Proximidade, você pode publicar e inscrever mensagens entre dois dispositivos e criar marcas estáticas para um dispositivo com um simples gesto de tocar. Se dois dispositivos chegarem a 3 ou 4 centímetros um do outro, a Proximidade notifica o sistema. Este tópico mostra como usar a Proximidade para publicar ou assinar uma mensagem.

Objetivo: Publicar e assinar mensagens usando o toque de Proximidade.

Pré-requisitos

Microsoft Visual Studio Express 2012 para Windows 8

Instruções

1. Crie um novo projeto e habilite a Proximidade

Abra o Visual Studio Express 2012 para Windows 8 e escolha Novo Projeto no menu Arquivo. Na seção Javascript, escolha Aplicativo em Branco. Nomeie o aplicativo ProximityMessages e clique em OK.
Abra o arquivo Package.appxmanifest e selecione a guia Recursos. Selecione o recurso Proximidade para habilitar a Proximidade. Feche e salve o arquivo de manifesto.

2. Adicionar a interface do usuário em HTML

Abra o arquivo Default.html e adicione o HTML a seguir à seção <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. Adicionar código de inicialização

A classe ProximityDevice é usada para publicar e assinar mensagens entre dispositivos próximos. O código nesta etapa cria uma instância da classe ProximityDevice e associa funções que serão adicionadas em etapas posteriores como manipuladores de eventos para os eventos de clique dos botões HTML. Uma função de atalho, id, está incluída para o acesso conveniente à função getElementById. A função initialize é chamada quando o aplicativo é inicializado. Ela obtém uma referência do dispositivo de Proximidade padrão que será usado para publicar e assinar mensagens. Ela também adiciona os manipuladores de eventos para os botões.

Abra a pasta js. Abra o arquivo Default.js e substitua a função activated padrão pelo código a seguir.

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. Adicionar manipuladores de eventos de clique

Nesta etapa, você adicionará o código para os eventos de clique dos botões HTML. O código no manipulador de eventos para o botão publishMessageButton chama o método publishMessage para publicar uma mensagem para dispositivos próximos. O código no manipulador de eventos para o botão subscribeToMessageButton chama o método subscribeToMessage para receber qualquer mensagem publicada por um dispositivo próximo. Neste exemplo, apenas mensagens marcadas com o tipo Windows.SampleMessage são recebidas. Você sempre deve usar o prefixo Windows. para tipos de mensagens de proximidade usando o método publishMessage. Para simplificar esta amostra, apenas uma mensagem é publicada ou assinada por vez. Você pode publicar e inscrever para várias mensagens ao mesmo tempo.

Você também pode publicar Uris usando o método PublishUriMessage ou publicar dados binários usando o método PublishBinaryMessage. Para obter uma lista dos tipos de mensagens que podem ser publicadas usando o método PublishBinaryMessage, veja PublishBinaryMessage(String, IBuffer).

No arquivo Default.js, acrescente o seguinte código à função 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. Executar o aplicativo

Para ver o aplicativo em ação, execute-o em dois dispositivos com Proximidade habilitada. Insira uma mensagem e clique no botão Publish Message em um dispositivo. Clique, então, no botão Subscribe For Message no outro dispositivo e, então, toque um dispositivo no outro.

Importante

Este guia de início rápido deve ser executado em dois dispositivos. Para cenários que usam gesto de tocar, cada dispositivo deve ter um dispositivo de proximidade, como um rádio NFC, instalado. Se você não tiver um hardware com suporte para toque de Proximidade, como rádio NFC (transmissão de dados a curta distância), poderá usar o driver de Proximidade de exemplo incluído no Kit de Driver do Windows (WDK). Esse driver de exemplo pode ser usado para simular um gesto de tocar através de uma conexão de rede entre dois dispositivos Windows. Para saber como baixar o WDK, veja Kit de Driver do Windows (WDK). Depois que instalar o WDK e os exemplos, você poderá encontrar o driver de Proximidade de exemplo no diretório src\nfp, no local em que os exemplos do WDK foram instalados. Para obter instruções sobre como criar e executar o simulador, veja o arquivo NetNfpProvider.html no diretório src\nfp\net. Depois que você iniciar o simulador, ele será executado em tela de fundo enquanto seu aplicativo de Proximidade é executado em primeiro plano. O aplicativo deve estar em primeiro plano para que a simulação de toque funcione.