[Hello world 오픈세미나]실시간웹을위한comet과socket.io
11 likes6,154 views
The document discusses different types of users (A, B, C) and their perspectives on real-time web technologies. Type A users prefer simple explanations, while Type B users like examples and case studies. Type C users want discussions of principles and performance. The presenter then provides a high-level overview comparing the client-server approach of Comet to the true real-time model of Socket.io.
[Hello world 오픈세미나]실시간웹을위한comet과socket.io
- 1. 실시간
- 2. 웹을
- 3. 위한
- 4. Comet과
- 5. Soc ket.io
- 6. 살펴보기
- 7. 심상민
- 9. 발표자
- 11. 여러분은?
- 15. 끝나요?...
- 17. 왔어요...
- 19. 여러분은?
- 22. 해봤어요
- 24. 봤어요
- 26. 여러분은?
- 29. 없어요
- 31. 그래서
- 33. 두마리
- 34. 토끼
- 35. 잡기
- 39. • 쉽게
- 40. 설명
- 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;
- 86. site,
- 87. to
- 88. communicate
- 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
- 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
- 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
- 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 נט
- 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
- 386. perspective
- 387. המmechanism
- 388. of
- 389. a
- 390. single
- 391. clock.
- 393. as
- 394. a ]centric. [ 1-תואם השירות בזמן אמת כל שנכתב בשפת התכנות בזמן אמת, פירשו של שרת ה לתרחיש הקודם, בזמן אמת באינטרנט רך בדיוק בזמן אמת מחשוב: נסיעה הלוך ושוב על אות
- 395. 실시간
- 396. 웹?
- 398. 실시간
- 399. 웹?
- 401. 실시간
- 402. 웹?
- 404. Comet?
- 406. Comet?
- 409. 통신을
- 410. 위한
- 411. 방법들
- 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. 통신
- 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. 때까지
- 451. 기다린다
- 453. Long
- 454. Polling
- 457. 이벤트
- 458. 발생
- 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
- 492. • 호환성이
- 493. 좋다
- 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
- 522. 이벤트
- 523. 발생
- 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
- 584. • 매번
- 585. 새로운
- 586. 연결을
- 587. 시도하지
- 588. 않고
- 589. 통신이
- 590. 가능하다
- 592. • 지원하는
- 593. 브라우저가
- 594. 별로
- 595. 없다
- 596. • 오동작하는
- 597. 브라우저도
- 598. 있다
- 600. FlashSocket
- 601. • Adobe
- 602. Flash의
- 603. flash.net.Socket
- 604. 을
- 605. 이용한
- 607. 통신
- 609. HTML5
- 610. 시대에
- 611. 왜
- 612. Flash인가?
- 614. HTML5
- 615. 시대에
- 616. 왜
- 617. Flash인가?
- 619. 설치
- 620. 비율
- 622. HTML5
- 623. 시대에
- 624. 왜
- 625. Flash인가?
- 627. Polling,
- 628. Streaming
- 630. HTML5
- 631. 시대에
- 632. 왜
- 633. Flash인가?
- 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
- 646. • 빠르다
- 647. • 안정하다
- 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
- 668. • 빠르다
- 669. • 표준
- 672. 중간정리
- 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. 웹
- 805. 3G
- 806. 평균
- 807. 다운로드
- 808. 속도
- 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. 보세요