빠른 시작: 탭을 사용한 메시지 게시 및 구독(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 클래스는 Proximate 장치 간에 메시지를 게시하고 구독하는 데 사용됩니다. 이 단계의 코드는 ProximityDevice 클래스 인스턴스를 만들고 HTML 단추의 클릭 이벤트를 위한 이벤트 처리기로서, 나중에 나오는 단계에서 추가될 함수를 연결합니다. 바로 가기 함수인 id는 getElementById 함수에 편리하게 액세스하기 위한 것입니다. 응용 프로그램이 시작되면 초기화 함수가 호출됩니다. 이 함수는 메시지를 게시하고 구독하는 데 사용할 기본 근접 연결 장치에 대한 참조를 가져옵니다. 단추를 위한 이벤트 처리기도 추가합니다.

js 폴더를 엽니다. Default.js 파일을 열고 활성화된 기본 함수를 다음 코드로 교체합니다.

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 유형으로 식별된 메시지만 수신됩니다. 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(근거리 통신) 라디오와 같은 근접 연결 탭을 지원하는 하드웨어가 없는 경우 WDK(Windows 드라이버 키트) 샘플에 포함된 근접 연결 드라이버 샘플을 사용할 수 있습니다. 샘플 드라이버를 사용하여 네트워크 연결을 통해 두 Windows 장치 간에 탭 제스처를 시뮬레이트할 수 있습니다. WDK를 다운로드하는 방법에 대한 자세한 내용은 WDK(Windows 드라이버 키트)를 참조하세요. WDK와 샘플을 설치하면 WDK 샘플을 설치한 위치에 있는 src\nfp 디렉터리에서 근접 연결 드라이버 샘플을 찾을 수 있습니다. 시뮬레이터를 빌드 및 실행하는 방법에 대해서는 src\nfp\net 디렉터리에 있는 NetNfpProvider.html 파일을 참조하세요. 시뮬레이터는 근접 연결 앱이 포그라운드에서 실행 중인 동안에는 백그라운드에서 실행됩니다. 탭 시뮬레이션을 수행하려면 앱이 포그라운드에 있어야 합니다.

 

요약 및 다음 단계

이 자습서에서는 탭을 사용하여 장치 간 메시지를 게시하고 구독하는 앱을 만들었습니다.

탭 제스처를 사용하여 다른 장치에 연결할 수도 있습니다. 예를 보려면 빠른 시작: 탭 또는 브라우징을 사용한 응용 프로그램 연결을 참조하세요.

빠른 시작: 탭 또는 브라우징을 사용한 응용 프로그램 연결

관련 항목

근접 연결을 사용한 개발에 대한 지침

근접 연결 및 탭 지원

앱의 근접 연결 테스트 및 문제 해결

Windows.Networking.Proximity namespace

샘플

근접 연결 샘플