web socket api
DESCRIPTION
Slide for JSLounge 6th seminar. (Korean Only) This slide has introduction to WebSocket API and sample code from websocket-node.TRANSCRIPT
WebSocket����������� ������������������ API
차례
•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은 현존하는 최신 브라우저에서 대부분 사용 가능
활용중인����������� ������������������ 서비스
•Trello����������� ������������������ (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/����������� ������������������ 입력
<!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)