Краткое руководство: публикация сообщений с помощью касания и подписка на них (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

С помощью близкого взаимодействия вы можете обмениваться сообщениями (публиковать их и подписываться на них) между двумя устройствами, а также записывать статические теги на устройство одним касанием. Если два устройства находятся на расстоянии 3–4 сантиметра друг от друга, модуль близкого взаимодействия уведомляет систему. В этом разделе мы расскажем, как использовать близкое взаимодействие, чтобы опубликовать сообщение или подписаться на него.

Цель: Публикуйте сообщения и подписывайтесь на них с помощью касаний при близком взаимодействии.

Необходимые условия

Microsoft Visual Studio Express 2012 для Windows 8

Инструкции

1. Создание нового проекта и включение близкого взаимодействия

Откройте приложение Visual Studio Express 2012 для Windows 8 и выберите New Project (Создать проект) в меню File (Файл). В разделе JavaScript выберите Blank Application (Пустое приложение). Назовите приложение ProximityMessages и нажмите кнопку ОК.
Откройте файл Package.appxmanifest и перейдите на вкладку Возможности. Включите возможность Близкое взаимодействие. Сохраните и закройте файл манифеста.

2. Добавление пользовательского интерфейса на языке HTML

Откройте файл 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. Функция initialize вызывается при запуске приложения. Она получает ссылку на устройство близкого взаимодействия, которое будет использоваться по умолчанию для публикации сообщений и подписки на них. Она также добавляет обработчики событий для кнопок.

Откройте папку 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. Добавление обработчиков событий нажатия

На этом этапе вы добавите код для событий нажатия кнопок HTML. Код в обработчике события кнопки publishMessageButton вызывает метод publishMessage для публикации сообщения на расположенных поблизости устройствах. Код в обработчике события кнопки subscribeToMessageButton вызывает метод subscribeToMessage, чтобы получать все сообщения, опубликованные расположенным поблизости устройством. В этом примере принимаются только сообщения, относящиеся к типу Windows.SampleMessage. Всегда следует использовать префикс Windows. для сообщений в режиме близкого взаимодействия, опубликованных с использованием метода publishMessage. Чтобы упростить пример, публикация или подписка каждый раз выполняется только для одного сообщения. Вы можете выполнять эти действия для нескольких сообщений одновременно.

Вы также можете опубликовать URI с помощью метода PublishUriMessage или опубликовать двоичные данные с помощью метода 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 и примеров вы сможете найти пример драйвера близкого взаимодействия в каталоге src\nfp в расположении, в которое были установлены примеры WDK. Инструкции по сборке и выполнению симулятора см. в файле NetNfpProvider.html в каталоге src\nfp\net. После запуска симулятор выполняется в фоновом режиме, тогда как ваше приложение близкого взаимодействия выполняется на переднем плане. Для имитации касания ваше приложение должно находиться на переднем плане.