HTML5 WebSocket 발표 자료

WebSocket

( )
/ MA / TI
@ohmyzany, http://zany.kr

웹 소켓이란 무엇인가?
TCP Socket 을 이용하여 양방향 통신(two-way communication)을
하기 위한 기법.

푸쉬 기술(PUSH Technology)을 일종.

아직 W3C 에 의해 표준이 제정 중.
W3C Editor's Draft - 27 July, 2010

W3C Working Draft - 22 December, 2009

최신 버전의 Chrome 이나 Safari 는 웹 소켓을 지원.

WebSocket - http://zany.kr (@ohmyzany) 2

웹 소켓이 왜 필요한가?
웹 소켓은 long-polling (Comet; Reverse AJAX) 을 대체.
long-polling (Comet; Reverse AJAX) 기술

클라이언트에서 한번 접속 후, Connection 이 끊기지 않고

서버 데이터가 바뀔 때마다 동일한 Connection 을 통해 데이터를 Push 해주
는 기술.

클라이언트는 지정된 타임 아웃 시간 동안만 접속을 유지

접속이 끊어지면 새로운 Connection 이 필요.


Ajax - Asynchronous JavaScript and XML


Long-polling (Comet; Reverse AJAX)


WebSocket W3C Editor's Draft
2010년 8월 10일 기준, WebSocket Interface

[Constructor(inDOMStringurl,inoptionalDOMStringprotocols)] ✓ 10 August, 2010 Editor’s Draft
[Constructor(inDOMStringurl,inoptionalDOMString[]protocols)]
interfaceWebSocket{ ✓ 붉은 색 부분은 Working Draft 에는 없는 사항.
readonlyattributeDOMStringurl;
✓ Working Draft : 22 December, 2009
//readystate
constunsignedshortCONNECTING=0;
constunsignedshortOPEN=1;
constunsignedshortCLOSING=2;
constunsignedshortCLOSED=3;
readonlyattributeunsignedshortreadyState;
readonlyattributeunsignedlongbufferedAmount;

//networking
attributeFunctiononopen;
attributeFunctiononmessage;
attributeFunctiononerror;
attributeFunctiononclose;
readonlyattributeDOMStringprotocol;
booleansend(inDOMStringdata);
voidclose();
};
WebSocketimplementsEventTarget;


WebSocket Interface
Interface 요약
생성자(Constructor)는 2개의 인자를 받음

접속할 URL

사용할 프로토콜 (문자열이나, 문자열의 배열) - Optional

non-empty ASCII string.

only characters in the range U+0021 to U+007E


WebSocket Interface
Websocket 처리 절차 - websocket() 생성자가 호출되면...
URL 인자로부터 host, port, resource name, secure 를 파싱

실패했을 경우, SYNTAX_ERR exception 을 throw 하고 종료.

일반적으로 80 포트 사용, 443 포트는 보안 접속시 사용.

포트가 막혀 있을 경우 SECURITY_ERR exception throw.

protocol 이 제약조건에 맞지 않는다면, SYNTAX_ERR exception 을
throw 하고 종료.

websocket 객체를 리턴 (객체가 생성되면 readyState 속성이
CONNECTING 값으로 설정된다)

넘어온 인자에 맞게 접속 (host, port, resource name, secure,
protocol)

WebSocket Interface
readyState Attribute
CONNECTING (0) : Connection 이 아직 Established 되지 않은 상태.

OPEN (1) : 웹 소켓이 Established 된 상태, 통신 가능.

CLOSING (2) : 접속이 끊어지고 있는 중.

CLOSED (3) : 접속이 완전히 끊어짐.


WebSocket Interface
send(DOMString data) method
데이터를 전송.

readyState 가 CONNECTING 일 경우, INVALID_STATE_ERR exception.

data 인자가 형식에 맞지 않은 경우, SYNTAX_ERR exception.


WebSocket Interface
close() method
readySate 속성값이 CLOSING, CLOSED 일 경우, do nothing.

접속이 Established 가 아닌 경우, readyState 값을 CLOSING 으로 변경.

접속 종료 동작이 아직 시작되지 않은 경우, readyState 속성값을
CLOSING 으로 변경.

이외의 경우, readyState 속성값을 CLOSING 으로 변경.


웹 소켓 서버의 종류
phpwebsockets
http://code.google.com/p/phpwebsockets/

jWebSocket ( java)
http://jwebsocket.org/

web-socket-ruby (ruby)
http://github.com/gimite/web-socket-ruby

