WebSocket API

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 W3C(World Wide Web 컨소시엄)의 WebSocket API 사양에 정의된 대로 WebSocket API 지원을 추가합니다. WebSockets 기술은 인터넷을 통한 양방향 통신을 위한 새로운 W3C JavaScript API 및 프로토콜을 제공합니다. 이 새로운 프로토콜을 사용하면 고정된 데이터 형식으로 더 쉽게 직접 작업할 수 있습니다. 이 프로토콜은 더 느린 문서 기반 HTTP 프로토콜을 무시합니다.

현재의 HTTP 표준 프로토콜은 서버에서 문서를 요청하고 웹 페이지를 표시하기 전에 문서가 전송되기를 기다려야 하기 때문에 속도가 느립니다. WebSockets를 사용하면 텍스트, 이진 배열 또는 BLOB를 통해 데이터를 즉시 주고받을 수 있습니다.

WebSocket API는 단순하고 복잡하지 않으며 코드가 거의 필요하지 않습니다. 느린 대기 시간 양방향 데이터 교환을 손쉽게 활용하여 온라인 게임, 소셜 네트워크 즉시 알림, 재고 및 날씨 정보 실시간 표시, 기타 적시 데이터를 더 빨리 만들 수 있습니다.

WebSockets 구현

다음 단계를 수행하면 이 새로운 데이터 교환 기술을 간단하게 구현할 수 있습니다.

1. WebSocket 프로토콜을 구현하는 클라이언트 브라우저를 사용합니다.
2. 클라이언트 websocket을 만드는 웹 페이지에서 코드를 작성합니다.
3. Websocket을 통해 클라이언트 요청에 응답하는 웹 서버에서 코드를 작성합니다.

WebSocket 클라이언트 사용

Internet Explorer 10에서는 다른 주요 브라우저와 마찬가지로 WebSocket 프로토콜을 구현합니다. caniuse.com 웹 사이트에서 브라우저 지원의 현재 상태를 확인할 수 있습니다.

IETF 도구 웹 사이트에 정의된 WebSocket 프로토콜은 다음과 같은 새로운 URL 체계를 사용합니다.


ws://
wss://

WebSocket 클라이언트 코드 작성

웹 페이지 코드는 다음 작업을 해야 합니다.

1. WebSocket을 초기화하고 서버에 연결합니다.
2. 테스트를 통해 연결에 성공했는지 확인합니다.
3. 데이터를 보내고 받습니다.

다음 코드는 WebSocket URL을 정의하는 일반적인 코드를 보여 줍니다.


var host = 'ws://example.microsoft.com';

다음 코드는 WebSocket에 연결하고 테스트를 통해 연결에 성공했는지 확인하는 방법을 보여 줍니다.


 var host = "ws://sample-host/echo";
 try {
    socket = new WebSocket(host);

    socket.onopen = function (openEvent) {
       document.getElementById("serverStatus").innerHTML = 
          'WebSocket Status:: Socket Open';
    };

 socket.onmessage = function (messageEvent) {

    if (messageEvent.data instanceof Blob) {
    var destinationCanvas = document.getElementById('destination');
    var destinationContext = destinationCanvas.getContext('2d');
    var image = new Image();
    image.onload = function () {
       destinationContext.clearRect(0, 0, 
          destinationCanvas.width, destinationCanvas.height);
       destinationContext.drawImage(image, 0, 0);
    }
    image.src = URL.createObjectURL(messageEvent.data);
 } else {
    document.getElementById("serverResponse").innerHTML = 
       'Server Reply:: ' + messageEvent.data;
    }
 };

 socket.onerror = function (errorEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Error was reported';
    };

 socket.onclose = function (closeEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Socket Closed';
    };
 }
  catch (exception) { if (window.console) console.log(exception); }
 }

 function sendTextMessage() {

    if (socket.readyState != WebSocket.OPEN) return;

    var e = document.getElementById("textmessage");
    socket.send(e.value);
 }

 function sendBinaryMessage() {
    if (socket.readyState != WebSocket.OPEN) return;

    var sourceCanvas = document.getElementById('source');

    socket.send(sourceCanvas.msToBlob());
 }    


이전 코드에서는 serverStatus, destination, serverResponse, textmessageserverData가 ID를 가진 요소로 웹 페이지에 포함되어 있다고 가정합니다. F12 개발자 도구가 실행 중인 경우 캐시 결과가 콘솔 창에 표시됩니다. 텍스트 메시지 데이터를 보내려면 다음 코드 형식을 사용합니다.


var e = document.getElementById("msgText");
socket.send(e.value);

이전 코드 예제에서는 ID를 가진 웹 페이지의 msgText 요소에 보내려는 메시지 텍스트가 있다고 가정합니다. 마찬가지로, onmessage 이벤트를 사용하여 새 메시지를 검색하거나 send 메서드를 사용하여 메시지를 서버로 보낼 수 있습니다. send 메서드를 사용하여 텍스트, 이진 배열 또는 BLOB 데이터를 보낼 수 있습니다.

WebSocket 서버 코드 작성

소켓을 처리하는 서버 코드는 임의의 서버 언어로 작성할 수 있습니다. 선택한 언어에 관계없이 WebSocket 요청을 수락하고 적절하게 처리하는 코드를 작성해야 합니다.

WebSocket 프로그래밍

WebSocket은 WebSocket 프로그래밍에 사용할 수 있는 개체, 메서드 및 속성 집합을 제공합니다.

이름유형설명
WebSocket 개체원격 호스트에 대한 양방향 채널을 제공합니다.
close 메서드WebSocket을 닫습니다.
send 메서드WebSocket을 사용하여 데이터를 서버로 보냅니다.
binaryType 속성 onmessage에 수신되는 이진 데이터 형식입니다.
bufferedAmount 속성send를 사용하여 대기 중인 데이터 바이트 수입니다.
extensions 속성서버가 선택한 확장을 보고합니다.
onclose 속성소켓을 닫을 때 호출되는 이벤트 처리기입니다.
onerror 속성오류가 있을 때 호출되는 이벤트 처리기입니다.
onmessage 속성메시지가 수신되었음을 알리는 이벤트 처리기입니다.
onopen 속성WebSocket이 연결된 경우 호출되는 이벤트 처리기입니다.
protocol 속성서버가 선택한 프로토콜을 보고합니다.
readyState 속성WebSocket 연결 상태를 보고합니다.
url 속성소켓의 현재 URL을 보고합니다.

 

API 참조

WebSocket API

IEBlog 게시물

Windows의 WebSockets
사이트 준비 WebSockets

사양

WebSocket API

관련 항목

HTML5 WebSockets를 사용하여 실시간 웹앱 빌드
IIS, ASP.NET 및 WCF와 함께 WebSockets를 사용하여 실시간 웹앱 빌드
Windows 런타임 소켓 앱 빌드
Windows 8에서 WebSockets 시작
System.Net.WebSockets에 대해 알아보기: 간단한 ASP.NET 에코 서버
WebSockets: 개발자를 위한 안정성 및 준비

 

 

표시:
© 2015 Microsoft