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

아티클
12/11/2015

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

이 항목에서는 Windows 런타임 앱에서 StreamWebSocket을 사용하여 데이터 스트림을 보내고 받는 방법을 보여줍니다.

StreamWebSocket 클래스는 메시지 기반 WebSocket 프로토콜의 스트림 기반 추상화를 제공합니다. 이 기능은 클라이언트와 서버 간에 큰 파일(예: 사진 또는 동영상)을 전송할 필요가 없는 시나리오에서 유용합니다. 서버에서 WebSocket 프로토콜을 지원해야 합니다. StreamWebSocket을 사용하면 MessageWebSocket과 같이 전체 메시지를 단일 작업으로 읽을 필요 없이 각 읽기 작업으로 메시지 섹션을 읽을 수 있습니다.

StreamWebSocket 클래스만 이진 메시지를 지원합니다. UTF-8 메시지의 경우 MessageWebSocket을 사용해야 합니다.

사전 요구 사항

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

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

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

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

지침

1. StreamWebSocket 개체를 만들어 데이터 보내고 받기

이 섹션의 코드는 새 StreamWebSocket을 만들고, WebSocket 서버에 연결하고, 데이터를 서버로 보내고, 응답을 수신 대기합니다.

먼저 사용할 서버 URI가 유효한지 유효성을 검사합니다. 그런 다음 URI를 사용하여 WebSocket 서버에 연결하고 서버에서 응답을 받을 때까지 기다립니다.

먼저 입력 URI 주소를 검사하여 사용자가 유효한 URI 주소를 전달했는지 확인합니다. 앱이 이미 WebSocket 서버의 URI를 알고 있으면 이 단계가 필요하지 않습니다.

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

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

샘플에서는 URI의 HTTP 체계가 StreamWebSocket에서 지원되는 유일한 체계인 WS 또는 WSS인지도 검사합니다.

사용자가 입력한 URI가 유효하면 앱은 WebSocket 서버에 연결되고 데이터를 보내고 받을 수 있습니다.

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

참고 사용자에게 메시지를 표시하거나 특정 이벤트가 발생했음(예: 연결이 설정된 경우 또는 오류가 발생한 경우)을 로그에 쓰려고 할 수 있습니다. 샘플에서는 앱에 대해 구현해야 하는 displayStatus 함수를 호출합니다.

참고 쓰기 및 읽기 작업을 수행하기 위한 writeOutgoing() 및 readIncoming() 함수는 다음 단계에서 정의합니다.

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


// Define some variables we will use
var streamWebSocket;
var dataWriter;
var dataReader;
// The data to send
var data = "Hello World";
var countOfDataSent;
var countOfDataReceived;

function start() {
   if (streamWebSocket) {
      // The WebSocket is already running. Go ahead and immediately return,  
      // or display a message that indicates that it is running.
      return;
   }

   var webSocket = new Windows.Networking.Sockets.StreamWebSocket();
   webSocket.onclosed = onClosed;

   // WebSocket server to test connections
   // If the scheme is wss:, then the server will
   // echo back what it receives
   var uriString = "wss://echo.websocket.org";

   // We might get the uriString from the user so
   // we need to check that we have a valid URI
   var serverUri;
   try {
      serverUri = new Windows.Foundation.Uri(uriString);
      }
   catch (Exception) {
      displayStatus("Invalid URI, please re-enter a valid URI.");
      return;
   }

   if (serverUri.schemeName != "ws" && serverUri.schemeName != "wss") {
      displayStatus("Only 'ws' and 'wss' schemes supported. Please re-enter URI");
      return;
   }

   // Asynchronous networking methods can throw execptions
   webSocket.connectAsync(uri).done(function () {
      diaplayStatus("Connected");

      streamWebSocket = webSocket;
      dataWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
      dataReader = new Windows.Storage.Streams.DataReader(webSocket.inputStream);
      // When buffering, return as soon as any data is available.
      dataReader.inputStreamOptions = Windows.Storage.Streams.InputStreamOptions.partial;
      countOfDataSent = 0;
      countOfDataReceived = 0;

      // Continuously send data to the server
      writeOutgoing();

      // Continuously listen for a response
      readIncoming();

   }, function (error) {
      var errorStatus = Windows.Networking.Sockets.WebSocketError.getStatus(error.number);
      if (errorStatus === Windows.Web.WebErrorStatus.cannotConnect ||
         errorStatus === Windows.Web.WebErrorStatus.notFound ||
         errorStatus === Windows.Web.WebErrorStatus.requestTimeout) {
         displayStatus("Cannot connect to the server");
      } else {
         displayStatus("Failed to connect: " + getError(error));
      }
   });
}

2. 나가는 데이터 보내기

이 섹션의 코드는 WebSocket 개체가 서버로 데이터를 보내도록 합니다.

참고 다음 단계에서는 writeError() 함수를 정의합니다.

.js 파일에 다음 코드를 추가하여 writeOutgoing() 함수를 정의합니다.

function writeOutgoing() {
   try {
      var size = dataWriter.measureString(data);
      countOfDataSent += size;

      dataWriter.writeString(data);
      dataWriter.storeAsync().done(function () {
         // Add a 1 second delay so the user can see what's going on.
         setTimeout(writeOutgoing, 1000);
      }, writeError);
   }
   catch (error) {
      displayStatus("Sync write error: " + getError(error));
   }
}

3. 들어오는 데이터 읽기

이 섹션의 코드는 WebSocket 개체가 서버에서 데이터를 읽도록 합니다.

참고 다음 단계에서는 readError() 함수를 정의합니다.

.js 파일에 다음 코드를 추가하여 readIncoming() 함수를 정의합니다.


function readIncoming(args) {
   // Buffer as much data as you require for your protocol.
   dataReader.loadAsync(100).done(function (sizeBytesRead) {
      countOfDataReceived += sizeBytesRead;

      var incomingBytes = new Array(sizeBytesRead);
      dataReader.readBytes(incomingBytes);

      // Do something with the data.
      // Alternatively you can use DataReader to read out individual booleans,
      // ints, strings, etc.

      // Start another read.
      readIncoming();
   }, readError);
}

4. 오류 처리 코드 추가

따라서 대부분의 비동기 네트워크 메서드를 호출할 때 예외를 처리하는 코드를 작성해야 합니다. 예외 처리기는 예외의 원인에 대해 보다 자세한 정보를 검색하므로 오류를 더 잘 이해하고 적절한 의사 결정을 내릴 수 있습니다. 자세한 내용은 네트워크 앱에서 예외를 처리하는 방법을 참조하세요.

.js 파일에 다음 코드를 추가하여 각각 쓰기 및 읽기 오류를 기록하거나 다른 조치를 취하는 writeError() 및 readError() 함수를 정의합니다. 사용하는 특정 구현이 다를 수 있습니다.
```
function writeError(error) {
   // Add your code to handle write errors.
}

function readError(error) {
   // Add your code to handle read errors.
}
```

5. StreamWebSocket.Closed 이벤트에 콜백 등록

StreamWebSocket.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 (streamWebSocket) {
      streamWebSocket.close();
   }
   streamWebSocket = null;
}

요약 및 다음 단계

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

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