56
실시간 웹을 위한 Comet과 Soc ket.io 살펴보기 심상민

[Hello world 오픈세미나]실시간웹을위한comet과socket.io

Embed Size (px)

Citation preview

  • 1.

2. 3. 4. Comet 5. Socket.io 6. 7. 8. 9. 10. 11. ? 12. A 13. 14. 15. ?... 16. 17. ... 18. 19. ? 20. B 21. 22. 23. 24. 25. 26. ? 27. C 28. 29. 30. 31. 32. 33. 34. 35. 36. A 37. B 38. C 39. 40. 41. 42. 43. 44. 45. 46. 47. 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. aeb 78. application, 79. or 80. a ( ontinuously 81. whe 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. model, 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. Te 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. intercommunication 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] 242. 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. considered 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. anit 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 wetrue-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. can 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. 392. 393. as 394. a]centric. [ 1- , , : 395. 396. ? 397. 398. 399. ? 400. 401. 402. ? 403. 404. Comet? 405. 406. Comet? 407. */07: 408. application model 409. 410. 411. 412. 413. browser, a long-held browser explicitlyweb a webHHTTPdata:G=?request allo Comet isin whichHTTP :G7 to push 7 to a ws aserver without the:* requesting it.[1][2]Comet isJ,.[1][2]term,:LM N,G Server Push Jpush 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 =Jencompassing Q.SJT uded by default in browsers, such as JavaScript, rather than on non-defa U*,,=W?WYZG0=G . plugins. The Comet approach differs from the ult S,:*::_GG LH model of the web, original7JL. in which a browser requests a complete web p age at a time. 414. 415. 416. 417. 418. 419. 420. 421. 422. 423. 424. 425. ... 426. 427. Comet 428. 429. Long 430. Polling 431. Streaming 432. Flashsocket 433. Websocket 434. 435. 436. 437. 438. 439. 440. 441. Long 442. Polling 443. XHR 444. 445. 446. 447. 448. 449. 450. 451. 452. 453. Long 454. Polling 455. 456. 457. 458. 459. 460. 461. 462. Long 463. Polling 464. function longPoll(url, callback) {var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() {if(xhr.readyState == 4) {// 465. 466. 467. 468. 469. 470. 471. 472. 473. 474. 475. 476. 477. 478. 479. 480. 481. callback(xhr.responseText); xhr.open(GET, url, true); xhr.send(null);} };// 482. 483. 484. 485. 486. 487. 488. xhr.open(POST, url, true);xhr.send(null);} 489. Long 490. Polling 491. 492. 493. 494. 495. 496. 497. 498. 499. 500. 501. 502. 503. Streaming 504. 505. multipart 506. 507. 508. 509. 510. block 511. 512. 513. readystatechange 514. 515. 516. 517. 518. Streaming 519. 520. Streaming 521. 522. 523. 524. 525. 526. 527. 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. 532. 533. 534. 535. 536. 537. 538. 539. 540. 541. 542. 543. 544. newTextReceived = xhr.responseText.substring(lastSize); lastSize = xhr.responseText.length; callback(newTextReceived); } if(xhr.readyState == 4) { // 545. 546. 547. 548. 549. 550. 551. 552. 553. 554. 555. 556. 557. 558. // 559. 560. 561. 562. 563. 564. 565. 566. 567. 568. 569. 570. 571. 572. 573. 574. xhrStreaming(url, callback); }}; // 575. 576. 577. 578. 579. 580. 581. xhr.send(null); } 582. Streaming 583. 584. 585. 586. 587. 588. 589. 590. 591. 592. 593. 594. 595. 596. 597. 598. 599. 600. FlashSocket 601. Adobe 602. Flash 603. flash.net.Socket 604. 605. 606. 607. 608. 609. HTML5 610. 611. 612. Flash? 613. 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 629. 630. HTML5 631. 632. 633. Flash? 634. FlashSocket, 635. WebSocket 636. 637. HTML5 638. 639. 640. Flash? 641. 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. 652. 653. WebSocket 654. 655. WebSocket 656. 657. Websocket 658. 659. 660. 661. HTML5 662. Spec 663. 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. 671. 672. 673. 674. 675. 676. 677. 678. 679. 680. 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. 711. 712. Long 713. Polling 714. 715. 716. 717. 718. 719. 720. 721. 722. 723. 724. 725. 726. 727. 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. 751. 752. Long 753. Polling 754. 755. 756. 757. 758. 759. 760. 761. 762. 763. 764. Streaming 765. 766. Firefox 767. 768. 769. 770. 771. WebSocket 772. 773. 774. Socket.io 775. 776. 777. 778. 779. 780. 781. 782. 783. ? 784. 785. ? 786. RTCS 787. Real-Time 788. Communication 789. System 790. 791. RTCS 792. 793. 794. ... 795. 796. 797. 798. 799. 800. 801. 802. 803. 804. 805. 3G 806. 807. 808. 809. 1.37Mbps 810. 811. 812. 813. , 814. 815. 816. 817. 818. 819. 820. 821. 822. 823. 824. 825. 826. 827. 828. 829. 830. 831. 832. 833. 834. 835. 836. 837. 838. 839. 840. 841. 842. 843.