Schnellstart: Veröffentlichen und Abonnieren von Nachrichten durch Koppeln (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Mit der Näherungsfunktion können Sie zwischen zwei Geräten Nachrichten veröffentlichen und abonnieren und statische Tags mit einer einfachen Kopplungsgeste auf ein Gerät schreiben. Wenn sich zwei Geräte in einem Abstand von 3 bis 4 cm voneinander befinden, benachrichtigt die Näherungsfunktion das System. In diesem Thema wird gezeigt, wie Sie die Näherungsfunktion verwenden, um eine Nachricht zu veröffentlichen oder zu abonnieren.

Ziel: Veröffentlichen und Abonnieren von Nachrichten durch Koppeln mithilfe von Näherung

Voraussetzungen

Microsoft Visual Studio Express 2012 für Windows 8

Anweisungen

1. Erstellen eines neuen Projekts und Aktivieren von Näherung

Öffnen Sie Visual Studio Express 2012 für Windows 8, und klicken Sie im Menü Datei auf Neues Projekt. Wählen Sie im Abschnitt JavaScript die Option Leere Anwendung aus. Geben Sie für die App den Namen ProximityMessages ein, und klicken Sie anschließend auf OK.
Öffnen Sie die Datei Package.appxmanifest, und klicken Sie auf die Registerkarte Funktionen. Wählen Sie die Funktion Näherung aus, um die Näherung zu aktivieren. Schließen und speichern Sie die Manifestdatei.

2. Hinzufügen einer HTML-Benutzeroberfläche

Öffnen Sie die Datei Default.html, und fügen Sie dem Abschnitt "<body>" den folgenden HTML-Code hinzu.


<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. Hinzufügen von Initialisierungscode

Die ProximityDevice-Klasse wird verwendet, um Nachrichten zwischen Näherungsgeräten zu veröffentlichen und zu abonnieren. Der Code in diesem Schritt erstellt eine Instanz der ProximityDevice-Klasse und ordnet Funktionen, die in späteren Schritten hinzugefügt werden, als Ereignishandler für die Klickereignisse der HTML-Schaltflächen hinzu. Für den schnellen Zugriff auf die Funktion getElementById ist eine Verknüpfungsfunktion (id) enthalten. Die initialize-Funktion wird beim Starten der App aufgerufen. Sie ruft einen Verweis auf das standardmäßige Näherungsgerät ab, das zum Veröffentlichen und Abonnieren von Nachrichten verwendet wird. Außerdem fügt sie die Ereignishandler für die Schaltflächen hinzu.

Öffnen Sie den Ordner js. Öffnen Sie die Datei Default.js, und ersetzen Sie die Standardfunktion activated durch den folgenden 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. Hinzufügen von Click-Ereignishandlern

In diesem Schritt fügen Sie den Code für die Klickereignisse der HTML-Schaltflächen hinzu. Der Code im Ereignishandler für die Schaltfläche „publishMessageButton“ ruft die publishMessage-Methode auf, um eine Nachricht für in der Nähe befindliche Geräte zu veröffentlichen. Der Code im Ereignishandler für die Schaltfläche „subscribeToMessageButton“ ruft die subscribeToMessage-Methode auf, um von einem in der Nähe befindlichen Gerät veröffentlichte Nachrichten zu empfangen. In diesem Beispiel werden nur Nachrichten empfangen, für die der Typ Windows.SampleMessage identifiziert wurde. Sie sollten für Näherungsnachrichttypen, die mit der publishMessage-Methode veröffentlicht werden, immer das Präfix Windows. verwenden. Zur Vereinfachung des Beispiels wird jeweils nur eine Nachricht veröffentlicht oder abonniert. Sie können gleichzeitig mehrere Nachrichten veröffentlichen und abonnieren.

Zudem können Sie mit der PublishUriMessage-Methode URIs veröffentlichen, oder mit der PublishBinaryMessage-Methode binäre Daten. Eine Liste der Typen von Nachrichten, die mit der PublishBinaryMessage-Methode veröffentlicht werden können, finden Sie unter PublishBinaryMessage(String, IBuffer).

Fügen Sie in der Datei Default.js nach der initializeProximitySample-Funktion den folgenden Code hinzu.

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. Ausführen der App

Um die App in Aktion zu erleben, führen Sie sie auf zwei Geräten aus, auf denen die Näherung aktiviert ist. Geben Sie auf einem Gerät eine Nachricht ein, und klicken Sie auf die Schaltfläche Publish Message. Klicken Sie anschließend auf dem anderen Gerät auf die Schaltfläche Subscribe For Message, und koppeln Sie die Geräte.

Wichtig

Diese Schnellstartanleitung muss auf zwei Geräten ausgeführt werden. Für Szenarien, in denen eine Tippbewegung verwendet wird, muss auf jedem Gerät ein Näherungsgerät (z. B. eine NFC-Funkeinheit) installiert sein. Wenn Sie keine Hardware haben, die Näherungskopplung unterstützt, z. B. NFC-Funkempfang (Near-Field Communication, Nahfeldkommunikation), können Sie das Beispiel für den Näherungstreiber verwenden, das in den Beispielen für das Windows-Treiberkit (WDK) enthalten ist. Mit dem Beispieltreiber können Sie eine Tippbewegung über eine Netzwerkverbindung zwischen zwei Windows-Geräten simulieren. Informationen zum WDK-Download finden Sie im Thema zum Windows-Treiberkit (WDK). Nachdem Sie das WDK und die Beispiele installiert haben, finden Sie das Näherungstreiberbeispiel im Verzeichnis „src\nfp“ in dem Speicherort, in dem Sie die WDK-Beispiele installiert haben. Anweisungen zum Erstellen und Ausführen des Simulators finden Sie in der Datei „NetNfpProvider.html“ im Verzeichnis „src\nfp\net“. Nachdem Sie den Simulator gestartet haben, wird er im Hintergrund ausgeführt, während die Näherungs-App im Vordergrund ausgeführt wird. Damit die Koppelsimulation funktioniert, muss Ihre App sich im Vordergrund befinden.

Zusammenfassung und nächste Schritte

In diesem Lernprogramm haben Sie eine App zum Veröffentlichen und Abonnieren von Nachrichten zwischen Geräten mithilfe einer Tippbewegung erstellt.

Sie können eine Tippbewegung auch verwenden, um eine Verbindung mit einem anderen Gerät herzustellen. Ein Beispiel finden Sie unter Schnellstart: Verbinden von Anwendungen mit Koppeln oder Durchsuchen.

Schnellstart: Verbinden von Apps durch Koppeln oder Suchen