Quickstart: Publishing and subscribing to messages using tapping (HTML)

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

With Proximity, you can publish and subscribe to messages between two devices and write static tags to a device with a simple tap gesture. If two devices come within 3-4 centimeters of each other, Proximity notifies the system. This topic shows you how to use Proximity to publish or subscribe to a message.

Objective: Publish and subscribe to messages by using Proximity tapping.

Prerequisites

Microsoft Visual Studio Express 2012 for Windows 8

Instructions

1. Create a new project and enable Proximity

  1. Open Visual Studio Express 2012 for Windows 8 and select New Project from the File menu. In the Javascript section, select Blank Application. Name the app ProximityMessages and click OK.
  2. Open the Package.appxmanifest file and select the Capabilities tab. Select the Proximity capability to enable Proximity. Close and save the manifest file.

2. Add HTML UI

Open the Default.html file and add the following HTML to the <body> section.


<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. Add initialization code

The ProximityDevice class is used to publish and subscribe to messages between proximate devices. The code in this step creates an instance of the ProximityDevice class and associates functions that will be added in later steps, as event handlers for the click events of the HTML buttons. A shortcut function, id, is included for convenient access to the getElementById function. The initialize function is called when the application starts. It gets a reference to the default Proximity device that will be used to publish and subscribe to messages. It also adds the event handlers for the buttons.

Open the js folder. Open the Default.js file and replace the default activated function with the following code.

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. Add click event handlers

In this step, you will add the code for the click events of the HTML buttons. The code in the event handler for the publishMessageButton button calls the publishMessage method, to publish a message to proximate devices. The code in the event handler for the subscribeToMessageButton button calls the subscribeToMessage method to receive any messages published by a proximate device. In this sample, only messages identified as the Windows.SampleMessage type are received. You should always use the Windows. prefix for Proximity message types published using the publishMessage method. To simplify this sample, only one message is published or subscribed to at a time. You can publish and subscribe to multiple messages at the same time.

You can also publish Uris using the PublishUriMessage method, or publish binary data using the PublishBinaryMessage method. For a list of the types of messages that can be published using the PublishBinaryMessage method, see PublishBinaryMessage(String, IBuffer).

In the Default.js file, add the following code after the initializeProximitySample function.

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. Run the app

To see the app in action, run it on two devices that have Proximity enabled. Enter a message and click the Publish Message button on one device. Then click the Subscribe For Message button on the other device, and tap the devices together.

Important  

This quickstart must be run on two devices. For scenarios that use a tap gesture, each device must have a Proximity device, such as an NFC radio, installed. If you don't have hardware that supports Proximity tapping such as Near-Field Communication (NFC) radio, you can use the Proximity driver sample that is part of the Windows Driver Kit (WDK) samples. You can use the sample driver to simulate a tap gesture over a network connection between two Windows devices. For information on how to download the WDK, see Windows Driver Kit (WDK). After you have installed the WDK and samples, you can find the Proximity driver sample in the src\nfp directory in the location where you installed the WDK samples. See the NetNfpProvider.html file in the src\nfp\net directory for instructions on building and running the simulator. After you start the simulator, it runs in the background while your Proximity app is running in the foreground. Your app must be in the foreground for the tap simulation to work.

 

Summary and next steps

In this tutorial, you created an app to publish and subscribe to messages between devices by using a tap.

You can also use a tap gesture to connect to another device. For an example, see Quickstart: Connecting applications using tapping or browsing.

Quickstart: Connecting applications using tapping or browsing

Guidelines for developing using Proximity

Supporting Proximity and tapping

Testing and troubleshooting Proximity in apps

Windows.Networking.Proximity namespace

Samples

Proximity sample