1. 실시간

2. 웹을

3. 위한

4. Comet과

5. Soc
ket.io

6. 살펴보기

7.
심상민

9. 발표자

11. 여러분은?

12.
유형A

13.
앞에만

14.
언제

15. 끝나요?...

16.
들으러

17. 왔어요...

19. 여러분은?

20.
유형B

21.
예제만

22. 해봤어요

23.
책에서

24. 봤어요

26. 여러분은?

27.
유형C

28.
못하는게

29. 없어요

31. 그래서

33. 두마리

34. 토끼

35. 잡기

36.
유형A

37. 유형B

38. 유형C

39.
• 쉽게

40. 설명

41. • 사례

42. • 성능

43.
• 코드

44. • 모바일

45.
• 원리

46.
• 팁

48. 실시간

49. 웹?

50.
‫מנקודת מבט אחרת, באינטרנט בזמן אמת כולל ביצירת‬
True-realtime

51. web

52. (an

53. alternate

54. model)

55.
From

56. another

57. point

58. of

59. view,

60. the

61. real-time

62. web

63. consists

64. in

65. making

66. the

67. client

68. interface

69. (or

70. the

71. web

72.
‫לתק‬or

73. the

74. web

75. layer)

76. of

77. a‫או‬eb

78. application,

79. or

80. a‫ או שכבת האינטרנט( של‬ontinuously

81. w‫לצד‬he

82. ‫לקוח‬
side;

83.
,‫

84. באתר האינטרנט‬w ,‫

85. יישום אינטרנט‬web

86. site,

87. to

88. communicate

89. c ,‫ האינטרנט‬ith

90. t ‫)או‬
‫שר ב‬
corresponding

91. real-time

92. server,

93. during

94. every

95. user

96. connection.

97. As

98. a

99. fast

100. pic

101. of

102. the

103. client/server

104. mo
del,

105. imagine

106. each

107. c ‫ בזמן אמת המקבילה, במהלך כל חיבור המשתמש. כמו תמונה‬ts

108. obj
‫ מהיר של מודל ש‬lient

109. object

110. (each

111. web

112. module

113. of

114. the

115. web

116. GUI

117. of

118. an

119. application)

120. having

121. i‫ף עם השרת‬
ect

122. class

123. alive

124. as

125. a

126. sub

127. process

128. (of

129. its

130. user

131. session)

132. in

133. the

134. server

135. environment.

136. In

137. this

138. scenario,

139. the

140.
‫רת‬
web

141. is

142. considered

143. as

144. the

145. human

146. entrance

147. (interface)

148. to

149. the

150. real-time

151. environment:

152. at

153. each

154. conne
‫ באינטרנט הבקשה( שיש בכיתה‬one,

155. corresponds

156. a

157. different

158. front-end

159. web

160. a‫כל אובייקט‬h‫, לדמיין‬
cted

161. web

162. URL,

163. or

164. Internet

165. real-time

166. z GUI-‫ הלקוח )כל מודול האינטרנט של ה‬pplication.

167. T
‫האוב‬
e

168. real-time

169. server

170. acts

171. as

172. a

173. logic

174. network

175. operating

176. system

177. for

178. the

179. programmable

180. array

181. of

182. applicat
‫ נחשבת הכ‬the

183. array

184. of

185. ,‫ה בחיים כתהליך קטן )מושב למשתמש( בסביבת השרת. בתרחיש זה‬
ions;

186. handles

187. ‫ האינטרנט‬connected

188. users

189. for

190. each

191. application;

192. attends

193. for

194. connections

195. from

196. real-
world

197. appliances

198. and

199. second

200. level

201. real-time

202. servers.

203. Applications

204. behaviours

205. and

206. the

207. intercommu
‫ניס‬
nication

208. procedures

209. between

210. online

211. services

212. or

213. applications,

214. online

215. users,

216. and

217. connected

218. devices

219.
‫באי‬ppliances,

220. are

221. settled

222. in

223. the

224. corresponding

225. s‫לסביבה בזמן אמת: בכל אזור מחוברים‬i(‫שי )ממשק‬
or

226. a ‫ בזמן אמת כתובת אתר האינטרנט, או‬ource

227. code

228. of

229. each

230. real-time

231. service

232. written

233. n

234. the
‫נט‬

235. real-time-interpreted

236. programming

237. language

238. of

239. the

240. centric

241. server.[1]

243.
As

244. opposite

245. to

246. previous

247. s ‫ חזיתי יישום אינטרנט. בזמן אמת פעולות שרת כמו מערכת‬rip
‫ההפעלה ברשת לוגיק‬cenario,

248. real-time

249. web

250. is

251. exactly

252. soft

253. real-time

254. computing:

255. the

256. round

257. t‫תאים אחר‬
‫ה‬

258. of

259. a

260. data

261. ping-pong

262. signal

263. from

264. the

265. real-time

266. server

267. to

268. the

269. client

270. must

271. take

272. about

273. 1s

274. to

275. be

276. consid
ered

277. real-time

278. and

279. not

280. to

281. be

282. annoying

283. for

284. ‫המחוברים‬users)

