Web Socket API

WebSocket�� API

about�� me

•장정환

•[email protected]

•http://nundefined.com

•@nundefined

차례

•WebSocket

•WebSocket�� API

•DEMO

•WebSocket�� Library

•보안

WebSocket

WebSocket이란?

•하나의�� TCP�� 연결에서�� 양방향�� 통신�� 채널을�� 제공하는�� 웹�� 기술

•Handshake시에�� HTTP(S)를�� 사용한다는�� 점을�� 제외하면�� HTTP(S)와는�� 아무련�� 관련이�� 없음

•IETF�� (Internet�� Engineering�� Task�� Force)�� 에서�� 표준화

WebSocket�� API란?

•웹�� 애플리케이션에서��

•WebSocket�� 프로토콜을�� 사용할�� 수�� 있도록�� 정의한��

•인터페이스

•W3C에서�� 표준화

History

•2011년�� WebSocket�� Protocol�� (RFC6455)�� 표준화

•2009년�� WebSocket�� API�� 첫�� 공개�� 후

•현재�� Candidate�� Recommendation�� 상태

•상당히�� 안정된�� 스펙

브라우저�� 지원�� 상황http://caniuse.com/#feat=websockets

서버에서 렌더링하는 방식

안드로이드 기본 브라우저가 크롬 브라우저로 변경됨

WebSocket은 현존하는 최신 브라우저에서 대부분 사용 가능

http://caniuse.com/#feat=websockets

http://caniuse.com/#feat=websockets

활용중인�� 서비스

