WebSocket

* WebSocket이란?

- WebSocket은 서버와 실시간으로 쌍방향 통신을 하기 위한 장치임.

- 통상 HTTP 프로토콜에서는 리퀘스트/리스폰스 모델로 통신을 수행하지만, WebSocket에서는 TCP/IP상의 독자적인 프로토콜을 통해 통신을 수행함.

- WebSocket은 드래프트75(hixie-75)판 이전과 드래프트76(ietf-hybi-00)판 이후의 사양과 프로토콜의 호환성이 없음.

- 웹 브라우저가 자원하고 있는 버전과 서버가 지원하는 버전이 일치하도록 해야 할 필요가 있음.

 

	IE	Firefox	Chrome	Safari	Opera
hixie-76/hybi-00			6	5.0.1	11(무효)※
hybi-07		6
hybi-10	7	14
RFC 6455	10	11	16

※ Opera에서는 기본값이 무효로 되어 있기 때문에 유효하게 하려면 설정이 필요함.

 

 

* JavaScript에 의한 클라이언트 지원 방법

- WebSocket 서버와 통신할 클라이언트를 지원하려면 서버의 URL을 인수로 지정하여 WebSocket 오브젝트를 인스턴스화해야 함.

 

var ws = new WebSocket("ws://example.com/ws.jsp");

                    서버의 URL은 'ws://' 또는 'wss://'로 시작함. 'ws://'는 WebSocket 프로토콜을, 'wss://'은 암호화된 WebSocket 프로토콜을 나타냄.

 

 

[데이터 송수신]

 

- 송신은 send(message) 메서드를, 수신은 onmessage 이벤트 핸들러를 사용함.

- 수신한 데이터는 수신 이벤트의 이벤트 인수 'data' 속성으로 추출할 수 있음.

- 모두 결과를 기다리지 않고 비동기적으로 처리됨.

 

ws.onmessage = function(event) {

var data = event.data;

/* 데이터의 수신 시의 처리 */

}

 

ws.onerror = function(event) {

/* 오류 처리 */

}

 

ws.send("송신 데이터");

 

 

[접속 해제 처리]

 

- WebSocket 통신은 비동기 쌍방향 통신이기 때문에 타임아웃이 될 것인지를 명시적으로 지시하지 않는 한 끊어지지 않음.

- 해제 처리에는 'close([code].[reason])' 메서드와 'onclose' 이벤트 핸들러를 이용해야 함.

- 'close'의 인수는 모두 생략 가능함.

 

we.onclose = function(event) {

if(event.wasClean) {

/* wasClean이 true이면 해제 처리가 정상적으로 완료된 것임. */

}

}

 

window.onunload = function(event) {

ws.close(4500, "이유");

서버와 약정한 해제 코드 

}

 

 

* 서브 프로토콜이란?

- 서브 프로토콜은 WebSocket 통신에서 주고받는 데이터의 종류나 형식 등 통신의 종류를 나타내는 것으로, 서브 프로토콜을 사용하여 처리를 나눔으로써 동일한 서버와 다른 종류의 데이터를 병행하여 주고받을 수 있음.

 

 

[서브 프로토콜을 사용한 분기 처리]

 

- 서브 프로토콜을 지정하려면 WebSocket 오브젝트를 인스턴스화할 때 생략 가능한 제2인수에 서브 프로토콜명을 지정해야 함.

- 서브 프로토콜명은 서버 측과 미리 정한 US-ASCII 범위의 임의의 문자열임.

 

// 여러 개의 후보를 저장한 서브 프로토콜의 배열을 생성

var protocols = ["chatA", "chatB"];

 

// 제2인수에 서브 프로토콜의 배열을 지정

var ws = new WebSocket("ws://example.com/ws", protocols);

 

// "file" 서브 프로토콜용의 클라이언트를 생성

var ws2 = new WebSocket("ws://example.com/ws", "file");

 

// 수신 이벤트의 핸들링

ws.onmessage = function(event) {

var protocol = event.target.protocol;        // 서버가 선택한 서브 프로토콜은 WebSocket 오브젝트의 protocol 속성에 저장됨.

/* 서브 프로토콜에 따라 처리를 나눔. */

}

 

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
WebSocket	X	O	△	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)