Socket-IO-node (node.js)
http://github.com/LearnBoost/Socket.IO-node


jWebSocket
jWebSocket 특징
웹에서 고속으로 양방향 통신(bidirectional communication)을 하기 위
한 솔루션.

HTML5 기반의 스트리밍, 커뮤니케이션 어플리케이션 작성 지원.

Java/JavaScript 으로 제작.

기존의 XHR(Xml Http Request)과 Comet 서비스를 대체.


jWebSocket
jWebSocket 구성
jWebSocket Server (pure Java Based)

server-to-client (S2C) streaming solutions

server controlled (C2C) client-to-client-communication.

jWebSocket Client (pure JavaScript Based)

multiple subprotocols

an optional user, session and timeout-management.

No plug-ins required

jWebSocket FlashBridge

a Flash based WebSocket Wrapper (requires Flash plug-in)

jWebSocket
Infrastructure - Server


jWebSocket
Infrastructure - Client


jWebSocket
지원 브라우저

Browser Version Comment

6.0.x
✓ Chrome includes native WebSockets since 4.0.249.
Chrome 5.0.x
4.0.249+ ✓ Tested and verified by jWebSocket team 2010-02-28.

✓ Safari 5.x includes native WebSockets
5.x
Safari - tested and verified by jWebSocket team 2010-06-08.
4.x
✓ Safari 4.x does not yet provide the WebSocket class.

4.0b1 ✓ Firefox 3.7a6 and 4.0b1 now include native WebSockets
Firefox 3.7a6 - tested and verified by jWebSocket team 2010-07-14
3.0+ ✓ including new Security features (Sec-WebSocket-Key header processing)

Opera with 9+
✓ Tested and verified by jWebSocket team 2010-03-28.
FlashBridge 10+


jWebSocket
환경 구성 특징
설치 과정 필요없음.

Windows, Linux, Unix 모두 가능.

Prerequisites on the Server
Java Runtime Environment (JRE) 1.5

JAVA_HOME 환경 변수 : Java Home Directory.

JWEBSOCKET_HOME 환경 변수 : jWebSocket Home Directory.

Windows 환경에서는 java.exe 가 PATH 로 설정되어 있는 것을 권장.


jWebSocket
서버 환경 구성
서버 파일 다운로드 - jWebSocketServer-0.9.5.zip

임의의 디렉토리에 압축 해제

Symbolic Link - /usr/local/jWebSocketServer

JWEBSOCKET_HOME 환경 변수 등록 - .bashrc or .bash_profile

[root@zanyui-Mac-ProjWebSocket]#cpjWebSocketServer-0.9.5.zip/usr/local
[root@zanyui-Mac-ProjWebSocket]#cd/usr/local
[root@zanyui-Mac-ProjWebSocket]#unzipjWebSocketServer-0.9.5.zip
[root@zanyui-Mac-ProjWebSocket]#ln-s/usr/local/jWebSocket-0.9.5/jWebSocketServer


jWebSocket
서버 기동
아래 2개의 명령 중 하나 수행.

apache 웹 서버가 구동되어 있어야 한다.

$ apachectl start

java-jar$JWEBSOCKET_HOME/libs/jWebSocketServer-0.9.5.jar
java-jar$JWEBSOCKET_HOME/libs/jWebSocketServer-0.9.5.jarlogtarget=consoleloglevel=info


jWebSocket
클라이언트 예제
클라이언트 예제 파일 다운로드 - jWebSocketClient-0.9.5.zip

임의의 디렉토리에 압축 해제한 후, apache 웹 서버에서 가상 디렉토리
로 잡아주거나, ~/Sites/jWebSocketClient 와 같은 디렉토리에 압축 해
제하여 http://localhost/~user/jWebSocketClient 로 접속한다.

Apache Web Server 2.2.14 기준, 가상 디렉토리 잡아주는 방법
$vi/etc/apache2/httpd.conf
IfModulealias_module/IfModule사이에아래내용을추가
#ZanyAdd
Alias/jWebSocket/Volumes/MacData/Projects/websocket/jWebSocket

Directory/Volumes/MacData/Projects/websocket/jWebSocket
OptionsIndexesFollowSymLinksMultiViewsExecCGI
AllowOverrideNone
Orderallow,deny
Allowfromall
/Directory


시연 및 코드 리뷰
WebSocket Interface.

jWebSocket.


HTML5 WebSocket 발표 자료

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5 WebSocket 발표 자료

Ähnlich wie HTML5 WebSocket 발표 자료 (18)

HTML5 WebSocket 발표 자료