Windows.Web.Http를 사용하여 HTTP 서버에 연결하는 방법(HTML)

  • 아티클

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

GET 요청을 웹 서비스에 보내고 Windows.Web.Http 네임스페이스의 Windows.Web.Http.HttpClient 클래스를 사용하여 응답을 검색합니다.

[지금 HTTPClient 샘플을 가져옵니다.]

Windows.Web.Http 네임스페이스의 클래스는 최신 HTTP 클라이언트 앱용 프로그래밍 인터페이스를 제공합니다. Windows.Web.Http 네임스페이스와 관련 Windows.Web.Http.Headers 및 Windows.Web.Http.Filters 네임스페이스는 사용자가 HTTP를 통해 HTTP 요청을 수행하고 최신 웹 서비스에서 HTTP 응답을 받을 수 있게 하는 HTTP 클라이언트 구성 요소를 제공합니다.

Windows 8.1에서는 HTTP 및 REST(Representational State Transfer) 웹 서비스에 연결하는 Windows 앱에 사용할 Windows 런타임 네임스페이스인 Windows.Web.Http를 소개합니다. 이 새로운 API는 지원되는 모든 언어에서 전체 기능 지원을 제공하고 원래 Windows 8용으로 릴리스된 HTTP API를 대체합니다.

이 새로운 API는 이전에 Windows 8의 각 언어 프로젝션에 필요했던 각기 다른 기능을 가진 세 가지 API를 대체합니다.

기본 요청 작업의 경우 새 API에는 가장 일반적인 작업을 처리하기 위한 단순 인터페이스가 있고 이 API는 대부분의 시나리오에 적용되는 인증(AUTH)에 대한 합리적인 기본값을 제공합니다. 더 복잡한 HTTP 작업의 경우 다음과 같은 추가 접근 권한 값이 포함됩니다.

  • 일반적인 동사에 대한 메서드(DELETE, GET, PUT 및 POST)

  • 일반적인 인증 설정 및 패턴에 대한 지원

  • 전송 시 SSL(Secure Sockets Layer) 세부 정보에 대한 액세스

  • 고급 앱에 사용자 지정 필터를 포함하는 기능

  • 쿠키를 가져오고 설정하고 삭제하는 기능

  • 비동기 메서드에서 사용할 수 있는 HTTP 요청 진행 정보

Windows.Web.Http.HttpClient 클래스는 HTTP를 통해 기본 요청을 보내고 받는 데 사용됩니다. HTTP 요청을 보내고 URI로 식별된 리소스에서 HTTP 응답을 받기 위한 기본 클래스를 제공합니다. 이 클래스를 사용하여 GET, PUT, POST, DELETE 및 기타 요청을 웹 서비스로 보낼 수 있습니다. 각 요청은 비동기 작업으로 전송됩니다.

Windows.Web.Http.HttpRequestMessage 클래스는 Windows.Web.Http.HttpClient에서 전송된 HTTP 요청 메시지를 나타냅니다. Windows.Web.Http.HttpResponseMessage 클래스는 HTTP 요청에서 받은 HTTP 응답 메시지를 나타냅니다. HTTP 메시지는 IETF에 의해 RFC 2616에서 정의됩니다.