285. during

286. their

287. connections.[2]

288. About

289. th‫לתכנות‬
‫ עבור כל יישום, לומד לחיבורים בעול‬humans

290. (or

291. ‫יישומים, מטפל מערך של משתמשים‬
e

292. dispute

293. between

294. social

295. web

296. and

297. real-time

298. web,

299. we

300. can

301. say

302. real-time

303. web

304. is

305. social

306. by

307. default

308. an
‫ה‬it

309. is

310. not

311. true

312. the

313. contrary

314. (WEB-r

315. comes

316. before

317. Web

318. 2.0).

319. The

320. WEB-r

321. model

322. is

323. called

324.
d

325. ‫ם‬
‫אמת שרתים ברמה. יישומים התנהגויות והנהלים התקשורת בין שירותי‬o‫השני בזמן‬we
true-realtime

326. web

327. to

328. highlight

329. the

330. differences

331. with

332. the

333. defective

334. (de

335. facto)

336. model

337. f

338. real-time

339. ‫מכשירים‬
‫םא‬
b

340. generally

341. perceived.

342. From

343. the

344. industry

345. point

346. of

347. view,

348. this

349. model

350. of

351. (general)

352. real-time

353. Internet

354. c
an

355. also

356. be

357. defined

358. as

359. electronic

360. web,

361. that

362. comes

363. with

364. the

365. intrinsic

366. meaning

367. of

368. not

369. being

370. limited

371. t
‫ים מקוונים, משתמשים באינטרנט, והתקנים המחוברים או מכשירי חשמל, הם התיישבו קוד‬
o

372. the

373. web

374. side

375. of

376. the

377. Net,

378. and

379. with

380. the

381. direct

382. reference

383. to

384. its

385. server/rest-of-the-world

386. perspective
‫

387. המ‬mechanism

388. of

389. a

390. single

391. clock.

393. as

394. a
]centric. [ 1-‫תואם השירות בזמן אמת כל שנכתב בשפת התכנות בזמן אמת, פירשו של שרת ה‬
‫לתרחיש הקודם, בזמן אמת באינטרנט רך בדיוק בזמן אמת מחשוב: נסיעה הלוך ושוב על אות‬

395. 실시간

396. 웹?

398. 실시간

399. 웹?

400.
실시간님

401. 실시간

402. 웹?

404. Comet?

406. Comet?

407.
হল *াউজার /0ভােব এটা অন7েরাধ ছাড়া এক: ওেব
ধ 서버와

408. 브application model 양방향

409. 통신을

410. 위한

411. 방법들

412.
라우저간의

413. browser, a long-held browser explicitly
• মেকত'web a webিHত HTTPdataেরােধর এক: ওেব সাভGাঅ=াি?েকশন মেডল request allo
Comet is in which HTTP
েযখােন এক: দীঘGঅন7 to push অন7 to a
ws a server without the
র ডাটা এক: *াউ
requesting it.[1][2]Comet isJদ,. [1] [2] ধterm, এক: বLহMর শN, এই অG Server Push
জার Jথেক push করার অন7মিত an umbrella মেকত' encompassing HTTP techni
Ajax Push, Reverse Ajax, Two-way-web, HTTP Streaming, multiple
ques for achieving this interaction. All these methods rely on features incl
জন জন= একািধক Jকৗশল encompassing িমথিQা.এই পSিত Jযমন জাভািT
uded by default in browsers, such as JavaScript, rather than on non-defa
U িহসােব *াউজার,, মেধ= বদেল নন িডফW ?াগ িডফWYেপ অZভGুৈবিশ0= িনভGর
. ধ plugins. The Comet approach differs from the
ult মেকত' পSিত ওেব এর মল আদশ, যা এক: *াউজার এক: সমে এক: স_ূণG
G
ওেব পLH model of the web,
originalা অন7েরাধ Jথেক পLথক. in which a browser requests a complete web p
age at a time.

414. 양방향

415. 통신

417. 양방향

418. 통신

419.
커넥션

420. 끊기면

421. 상대방

422. 목소리를

423. 들을

424. 수가

425. 없다...

427. Comet

428. 종류

429.
• Long

430. Polling

431.
• Streaming

432.
• Flashsocket

433.
• Websocket

435. 그래도

436. 목적은

437. 하나

438.
• 양방향

439. 통신

441. Long

442. Polling

443.
• XHR

444. 요청을

445. 받은

446. 서버가

447. 응답을

448. 줄

449. 때까지

450.
브라우저는

451. 기다린다

453. Long

454. Polling

455.
지연

456. 서버

457. 이벤트

458. 발생

459.
요청

460.
수신

462. Long

463. Polling

464.
function longPoll(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
// 응답이

465. 완료되면

466. 서버로

467. 재연결

468. 요청보내기

481. callback(xhr.responseText);
xhr.open('GET', url, true);
xhr.send(null);
}
};
// 서버로

