Guia de início rápido: conectando aplicativos usando toque ou busca (HTML)
[ 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]
Quando você usa a Proximidade, pode criar uma conexão entre dois dispositivos com um simples gesto de tocar ou navegando nos dispositivos no alcance da rede sem fio. Você não precisa estar conectado à rede. Você pode simplesmente tocar dois dispositivos ao mesmo tempo ou se conectar usando o Wi-Fi Direct.
Para iniciar uma conexão entre duas instâncias do aplicativo usando um gesto de tocar, muitos dispositivos precisam ter NFC. Em um computador, esse canal de conexão pode ser feito via Bluetooth, Wi-Fi Direct ou uma rede de infraestrutura. No Windows Phone, a conexão pode ser estabelecida via Bluetooth ou rede de infraestrutura. Wi-Fi Direct não tem suporte no Windows Phone. Isso significa que tocar em conectar funciona entre um Windows Phone e um computador, mas que a comunicação é restrita ao uso de Bluetooth ou uma rede de infraestrutura.
Em um gesto de tocar, quando dois dispositivos com Proximidade estão entre 3 e 4 centímetros de distância entre si, a Proximidade notifica os dois sistemas. O toque pode ser usado para configurar um canal de comunicação de longo prazo usando rede de Infraestrutura, Wi-Fi Direct ou Bluetooth. Os gestos de toque ficam disponíveis somente se o seu computador tiver hardware de transmissão de dados a curta distância (NFC) instalado. A navegação de Wi-Fi Direct fica disponível somente se seu adaptador sem fio suportar Wi-Fi Direct.
Você também pode usar a Proximidade para configurar um canal de comunicação a longo prazo com um aplicativo par no alcance sem fio.
Este tópico mostra como usar a Proximidade para criar uma conexão entre os aplicativos pares, como jogos, entre os aplicativos que compartilham conteúdo, etc.
O exemplo neste tópico mostra como usar a Proximidade e a classe PeerFinder para criar uma conexão de soquete a longo prazo com um aplicativo par em outro dispositivo.
Para as conexões acionadas por um toque, quando o aplicativo não está sendo executado em primeiro plano no computador de destino, a Proximidade convida o usuário para ativar o aplicativo no computador de destino. Se o aplicativo par não estiver instalado no dispositivo de destino, a Proximidade convidará o usuário no dispositivo de destino para instalar o aplicativo a partir da Loja. Para obter mais detalhes sobre como ativar aplicativos com um gesto de tocar, veja "Ativando aplicativos usando Proximidade" em Dando suporte para Proximidade e toque.
Objetivo: Crie uma conexão entre dois dispositivos usando toque de Proximidade ou busca por dispositivos sem fio.
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 ProximityConnect 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>.
<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. Adicionar código de inicialização
O código nesta etapa associa as funções com eventos de clique dos botões HTML. Essas funções serão adicionadas em etapas posteriores como manipuladores de eventos. Uma função de atalho, id, está incluída para o acesso conveniente à função getElementById.
Abra a pasta js. Abra o arquivo Default.js e substitua a função activated padrão pelo código a seguir.
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. Adicionar o código para se conectar a um aplicativo par
Nesta etapa, você adiciona o código para os eventos de clique dos botões. Você também adiciona um método para escrever no thread de interface do usuário. O código no manipulador de eventos para o botão advertiseForPeersButton define o nome par do computador local e inicia o PeerFinder. Quando há suporte para conexões disparadas (toque), o código identifica o manipulador de eventos do evento triggeredConnectionStateChanged. No manipulador de eventos do triggeredConnectionStateChanged, o código abre um soquete de fluxo para enviar mensagens de texto entre os aplicativos pares.
O código no manipulador de eventos do botão findPeersButton chama o método findAllPeersAsync para procurar dispositivos em um alcance sem fio. Quando um ou mais pares são encontrados, o exemplo chama o método connectAsync para conectar o primeiro par que é encontrado. Isso é só para fins de exemplo. Você deve apresentar ao usuário uma lista de possíveis pares a serem escolhidos e se conectar ao par escolhido pelo usuário.
O código inclui um manipulador de eventos do evento connectionRequested que ocorre quando um par abre uma conexão com você chamando o método connectAsync. Você pode clicar no botão Aceitar Conexão para aceitar a conexão.
O código no manipulador de eventos do botão stopFindingPeersButton chama o método stop. Esse método para a publicidade e navegação do manipulador de eventos a partir de pares, seja por uma conexão sem fio ou um gesto de tocar.
No arquivo Default.js, adicione o código a seguir após a função 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. Adicionar o código para enviar e receber mensagens usando o ProximityStreamSocket
Quando uma conexão bem-sucedida é realizada, o código encaminha o objeto ProximityStreamSocket criado pela conexão para a função sendMessage. A função sendMessage abre uma conexão de rede com o dispositivo próximo. Isso permite que você envie mensagens nas duas direções. Não deixe de chamar sempre o método close do objeto ProximityStreamSocket quando tiver concluído com ele.
No arquivo Default.js, adicione o código a seguir após a função 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. Executar o aplicativo
Para ver o aplicativo em ação, execute-o em dois dispositivos com Proximidade habilitada. Em seguida, clique no botão Anunciar uma Conexão nos dois aplicativos e toque nos dispositivos ao mesmo tempo. Se você tiver Wi-Fi Direct nos dois dispositivos, em vez de um toque, você pode clicar no botão Procurar Pares em um computador para criar a conexão.
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. Para cenários que usam navegação sem fio, é necessário que os dois computadores estejam com Wi-Fi Direct ativado, ou os dois Windows Phones com o Bluetooth ativado. Se você não tiver um hardware com suporte para toque de Proximidade, como rádio NFC, 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. 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.
Resumo e próximas etapas
Neste tutorial, você criou um aplicativo que usa um gesto de tocar ou busca por dispositivos sem fio para conectar dispositivos.
Você também pode usar gestos de toque para publicar e assinar para receber mensagens. Por exemplo, veja o tópico sobre como publicar e se inscrever em mensagens usando o toque.
Tópicos relacionados
Diretrizes para o desenvolvimento com Proximidade
Dando suporte a Proximidade e toque
Testando e solucionando problemas de proximidade em aplicativos
Windows.Networking.Proximity namespace
Exemplos