快速入门:使用点击发布和订阅消息 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

使用邻近感应,你可以在两台设备之间发布和订阅消息,并使用简单的点击手势将静态标记写入设备。如果两台设备相互之间距离在 3-4 厘米范围内,邻近感应会通知系统。 本主题演示如何使用邻近感应来发布或订阅消息。

目标: 通过使用邻近点击来发布和订阅消息。

先决条件

Microsoft Visual Studio Express 2012 for Windows 8

说明

1. 创建新项目并启用邻近感应

  1. 打开 Visual Studio Express 2012 for Windows 8,然后从“文件”菜单中选择“新建项目”。在“JavaScript”部分,选择“空白应用程序”。将应用命名为 ProximityMessages 并单击“确定”。
  2. 打开 Package.appxmanifest 文件并选择“功能”****选项卡。选择“邻近”功能以启用邻近感应。关闭并保存清单文件。

2. 添加 HTML UI

打开 Default.html 文件并将下面的 HTML 添加到 <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. 添加初始化代码

ProximityDevice 类用于发布和订阅临近设备之间的消息。此步骤中的代码将创建 ProximityDevice 类的实例,并关联将在后续步骤中作为 HTML 按钮的单击事件的事件处理程序添加的函数。包括快捷方式函数,id,以便于访问 getElementById 函数。应用程序启动时调用初始化函数。它获取将用于发布和订阅消息的默认邻近设备的引用。它还为按钮添加事件处理程序。

打开 js 文件夹。打开 Default.js 文件并将默认的 activated 函数替换为下面的代码。

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. 添加 Click 事件处理程序

在此步骤中,你将添加 HTML 按钮的单击事件的代码。publishMessageButton 按钮的事件处理程序的代码调用 publishMessage 方法,以向邻近设备发布消息。subscribeToMessageButton 按钮的事件处理程序的代码调用 subscribeToMessage 方法,以接收邻近设备发布的任意消息。在此示例中,仅接收被标识为 Windows.SampleMessage 类型的消息。对于使用 publishMessage 方法发布的邻近感应消息类型,你应当始终使用 Windows. 前缀。若要简化此示例,一次仅发布或订阅一个消息。你可以同时发布和订阅多条消息。

还可以使用 PublishUriMessage 方法发布 URI,或者使用 PublishBinaryMessage 方法发布二进制数据。有关可使用 PublishBinaryMessage 方法发布的消息类型列表,请参阅 PublishBinaryMessage(String, IBuffer)

在 Default.js 文件中,将以下代码添加到 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. 运行该应用

若要查看该应用的操作情况,请在两台启用了邻近感应的设备上运行该应用。输入一条消息并单击一台设备上的“Publish Message”按钮。然后单击另一台设备的“Subscribe For Message”按钮,然后一起点击两台设备。

要点  

本快速入门必须在两台设备上运行。对于使用点击手势的方案,每台设备必须安装一个邻近感应设备,如 NFC 射频硬件。如果没有支持邻近点击的硬件(例如近场通信 (NFC) 射频硬件),可以使用 Windows 驱动程序工具包 (WDK) 示例中包含的邻近驱动程序示例。可以使用示例驱动程序模拟两台 Windows 设备之间网络连接上的点击手势。有关如何下载 WDK 的信息,请参阅 Windows 驱动程序工具包 (WDK)。安装 WDK 和示例后,可以在安装 WDK 示例的位置中的 src\nfp 目录下找到邻近驱动程序示例。请查阅 src\nfp\net 目录中的 NetNfpProvider.html 文件,了解构建和运行模拟器的说明。启动模拟器后,它在后台运行,而邻近应用在前台运行。应用必须在前台运行,这样点击模拟才能生效。

 

摘要和后续步骤

在本教程中,你创建了一个应用,使用点击在两台设备之间发布和订阅消息。

你还可以使用点击手势连接到另一台设备。有关具体示例,请参阅快速入门:使用点击或浏览连接应用程序

快速入门:使用点击或浏览连接应用程序

相关主题

使用邻近进行开发的指南

支持邻近感应和点击

对应用中的邻近感应进行测试和疑难解答

Windows.Networking.Proximity namespace

示例

邻近示例