Windows.Web.Http 네임스페이스는 HTTP 요청 또는 HTTP 응답과 연결된 HTTP 콘텐츠(쿠키가 포함된 HTTP 엔터티 본문 및 콘텐츠 헤더)를 나타내는 여러 클래스를 제공합니다. 이러한 여러 클래스를 통해 콘텐츠에서 버퍼, 문자열, 스트림 및 application/x-www-form-urlencoded MIME 형식, multipart/* MIME 형식 및 multipart/form-data MIME 형식으로 인코드된 이름/값 데이터를 사용할 수 있습니다. 사용자 지정 콘텐츠를 정의할 수도 있습니다.

이 예제에서 HttpStringContent 클래스는 HTTP 응답을 문자열로 나타내는 데 사용됩니다.

Windows.Web.Http.Headers 네임스페이스에서는 HTTP 머리글 및 쿠키 만들기를 지원하며 이러한 항목이 이후 속성으로 HttpRequestMessage 및 HttpResponseMessage 개체와 연결됩니다.

사전 요구 사항

이 항목의 다음 예제는 JavaScript 및 HTML로 제공됩니다. RFC 2616에 설명된 HTTP 요청의 기본적인 내용을 알고 있어야 합니다.

WinJS.xhr 및 XMLHttpRequest를 사용하여 JavaScript 및 HTML로 작성한 앱에서 HTTP 요청을 할 수도 있습니다. 자세한 내용은 웹 서비스에 연결(JavaScript로 작성한 Windows 런타임 앱)을 참조하세요.

지침

단계 1: 새 프로젝트 만들기

  1. Microsoft Visual Studio 2013을 열고 파일 메뉴에서 새 프로젝트를 선택합니다.
  2. 템플릿 목록에서 JavaScript를 선택합니다.
  3. 섹션에서 Store apps을 선택합니다.
  4. 섹션에서 대상으로 하는 플랫폼에 따라 Universal Apps, Windows apps 또는 Windows Phone apps을 선택한 후 새 응용 프로그램을 선택합니다.
  5. 응용 프로그램 이름을 HttpClientGet로 지정하고 확인을 클릭합니다.

단계 2: 네트워크 액세스를 사용하도록 하는 접근 권한 값 설정

앱에 네트워크 접근 권한 값을 설정하여 홈 네트워크, 회사 네트워크 등의 개인 네트워크와 인터넷에 액세스할 수 있게 해야 합니다. 클라이언트가 웹 서비스에 연결하기 때문에 이 앱에 네트워크 접근 권한 값을 사용하도록 설정해야 합니다.

Windows.Web.Http.HttpClient를 사용하는 앱이 다른 컴퓨터의 웹 서비스에 연결하려면 앱에 네트워크 접근 권한 값 세트가 필요합니다. 앱이 인터넷의 웹 서비스에 클라이언트로 연결할 수 있어야 하는 경우 인터넷(클라이언트) 접근 권한 값이 필요합니다. 앱이 홈 네트워크 또는 회사 네트워크의 웹 서비스에 클라이언트로 연결할 수 있어야 하는 경우 Private Networks (Client & Server)(개인 네트워크(클라이언트 및 서버)) 접근 권한 값이 필요합니다.

참고  Windows Phone에는 앱에서 네트워크에 완전히 액세스하게 해 주는 단일 네트워크 접근 권한 값(인터넷(클라이언트 및 서버))이 있습니다.

 

웹 서비스가 동일한 컴퓨터에서 앱으로 실행되고 있는 경우 루프백 액세스가 필요합니다. Visual Studio 2013에서 개발되어 실행되는 앱은 루프백 제한이 면제되도록 자동으로 등록됩니다. 자세한 내용은 루프백을 사용하도록 설정하고 네트워크 격리를 디버그하는 방법을 참조하세요.

네트워크 액세스에 대한 자세한 내용은 네트워크 접근 권한 값을 구성하는 방법을 참조하세요.

이 단계는 앱이 인터넷이나 개인 또는 회사 네트워크의 웹 서비스에 액세스하는 경우 배포되기 전에 앱의 네트워크 접근 권한 값을 설정하는 데 필요합니다.

  1. Visual Studio 2013을 사용하여 package.appxmanifest 파일을 엽니다.

  2. 접근 권한 값 탭을 선택합니다.

  3. Windows 버전 샘플을 빌드하려면 인터넷(클라이언트) 및 개인 네트워크(클라이언트 및 서버) 접근 권한 값을 선택합니다.

    Windows Phone 버전 샘플을 빌드하려면 인터넷(클라이언트 및 서버) 접근 권한 값을 선택합니다.

  4. 매니페스트 파일을 저장하고 닫습니다.

단계 3: HTML UI 추가

  • 이 섹션에서는 HTML로 앱 레이아웃을 정의하여 앱에서 각 개체의 대략적인 크기와 위치를 지정합니다. 데이터를 표시할 컨트롤과 콘텐츠를 추가하여 앱의 UI를 완성합니다.

    이 샘플은 다음을 포함하는 간단한 HTML UI 요소를 사용합니다.

    • 입력 URI 주소의 입력 필드와 텍스트 레이블에 사용되는 class 및 비동기 요청을 시작하는 데 사용되는 button이 포함된 컨트롤

    • 텍스트 필드와 텍스트 레이블이 있고, 현재 상태를 표시하는 class가 포함된 컨트롤 여기에 상태와 오류 메시지가 표시됩니다. 이 컨트롤에는 웹 서비스로부터 받은 출력이 표시되는 class도 포함되어 있습니다. 이 샘플에서는 HTTP GET 작업의 결과가 HTML 마크업을 포함하는 일반 텍스트로 표시됩니다.

    js 폴더를 열고 기존 default.js 파일을 연 다음 이 파일에 다음 UI 요소를 추가합니다.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HttpClientGet</title>

    <!-- WinJS references - Windows -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- WinJS references - Phone -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- HttpClientGet references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/mainpage.js"></script>
</head>

<body>
    <div data-win-control="SampleInput">
        <p> Download the contents of a page and display it. </p>
        <p class="clear">
            <label for="inputAddress">URI Address:</label>
            <input type="text" id="inputAddress" value="https://www.contoso.com" />
        </p>
        <p>
            <button id="startButton">Start</button>
        </p>
    </div>
    <div data-win-control="SampleOutput">
        <p class="clear">
            <label for="statusText">Status:</label>
            <input type="text" id="statusText" value="" />
        </p>
        <textarea id="outputView"></textarea>
    </div>
</body>
</html>

단계 4: HttpClient 만들기

  • 먼저 Windows.Web.Http.HttpClient 개체를 만들고 사용자 에이전트 헤더를 추가합니다.

    기본적으로 HttpClient 개체는 사용자 에이전트 헤더를 HTTP 요청과 함께 웹 서비스로 보내지 않습니다. 일부 Microsoft 웹 서버를 포함하여 일부 HTTP 서버의 경우 클라이언트에서 보내는 HTTP 요청에 사용자 에이전트 헤더를 포함해야 합니다. 헤더가 없을 경우 HTTP 서버에서 오류가 반환됩니다. Windows.Web.Http.Headers 네임스페이스의 클래스를 사용하여 사용자 에이전트 헤더를 추가해야 합니다. 이러한 오류를 방지하려면 이 헤더를 HttpClient.DefaultRequestHeaders 속성에 추가합니다.

    js 폴더를 열고 새 mainpage.js 파일을 추가한 다음 이 파일에 다음 코드를 추가합니다.

    (function () {
    "use strict";

    var httpClient;
    var httpPromise;

    var page = WinJS.UI.Pages.define("/html/mainpage.html", {
        ready: function (element, options) {
            document.getElementById("startButton").addEventListener("click", start, false);

            httpClient = new Windows.Web.Http.HttpClient();

            // Add a user-agent header
            headers = httpClient.defaultRequestHeaders;

            // UserAgent is a HttpProductInfoHeaderValueCollection
            // A collection of HttpProductInfoHeaderValue items

            // The safe way to check a header value from the user is the TryParseAdd method
            // Since we know this header is okay, we use ParseAdd with will throw an exception
            // with a bad value 

            headers.userAgent.parseAdd("ie");
            headers.userAgent.parseAdd("Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)");
        }
    });
})();

    js 폴더와 default.js 파일을 열고 이 파일에 다음 코드를 추가합니다.

    (// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?LinkID=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                startButton.onclick = start;

            } else {
                startButton.onclick = start;
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

단계 5: GET 요청을 보내고 응답을 받습니다.

  • 시작 단추를 클릭하면 먼저 inputAddress에 지정된 URI가 유효한지 유효성을 검사합니다. 그런 다음 URI를 사용하여 GET 요청을 보내고 HTTP 서버로부터 응답을 받을 때까지 기다립니다.

    대부분의 작업은 시작 Button의 클릭 처리기에서 수행됩니다. 이 단추를 클릭하면 statusText 및 outputView UI 요소의 텍스트가 업데이트됩니다. 먼저 입력 URI 주소를 검사하여 사용자가 유효한 URI 주소를 전달했는지 확인합니다. 사용자로부터 유효한 URI를 받은 경우 앱이 지정된 URI로 HTTP GET 요청을 보내고 HTTP 응답을 기다립니다. 오류나 예외가 발생하면 결과가 statusText UI 요소에 표시됩니다. 오류가 발생하지 않으면 웹 서비스의 응답이 outputView UI 요소에 표시됩니다.

    잘못된 URI(Uniform Resource Identifier) 문자열이 Windows.Foundation.Uri 개체에 대한 생성자에 전달되면 예외가 발생합니다.

    JavaScript에는 문자열을 시도하고 URI로 구문 분석하는 메서드가 없습니다. 이 경우 이 예외를 catch하려면 URI가 생성되는 코드 주위에 try/catch 블록을 사용합니다.

    샘플에서는 URI의 HTTP 체계가 Windows.Web.Http.HttpClient에서 지원되는 유일한 체계인 HTTP 또는 HTTPS인지도 검사합니다.

    JavaScript에서 then 및 done 키워드를 사용할 경우 GET 요청을 보내고 응답을 비동기적으로 검색하는 코드는 이 작업을 동기적으로 완료하는 데 사용하는 코드와 비슷합니다.

    네트워크 오류(예: 연결 끊김, 연결 실패 및 HTTP 서버 오류)로 인한 예외는 언제든지 발생할 수 있습니다. 이러한 오류로 인해 예외가 발생합니다. 앱에서 처리되지 않은 예외로 인해 전체 앱이 런타임에 종료될 수 있습니다. 따라서 대부분의 비동기 네트워크 메서드를 호출할 때 예외를 처리하는 코드를 작성해야 합니다. 경우에 따라 예외가 발생하면 네트워크 방법을 다시 시도하여 문제를 해결하고 시도할 수 있습니다. 다른 경우 앱이 이전에 캐시된 데이터를 사용하여 네트워크 연결 없이 계속되도록 계획해야 합니다. 네트워크 예외 처리에 대한 자세한 내용은 네트워크 앱의 예외 처리를 참조하세요.

    웹 서버가 HTTP 오류 상태 코드를 반환했으며 요청에 대한 HttpResponse.StatusCode가 Successful 범위(200-299)에 없는 경우 HttpResponse.EnsureSuccessStatusCode 메서드에서 예외가 발생합니다. try/catch 블록을 사용하여 예외를 확인하고, 오류가 발생하는 경우 예외 메시지를 statusText UI 요소에 출력합니다.

    HttpResponse.Content 속성은 HTTP 응답의 콘텐츠를 나타냅니다. HttpClient.GetAsync(Uri) 메서드는 HTTP 콘텐츠를 문자열에 비동기 작업으로 읽습니다. 표시 목적을 위해 반환된 HTML 텍스트의 <br> 태그를 줄 바꿈으로 바꿉니다. 메서드가 성공하면 HttpResponse.StatusCode를 statusText UI 요소에 표시하고 웹 서비스에서 반환된 HttpResponse.Content를 outputView UI 요소에 표시합니다.

    js 폴더를 열고 mainpage.js 파일에 다음 코드를 추가합니다.

        function start()
    {

        var response = new Windows.Web.Http.HttpResponseMessage();

        var statusText = document.getElementById("statusText");
        var outputView = document.getElementById("outputView");

        // The value of 'inputAddress' is set by the user 
        // and is therefore untrusted input. 
        // If we can't create a valid absolute URI, 
        // We notify the user about the incorrect input.

        statusText.Text = "Testing URI is valid.";

        var uriString = document.getElementById("inputAddress").value.trim();
        if (!uriString) {
            return;
        }

        var resourceUri;
        try {
           resourceUri = new Windows.Foundation.Uri(uriString);
        }
        catch (Exception) {
            statusText.Text = "Invalid URI, please re-enter a valid URI.";
            return;
        }

        if (resourceUri.schemeName != "http" && resourceUri.schemeName != "https") {
            statusText.Text = "Only 'http' and 'https' schemes supported. Please re-enter URI";
            return;
        }

        var responseBodyAsText="";
        outputView.Text = "";
        statusText.Text = "Waiting for response ...";

        httpPromise = httpClient.getAsync(resourceUri).then(function (response) {
            outputStatus = response.statusCode + " " + response.reasonPhrase;

            response.EnsureSuccessStatusCode();

            response.content.readAsStringAsync().then(function (responseBodyAsText) {
            // Format the HTTP response to display better
            responseBodyAsText = responseBodyAsText.replace(/<br>/g, "\r\n");
            outputView.value = responseBodyAsText;
            return response;
        });
    )};

    httpPromise.done(function (response) {
        statusText.value = response.StatusCode + " " + response.ReasonPhrase + "\r\n";
    }, onError);

    function onError(error) {
        statusText.value = "Error = " + error.number + "  Message: " + error.message;
    }

})();

    Windows.Web.Http.HttpClient는 WinInet을 사용하여 HTTP 및 웹 서비스 요청을 보내고 응답을 받습니다. WinInet이 HTTP 연결 작업에 사용하는 기본 시간 제한 값은 60초입니다. HTTP 서버 또는 웹 서비스가 일시적으로 다운되었거나 방화벽에서 차단되었으며 서버가 Windows.Web.Http.HttpClient 요청에 응답하지 않거나 응답할 수 없는 경우 WinInet은 오류를 반환하여 앱에서 예외를 발생시키기 전에 기본값 60초 동안 기다립니다. HTTP 서버 이름에 대한 이름 쿼리에서 이름의 IP 주소를 여러 개 반환하는 경우 WinInet은 각각 실패하기까지 기본 시간 제한 60초를 사용하여 사이트에 대해 다른 많은 IP 주소를 시도합니다. HTTP 또는 웹 서비스 요청을 하는 앱은 WinInet에서 오류가 반환되어 예외가 발생하기까지 몇 분 정도 기다리고 여러 IP 주소를 시도할 수 있습니다. 이 동작은 사용자에게 앱 작동이 중지된 것처럼 보일 수 있습니다. WinInet에서 연결 후 보내기 및 받기 작업에 사용하는 기본 시간 제한은 30초입니다.

    앱의 응답성을 향상시키고 이러한 문제를 최소화하기 위해 앱을 개선하려면 Windows.Web.Http.HttpClient 작업에 더 짧은 시간 제한을 설정하여 작업이 기본 WinInet 설정이 아니라 이 시간 제한에서 더 빨리 실패하도록 합니다. 시간 제한 설정 방법에 대한 자세한 내용은 WinJS.xhr 또는 HttpClient를 사용하여 시간 제한 값 설정 및 소켓 작업에 시간 제한을 설정하는 방법을 참조하세요.

설명

이 항목에서는 Windows.Web.Http.HttpClient 클래스를 사용하여 GET 요청을 웹 서비스로 보내고 Windows.Web.Http.HttpResponseMessage 및 Windows.Web.Http.Headers 네임스페이스의 관련 클래스를 사용하여 응답을 검색하는 방법을 살펴보았습니다.

관련 항목

다른 리소스

웹 서비스에 연결

네트워크 앱에서 예외 처리

네트워크 접근 권한 값을 구성하는 방법

루프백을 사용하도록 설정하고 네트워크 격리를 디버그하는 방법

WinJS.xhr 또는 HttpClient를 사용하여 시간 제한 값 설정

참조

Windows.Foundation.Uri

Windows.Web.Http

Windows.Web.Http.Filters

Windows.Web.Http.Headers

샘플

HttpClient 샘플

웹 인증 샘플