MessageWebSocket을 사용하여 연결하는 방법(HTML)

아티클
12/11/2015

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

이 항목에서는 Windows 런타임 앱에서 MessageWebSocket을 사용하여 전체 데이터 메시지를 보내고 받는 방법을 보여줍니다.

MessageWebSocket 클래스는 WebSocket 프로토콜의 메시지 기반 추상화를 제공합니다. MessageWebSocket을 사용하면 전체 WebSocket 메시지를 단일 작업으로 읽거나 씁니다. 반면에 StreamWebSocket을 사용하면 전체 메시지를 단일 작업으로 읽을 필요 없이 각 읽기 작업으로 메시지 섹션을 읽을 수 있습니다.

MessageWebSocket은 일반적으로 메시지가 너무 크지 않은 시나리오에서 사용됩니다. UTF-8과 이진 파일이 모두 지원됩니다. UTF-8 메시지의 경우 MessageWebSocket을 사용해야 합니다. StreamWebSocket만 이진 메시지를 지원하기 때문입니다.

사전 요구 사항

다음 예에서는 JavaScript를 사용하며 WebSocket 샘플을 기반으로 합니다. JavaScript를 사용하여 Windows 런타임 앱을 만드는 방법에 대한 일반적인 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 만들기를 참조하세요. 또한 JavaScript Promise는 이 항목에서 비동기 작업을 완료하는 데 사용됩니다. 이 프로그래밍 패턴에 대한 자세한 내용은 Promises를 사용하는 JavaScript의 비동기 프로그래밍을 참조하세요.

Windows 런타임 앱에서 네트워크에 대비하려면 프로젝트 Package.appxmanifest 파일에 필요한 네트워크 접근 권한 값을 설정해야 합니다. 앱이 인터넷의 원격 서비스에 클라이언트로 연결해야 하는 경우 인터넷(클라이언트) 접근 권한 값이 필요합니다. 앱이 홈 네트워크 또는 회사 네트워크의 원격 서비스에 클라이언트로 연결해야 하는 경우 홈/회사 네트워킹 접근 권한 값이 필요합니다.

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

자세한 내용은 네트워크 접근 권한 값을 설정하는 방법을 참조하세요.

MessageWebSocket을 사용하여 데이터 보내기

이 섹션의 코드는 새 MessageWebSocket을 만들고, WebSocket 서버에 연결하고, 데이터를 서버로 보냅니다. 연결이 성공적으로 설정되면 앱은 데이터가 수신되었음을 나타내는 MessageWebSocket.MessageReceived 이벤트가 호출되기를 기다립니다.

참고 사용자에게 메시지를 표시하거나 특정 이벤트가 발생했음(예: 연결이 설정된 경우 또는 오류가 발생한 경우)을 기록하려고 할 수 있습니다.

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

function startSend() {
   if (!messageWebSocket) {
      var webSocket = new Windows.Networking.Sockets.MessageWebSocket();
      // MessageWebSocket supports both utf8 and binary messages.
      // When utf8 is specified as the messageType, then the developer
      // promises to only send utf8-encoded data.
      webSocket.control.messageType = Windows.Networking.Sockets.SocketMessageType.utf8;
      // Set up callbacks
      webSocket.onmessagereceived = onMessageReceived;
      webSocket.onclosed = onClosed;

      var serverAddress = new Windows.Foundation.Uri(document.getElementById("serverAddress").value);

      try {
         webSocket.connectAsync(serverAddress).done(function () {
         messageWebSocket = webSocket;
         // The default DataWriter encoding is utf8.
         messageWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
         messageWriter.writeString(document.getElementById("inputField").value);
         messageWriter.storeAsync().done("", sendError);

      }, function (error) {
         // The connection failed; add your own code to log or display 
         // the error, or take a specific action.
         });
      } catch (error) {
         // An error occurred while trying to connect; add your own code to  
         // log or display the error, or take a specific action.
      }

   }
   else {
      // The connection already exists; go ahead and send the message.
      messageWriter.writeString(document.getElementById("inputField").value);
      messageWriter.storeAsync().done("", sendError);          
   }
}

MessageWebSocket.MessageReceived 이벤트에 콜백 등록

MessageWebSocket.MessageReceived 이벤트가 발생하면 등록된 콜백이 호출되고 MessageWebSocketMessageReceivedEventArgs에서 데이터를 받습니다.

다음 코드를 .js 파일에 추가합니다.

function onMessageReceived(args) {
   // The incoming message is already buffered.
   var dataReader = args.getDataReader();
   // Use the dataReader to read data from the received message
}

MessageWebSocket.Closed 이벤트에 콜백 등록

MessageWebSocket.Closed 이벤트가 발생하면 등록된 콜백이 호출되어 WebSocketClosedEventArgs에서 데이터를 받고 연결을 닫습니다.

다음 코드를 .js 파일에 추가합니다.

function onClosed(args) {
   // You can add code to log or display the code and reason
   // for the closure (stored in args.code and args.reason)
   if (messageWebSocket) {
      messageWebSocket.close();
   }
   messageWebSocket = null;
}

요약 및 다음 단계

이 자습서에서는 WebSocket 서버에 연결하는 방법 및 MessageWebSocket을 사용하여 데이터를 보내고 받는 방법에 대해 알아보았습니다.

WebSocket을 사용하여 데이터를 보내고 받는 방법을 설명하는 전체 샘플을 보려면 WebSocket 샘플을 참조하세요.