web socket api

31
WebSocket API

Upload: jeonghwan-jang

Post on 22-Jun-2015

1.538 views

Category:

Technology


2 download

DESCRIPTION

Slide for JSLounge 6th seminar. (Korean Only) This slide has introduction to WebSocket API and sample code from websocket-node.

TRANSCRIPT

Page 1: Web Socket API

WebSocket����������� ������������������  API

Page 2: Web Socket API

about����������� ������������������  me

•장정환

[email protected]

•http://nundefined.com

•@nundefined

Page 3: Web Socket API

차례

•WebSocket

•WebSocket����������� ������������������  API

•DEMO

•WebSocket����������� ������������������  Library

•보안

Page 4: Web Socket API

WebSocket

Page 5: Web Socket API

WebSocket이란?

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

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

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

Page 6: Web Socket API

WebSocket����������� ������������������  API란?

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

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

•인터페이스

•W3C에서����������� ������������������  표준화

Page 7: Web Socket API

History

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

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

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

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

Page 8: Web Socket API

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

서버에서 렌더링하는 방식

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

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

Page 9: Web Socket API

활용중인����������� ������������������  서비스

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

Page 10: Web Socket API

WebSocket����������� ������������������  API

Page 11: Web Socket API

WebSocket����������� ������������������  constructor

•WebSocket(url[,����������� ������������������  protocol])

•url:����������� ������������������  연결할����������� ������������������  URL

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

Page 12: Web Socket API

WebSocket����������� ������������������  interface

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

•상태

•네트워킹

•메시징

Page 13: Web Socket API

상태����������� ������������������  interface

•상태값����������� ������������������  (상수)

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

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

•readyState

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

•bufferedAmount

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

Page 14: Web Socket API

네트워킹����������� ������������������  interface

•이벤트����������� ������������������  핸들러

•onopen,����������� ������������������  onerror,����������� ������������������  onclose

•속성

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

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

•메서드

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

Page 15: Web Socket API

메시징����������� ������������������  interface

•이벤트����������� ������������������  핸들러

•onmessage

•속성

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

•메서드

•send(DOMString)

•send(Blob)

•send(ArrayBuffer)

•send(ArrayBufferView)

Page 16: Web Socket API

subprotocol

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

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

Page 17: Web Socket API

DEMO

Page 18: Web Socket API

데모

•소스����������� ������������������  코드

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

•환경����������� ������������������  설정

•node.js����������� ������������������  설치

•npm����������� ������������������  install����������� ������������������  websocket

•실행

•node����������� ������������������  server.js

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

Page 19: Web Socket API

<!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>

Page 20: Web Socket API

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'); };}

Page 21: Web Socket API

$('#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);});

Page 22: Web Socket API

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 정보

Page 23: Web Socket API

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

Page 24: Web Socket API

WebSocket����������� ������������������  Library

Page 25: Web Socket API

Server/Client����������� ������������������  Library

•WebSocket-node

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

•Socket.IO

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

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

•기타����������� ������������������  등등

Page 26: Web Socket API

WebSocket����������� ������������������  보안

Page 27: Web Socket API

Ajax����������� ������������������  vs����������� ������������������  WebSocket

•Ajax

•Same����������� ������������������  Origin����������� ������������������  Policy

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

•WebSocket

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

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

Page 28: Web Socket API

Questions?

Page 29: Web Socket API

감사합니다[email protected]

Page 30: Web Socket API

참고

• 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

Page 31: Web Socket API

WebSocket����������� ������������������  상태����������� ������������������  코드

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

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

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

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

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