482. 요청

483. 연결하기

488. xhr.open('POST', url, true);
xhr.send(null);
}

489. Long

490. Polling

491.
장점

492.
• 호환성이

493. 좋다

494.
단점

495.
• 이벤트가

496. 발생할

497. 때마다

498. 연결을

499. 다시

500. 시도

501. 한다

503. Streaming

504.
• 서버에서

505. multipart

506. 메세지를

507. 보낼

508. 때

509. 하나의

510. block을

511. 받을

512. 때마다

513. readystatechange

514. 이
벤트가

515. 발생

516. 한다

518. Streaming

520. Streaming

521.
서버

522. 이벤트

523. 발생

524. 서버

525. 이벤트

526. 발생

528. Streaming

529.
function xhrStreaming(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
var lastSize;
xhr.onreadystatechange = function() {
var newTextReceived;
if(xhr.readyState 2) {
// 최신

530. 텍스트

531. 가져오기

544. newTextReceived = xhr.responseText.substring(lastSize);
lastSize = xhr.responseText.length;
callback(newTextReceived);
}
if(xhr.readyState == 4) {
// 응답이

545. 완료되면

558. //새로운

559. 요청을

560. 다시

561. 만든다

574. xhrStreaming(url, callback);
}
};
// 서버로

575. 요청

576. 연결하기

581. xhr.send(null);
}

582. Streaming

583.
장점

584.
• 매번

585. 새로운

586. 연결을

587. 시도하지

588. 않고

589. 통신이

590. 가능하다

591.
단점

592.
• 지원하는

593. 브라우저가

594. 별로

595. 없다

596.
• 오동작하는

597. 브라우저도

598. 있다

600. FlashSocket

601.
• Adobe

602. Flash의

603. flash.net.Socket

604. 을

605. 이용한

606.
소켓

607. 통신

609. HTML5

610. 시대에

611. 왜

612. Flash인가?

614. HTML5

615. 시대에

616. 왜

617. Flash인가?

618.
PC

619. 설치

620. 비율

621.
97.6 %

622. HTML5

623. 시대에

624. 왜

625. Flash인가?

626.
Long

627. Polling,

628. Streaming

630. HTML5

631. 시대에

632. 왜

633. Flash인가?

634.
FlashSocket,

635. WebSocket

637. HTML5

638. 시대에

639. 왜

640. Flash인가?

642. FlashSocket