•Trello�� (http://www.trello.com)

http://www.trello.com

http://www.trello.com

WebSocket�� API

WebSocket�� constructor

•WebSocket(url[,�� protocol])

•url:�� 연결할�� URL

•protocol:�� WebSocket�� 연결시�� 사용할�� subprotocol

WebSocket�� interface

•url:�� Constructor�� 에서�� 지정한�� URL

•상태

•네트워킹

•메시징

상태�� interface

•상태값�� (상수)

•CONNECTING�� (0),�� OPEN�� (1)

•CLOSING�� (2),�� CLOSED�� (3)

•readyState

•연결�� 상태를�� 위의�� 상태값으로�� 표현

•bufferedAmount

•send()로�� 전송했으나�� 아직�� 네트워크로�� 전송되지�� 않은�� byte의�� 수

네트워킹�� interface

•이벤트�� 핸들러

•onopen,�� onerror,�� onclose

•속성

•extensions:�� 연결�� 후�� 서버에서�� 선택한�� extension의�� 값이�� 지정됨

•protocol:�� 연결�� 후�� 서버에서�� 선택한�� subprotocol의�� 값이�� 지정됨

•메서드

•close([code[,�� reason]])

메시징�� interface

•이벤트�� 핸들러

•onmessage

•속성

•binaryType:�� 데이터�� 수신시�� binary�� 데이터의�� 종류�� (blog/arraybuffer)

•메서드

•send(DOMString)

•send(Blob)

•send(ArrayBuffer)

•send(ArrayBufferView)

subprotocol

•Server와�� client가�� websocket으로�� 연결됐을�� 때�� 사용할�� protocol

•Client에서�� 사용�� 가능한�� protocol을�� 제시하면�� server에서�� 선택한다.�� (선택하지�� 않을�� 수도�� 있음)

DEMO

데모

•소스�� 코드

•https://github.com/inomies/WebSocket

•환경�� 설정

•node.js�� 설치

•npm�� install�� websocket

•실행

•node�� server.js

•주소창에�� http://localhost:8080/�� 입력

https://github.com/inomies/WebSocket

https://github.com/inomies/WebSocket

http://localhost:8080

http://localhost:8080

<!DOCTYPE html><html><head> <title>WebSocket Sample</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script></head><body>

<div id="output" style="width: 400px; height: 300px; border: 1px solid #000; overflow: auto;"></div>

<div> <input type="button" id="connect" value="connect" /> <input type="button" id="close" value="close" /> <input type="button" id="values" value="values" /></div><div> <input type="text" size="40" id="message" value="메시지를 입력해주세요." /> <input type="button" id="send" value="send" /></div>

</body></html>

var seq = 0;var getSequence = function () { return seq++;}

var ws = null;

function initWebSocket() { // WebSocket이 연결됐을 때 호출된다. ws.onopen = function () { $('<div>').html('[' + getSequence() + '] open').appendTo('#output'); };

// WebSocket이 닫혔을 때 호출된다. ws.onclose = function () { $('<div>').html('[' + getSequence() + '] close').appendTo('#output'); };

// WebSocket 연결에서 에러가 발생했을 때 호출된다. ws.onerror = function () { $('<div>').html('[' + getSequence() + '] error').appendTo('#output'); };

// 메시지를 수신하면 호출된다. ws.onmessage = function (event) { $('<div>').html('[' + getSequence() + '] message: ' + event.data).appendTo('#output'); };}

$('#connect').on('click', function (e){ // connect 버튼을 클릭하면 WebSocket을 통해 서버와 연결한다. ws = new WebSocket('ws://localhost:8080', 'echo-protocol');

// WebSocket의 이벤트 핸들러를 등록한다. initWebSocket();});

// WebSocket의 연결을 종료한다.$('#close').on('click', function (e){ ws.close();});

// 여러 변 값을 출력한다.$('#values').on('click', function (e){ var readystate = "아직 WebSocket이 생성되지 않았습니다.";

if(ws){ readystate = ws.readyState; }

$('<div>').html('[' + getSequence() + '] readyState: ' + readystate).appendTo('#output');});

// text 상자의 내용을 읽어 서버로 전송한다.$('#send').on('click', function (e){ var message = $('#message').val(); $('<div>').html('[' + getSequence() + '] ' + message).appendTo('#output'); ws.send(message);});

GET ws://192.168.1.147:8080/ HTTP/1.1Pragma: no-cacheOrigin: http://localhost:8080Host: 192.168.1.147:8080User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36Cache-Control: no-cacheUpgrade: websocketConnection: UpgradeSec-WebSocket-Extensions: x-webkit-deflate-frameSec-WebSocket-Key: /+ogz/Ujwnew+Mcc1UnOww==Sec-WebSocket-Protocol: echo-protocolSec-WebSocket-Version: 13

REQUEST

지원 가능한 extension

지원 가능한 protocol

handshake가 이루어졌음을알려주기 위한 키

접속할 host 정보연결을 시도한 host 정보

HTTP/1.1 101 Switching ProtocolsOrigin: http://localhost:8080Sec-WebSocket-Protocol: echo-protocolSec-WebSocket-Accept: RwqEmHN7JwZp7WwJR6NfLl4Fi/E=Connection: UpgradeUpgrade: websocket

RESPONSE

Sec-WebSocket-Key로부터 만들어지는 값

서버에서 선택한 protocol

WebSocket�� Library

Server/Client�� Library

•WebSocket-node

•데모에서�� 사용한�� 라이브러리(서버)

•Socket.IO

•유명�� &�� 사용하기�� 편함

•Binary�� 전송�� 안됨�� (base64?)

•기타�� 등등

WebSocket�� 보안

Ajax�� vs�� WebSocket

•Ajax

•Same�� Origin�� Policy

•Client에서�� 접근�� 가능한�� 곳은�� 제한적

•WebSocket

•아무�� 곳이나�� 연결�� 가능

•서버에서�� 신뢰할�� 수�� 있는�� client인지�� 확인

Questions?

감사합니다[email protected]

참고

• http://www.w3.org/TR/websockets/

• http://tools.ietf.org/html/rfc6455

• http://en.wikipedia.org/wiki/WebSocket

• http://media.blackhat.com/bh-us-12/Briefings/Shekyan/BH_US_12_Shekyan_Toukharian_Hacking_Websocket_Slides.pdf

WebSocket�� 상태�� 코드

•가능한�� 값:�� 1000,�� 3000~4999

•0�� ~�� 999:�� 미사용

•1000�� ~�� 2999:�� 프로토콜에서�� 사용

•3000�� ~�� 3999:�� 라이브러리,�� 프레임워크,�� 애플리케이션�� 용

•4000�� ~4999:�� 사용�� 불가�� (private�� use)

Web Socket API

Technology