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

1. WebSocket

2. API

3. about

4. me
•장정환
•nundefined@nundefined.com
•http://nundefined.com
•@nundefined

5. 차례
•WebSocket
•WebSocket

6. API
•DEMO
•WebSocket

7. Library
•보안

8. WebSocket

9. WebSocket이란?
•하나의

10. TCP

11. 연결에서

12. 양방향

13. 통신

14. 채널
을

15. 제공하는

16. 웹

17. 기술
•Handshake시에

18. HTTP(S)를

19. 사용한다
는

20. 점을

21. 제외하면

22. HTTP(S)와는

23. 아무련

24.
관련이

25. 없음
•IETF

26. (Internet

27. Engineering

28. Task

29.
Force)

30. 에서

31. 표준화

32. WebSocket

33. API란?
•웹

34. 애플리케이션에서

35.
•WebSocket

36. 프로토콜을

37. 사용할

38. 수

39. 있도
록

40. 정의한

41.
•인터페이스
•W3C에서

42. 표준화

43. History
•2011년

44. WebSocket

45. Protocol

46.
(RFC6455)

47. 표준화
•2009년

48. WebSocket

49. API

50. 첫

51. 공개

52. 후
•현재

53. Candidate

54. Recommendation

55. 상
태
•상당히

56. 안정된

57. 스펙

58. 브라우저

59. 지원

60. 상황
http://caniuse.com/#feat=websockets
서버에서 렌더링하는 방식
안드로이드 기본 브라우저가 크롬 브라우저로 변경됨
WebSocket은 현존하는 최신 브라우저에서 대부분 사용 가능

61. 활용중인

62. 서비스
•Trello

63. (http://www.trello.com)

64. WebSocket

65. API

66. WebSocket

67. constructor
•WebSocket(url[,

68. protocol])
•url:

69. 연결할

70. URL
•protocol:

71. WebSocket

72. 연결시

73. 사용할

74.
subprotocol

75. WebSocket

76. interface
•url:

77. Constructor

78. 에서

79. 지정한

80. URL
•상태
•네트워킹
•메시징

81. 상태

82. interface
•상태값

83. (상수)
•CONNECTING

84. (0),

85. OPEN

86. (1)
•CLOSING

87. (2),

88. CLOSED

89. (3)
•readyState
•연결

90. 상태를

91. 위의

92. 상태값으로

93. 표현
•bufferedAmount
•send()로

94. 전송했으나

95. 아직

96. 네트워크로

97. 전송되
지

98. 않은

99. byte의

100. 수

101. 네트워킹

102. interface
•이벤트

103. 핸들러
•onopen,

104. onerror,

105. onclose
•속성
•extensions:

106. 연결

107. 후

108. 서버에서

109. 선택한

110. extension의

111.
값이

112. 지정됨
•protocol:

113. 연결

114. 후

115. 서버에서

116. 선택한

117. subprotocol
의

118. 값이

119. 지정됨
•메서드
•close([code[,

120. reason]])

121. 메시징

122. interface
•이벤트

123. 핸들러
•onmessage
•속성
•binaryType:

124. 데이터

125. 수신시

126. binary

127. 데이터의

128. 종류

129. (blog/
arraybuffer)
•메서드
•send(DOMString)
•send(Blob)
•send(ArrayBuffer)
•send(ArrayBufferView)

130. subprotocol
•Server와

131. client가

132. websocket으로

133. 연
결됐을

134. 때

135. 사용할

136. protocol
•Client에서

137. 사용

138. 가능한

139. protocol을

140. 제
시하면

141. server에서

142. 선택한다.

143. (선택하지

144.
않을

145. 수도

146. 있음)

147. DEMO

148. 데모
•소스

149. 코드
•https://github.com/inomies/WebSocket
•환경

150. 설정
•node.js

151. 설치
•npm

152. install

153. websocket
•실행
•node

154. server.js
•주소창에

155. http://localhost:8080/

156. 입력

157. !DOCTYPE html
html
head
titleWebSocket 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

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

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

160. GET ws://192.168.1.147:8080/ HTTP/1.1
Pragma: no-cache
Origin: http://localhost:8080
Host: 192.168.1.147:8080
User-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.36
Cache-Control: no-cache
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Extensions: x-webkit-deflate-frame
Sec-WebSocket-Key: /+ogz/Ujwnew+Mcc1UnOww==
Sec-WebSocket-Protocol: echo-protocol
Sec-WebSocket-Version: 13
REQUEST
지원 가능한 extension
지원 가능한 protocol
handshake가 이루어졌음을
알려주기 위한 키
접속할 host 정보
연결을 시도한 host 정보

161. HTTP/1.1 101 Switching Protocols
Origin: http://localhost:8080
Sec-WebSocket-Protocol: echo-protocol
Sec-WebSocket-Accept: RwqEmHN7JwZp7WwJR6NfLl4Fi/E=
Connection: Upgrade
Upgrade: websocket
RESPONSE
Sec-WebSocket-Key로부터 만들어지는 값
서버에서 선택한 protocol

162. WebSocket

163. Library

164. Server/Client

165. Library
•WebSocket-node
•데모에서

166. 사용한

167. 라이브러리(서버)
•Socket.IO
•유명

169. 사용하기

170. 편함
•Binary

171. 전송

172. 안됨

173. (base64?)
•기타

174. 등등

175. WebSocket

176. 보안

177. Ajax

178. vs

179. WebSocket
•Ajax
•Same

180. Origin

181. Policy
•Client에서

182. 접근

183. 가능한

184. 곳은

185. 제한적
•WebSocket
•아무

186. 곳이나

187. 연결

188. 가능
•서버에서

189. 신뢰할

190. 수

191. 있는

192. client인지

193. 확
인

194. Questions?

195. 감사합니다
nundefined@nundefined.com

196. 참고
• 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

197. WebSocket

198. 상태

199. 코드
•가능한

200. 값:

201. 1000,

202. 3000~4999
•0

203. ~

204. 999:

205. 미사용
•1000

206. ~

207. 2999:

208. 프로토콜에서

209. 사용
•3000

210. ~

211. 3999:

212. 라이브러리,

213. 프레임워
크,

214. 애플리케이션

215. 용
•4000

216. ~4999:

217. 사용

218. 불가

219. (private

220. use)