643.
package {
import flash.net.Socket;
import flash.events.ProgressEvent;
import flash.events.Event;
import flash.display.Sprite;
public class Test extends Sprite{
private var s:Socket;
public function Test() {
s = new Socket();
s.addEventListener(ProgressEvent.SOCKET_DATA, onSockData);
s.addEventListener(Event.CONNECT, onSockConnect);
s.addEventListener(Event.CLOSE, onSockClose);
s.connect('127.0.0.1', 4001);
}
private function onSockData(event:ProgressEvent):void{
var str:String = s.readUTFBytes(s.bytesAvailable);
trace(str);
}
private function onSockConnect(event:Event):void{
s.writeUTFBytes('aaaa');
}
private function onSockClose(event:Event):void{
trace('close');
}
}
}

644. FlashSocket

645.
장점

646.
• 빠르다

647.
• 안정하다

648.
단점

649.
• 모바일에서

650. 지원하지

651. 않는다

653. WebSocket

655. WebSocket

657. Websocket

658.
• 양방향

659. 통신을

660. 위한

661. HTML5

662. Spec

664. WebSocket

665.
if ('WebSocket' in window) {
var oSocket = new WebSocket(“ws://localhost:80”);
oSocket.onmessage = function (e) {
console.log(e.data);
};
oSocket.onopen = function (e) {
console.log(“open”);
};
oSocket.onclose = function (e) {
console.log(“close”);
};
oSocket.send(“message”);
oSocket.close();
}

666. WebSocket

667.
장점

668.
• 빠르다

669.
• 표준

670.
단점

672. 중간정리

673.
양방향

674. 통신을

675. 위해

676. 다양한

677. 방법이

678. 있음을

679. 기억하자

681. Long

682. Polling,

683. Streaming

684. 특징

685.
• 커넥션을

686. 물고

687. 있기

688. 때문에

689. 서버

690. 비동기

691. 처리

692. 필요

693.
• 응답이

694. 지속적으로

695. 없을

696. 경우

697. 여러

698. 요소에

699. 의해

700. 타
임아웃이

701. 발생할

702. 수

703. 있음

704.
• 도메인이

705. 다를

706. 경우

707. CORS를

708. 이용할

709. 수

710. 있음

712. Long

713. Polling

714. ­–

715. 모바일

716.
• 안드로이드에서

717. 브라우저

718. 타임아웃이

719. 빠르게

720. 발생함

721.
• 모바일에서

722. 네트워크

723. 연결

724. 중

725. 표시

726. 나옴

728. WebSocket

729. 특징

730.
• 초기화할

731. 때

732. 바로

733. 접속을

734. 시도

735.
• addEventListener를

736. 통해서도

737. 이벤트

738. 바인딩

739. 가능

740.
• binary

741. 데이터를

742. 받을

743. 경우

744. 적절한

745. binaryType을

746. 설정

747.
• draft별로

748. 프로토콜

749. 정의가

750. 상이

752. Long

753. Polling

754. 지원범위

755.
• 대부분의

756. 브라우저에서

757. 가능

758.
• 성능상

759. 제일

760. 좋지

761. 않은

762. 방법

764. Streaming

765. 지원범위

766.
• Firefox

767. 등

768. 일부

769. 브라우저

771. WebSocket

772. 지원범위

774. Socket.io

775.
• 지원범위

776. 신경쓰지

777. 않고

778. 양방향

779. 통신을

780. 도와
주는

781. 것

783. 네이버에서는?

785. 네이버에서는?

786.
RTCS

787.
Real-Time

788. Communication

789. System

791. RTCS

792. 성능

793.
• 담당자가

794. 휴가를...

796. 모바일

797. 실시간

798. 웹

799.
• 느리다

801. 모바일

802. 실시간

803. 웹

804.
한국

805. 3G

806. 평균

807. 다운로드

808. 속도

809.
1.37 Mbps

810. 모바일

811. 실시간

812. 웹

813.
• 약전계,

814. 통신

815. 불안

816. 요소

817. 존재

819. 모바일

820. 실시간

821. 웹

822.
• 주고받을

823. 데이터가

824. 빈번하고

825. 많거나

826.
• 사용자간

827. 동기화가

828. 필요한

829. 경우는

830. 적합하지

831. 않다

833. 그래도

834. 모바일은

835. 빠르게

836. 성장하고

837. 있다

839. 실시간

840. 웹

841. 도전해

842. 보세요