[Hello world 오픈세미나]실시간웹을위한comet과socket.io
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,712 views

 

Statistics

Views

Total Views
3,712
Views on SlideShare
2,467
Embed Views
1,245

Actions

Likes
3
Downloads
24
Comments
0

3 Embeds 1,245

http://helloworld.naver.com 1241
http://translate.googleusercontent.com 3
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 실시간
  •   웹을
  •   위한
  •   Comet과
  •   Socket.io
  •   살펴보기
  •   심상민
  •   
  • 발표자
  •   
  • 여러분은?
  •    유형A
  •    앞에만
  •    언제
  •   끝나요?...
  •    들으러
  •   왔어요...
  •   
  • 여러분은?
  •    유형B
  •    예제만
  •   해봤어요
  •    책에서
  •   봤어요
  •   
  • 여러분은?
  •    유형C
  •    못하는게
  •   없어요
  •   
  • 그래서
  •   
  • 두마리
  •   토끼
  •   잡기
  •    유형A
  •    유형B
  •    유형C
  •    •  쉽게
  •   설명
  •    •  사례
  •    •  성능
  •    •  코드
  •    •  모바일
  •    •  원리
  •    •  팁
  •   
  • 실시간
  •   웹?
  •   ‫מנקודת מבט אחרת, באינטרנט בזמן אמת כולל ביצירת‬True-realtime
  •   web
  •   (an
  •   "alternate"
  •   model)
  •   From
  •   another
  •   point
  •   of
  •   view,
  •   the
  •   real-time
  •   web
  •   consists
  •   in
  •   making
  •   the
  •   client
  •   interface
  •   (or
  •   the
  •   web
  •   ‫לתק‬or
  •   the
  •   web
  •   layer)
  •   of
  •   a‫או‬eb
  •   application,
  •   or
  •   a‫ או שכבת האינטרנט( של‬ontinuously
  •   w‫לצד‬he
  •    ‫לקוח‬side;
  •    ,‫  
  •  באתר האינטרנט‬w ,‫  
  •  יישום אינטרנט‬web
  •   site,
  •   to
  •   communicate
  •   c ,‫ האינטרנט‬ith
  •   t ‫)או‬‫שר ב‬corresponding
  •   real-time
  •   server,
  •   during
  •   every
  •   user
  •   connection.
  •   As
  •   a
  •   fast
  •   pic
  •   of
  •   the
  •   client/server
  •   model,
  •   imagine
  •   each
  •   c ‫ בזמן אמת המקבילה, במהלך כל חיבור המשתמש. כמו תמונה‬ts
  •   obj‫ מהיר של מודל ש‬lient
  •   object
  •   (each
  •   web
  •   module
  •   of
  •   the
  •   web
  •   GUI
  •   of
  •   an
  •   application)
  •   having
  •   i‫ף עם השרת‬ect
  •   class
  •   alive
  •   as
  •   a
  •   sub
  •   process
  •   (of
  •   its
  •   user
  •   session)
  •   in
  •   the
  •   server
  •   environment.
  •   In
  •   this
  •   scenario,
  •   the
  •   ‫רת‬web
  •   is
  •   considered
  •   as
  •   the
  •   human
  •   entrance
  •   (interface)
  •   to
  •   the
  •   real-time
  •   environment:
  •   at
  •   each
  •   conne‫ באינטרנט הבקשה( שיש בכיתה‬one,
  •   corresponds
  •   a
  •   different
  •   "front-end"
  •   web
  •   a‫כל אובייקט‬h‫, לדמיין‬cted
  •   web
  •   URL,
  •   or
  •   Internet
  •   real-time
  •   z GUI-‫ הלקוח )כל מודול האינטרנט של ה‬pplication.
  •   T‫האוב‬e
  •   real-time
  •   server
  •   acts
  •   as
  •   a
  •   logic
  •   network
  •   operating
  •   system
  •   for
  •   the
  •   programmable
  •   array
  •   of
  •   applicat‫ נחשבת הכ‬the
  •   array
  •   of
  •   ,‫ה בחיים כתהליך קטן )מושב למשתמש( בסביבת השרת. בתרחיש זה‬ions;
  •   handles
  •   ‫ האינטרנט‬connected
  •   users
  •   for
  •   each
  •   application;
  •   attends
  •   for
  •   connections
  •   from
  •   real-world
  •   appliances
  •   and
  •   second
  •   level
  •   real-time
  •   servers.
  •   Applications
  •   behaviours
  •   and
  •   the
  •   intercommu‫ניס‬nication
  •   procedures
  •   between
  •   online
  •   services
  •   or
  •   applications,
  •   online
  •   users,
  •   and
  •   connected
  •   devices
  •   ‫באי‬ppliances,
  •   are
  •   settled
  •   in
  •   the
  •   corresponding
  •   s‫לסביבה בזמן אמת: בכל אזור מחוברים‬i(‫שי )ממשק‬or
  •   a ‫ בזמן אמת כתובת אתר האינטרנט, או‬ource
  •   code
  •   of
  •   each
  •   real-time
  •   service
  •   written
  •    n
  •   the‫נט‬
  •   real-time-interpreted
  •   programming
  •   language
  •   of
  •   the
  •   centric
  •   server.[1]
  •   
  •   As
  •   opposite
  •   to
  •   previous
  •   s ‫ "חזיתי" יישום אינטרנט. בזמן אמת פעולות שרת כמו מערכת‬rip‫ההפעלה ברשת לוגיק‬cenario,
  •   real-time
  •   web
  •   is
  •   exactly
  •   soft
  •   real-time
  •   computing:
  •   the
  •   round
  •   t‫תאים אחר‬‫ה‬
  •   of
  •   a
  •   data
  •   ping-pong
  •   signal
  •   from
  •   the
  •   real-time
  •   server
  •   to
  •   the
  •   client
  •   must
  •   take
  •   about
  •   1s
  •   to
  •   be
  •   considered
  •   real-time
  •   and
  •   not
  •   to
  •   be
  •   annoying
  •   for
  •   ‫המחוברים‬users)
  •   during
  •   their
  •   connections.[2]
  •   About
  •   th‫לתכנות‬‫ עבור כל יישום, לומד לחיבורים בעול‬humans
  •   (or
  •    ‫יישומים, מטפל מערך של משתמשים‬e
  •   dispute
  •   between
  •   social
  •   web
  •   and
  •   real-time
  •   web,
  •   we
  •   can
  •   say
  •   real-time
  •   web
  •   is
  •   social
  •   by
  •   default
  •   an‫ה‬it
  •   is
  •   not
  •   true
  •   the
  •   contrary
  •   (WEB-r
  •   comes
  •   before
  •   Web
  •   2.0).
  •   The
  •   WEB-r
  •   model
  •   is
  •   called
  •   d
  •    ‫ם‬‫אמת שרתים ברמה. יישומים התנהגויות והנהלים התקשורת בין שירותי‬o‫השני בזמן‬wetrue-realtime
  •   web
  •   to
  •   highlight
  •   the
  •   differences
  •   with
  •   the
  •   defective
  •   (de
  •   facto)
  •   model
  •    f
  •   real-time
  •    ‫מכשירים‬‫םא‬b
  •   generally
  •   perceived.
  •   From
  •   the
  •   industry
  •   point
  •   of
  •   view,
  •   this
  •   model
  •   of
  •   (general)
  •   real-time
  •   Internet
  •   can
  •   also
  •   be
  •   defined
  •   as
  •   electronic
  •   web,
  •   that
  •   comes
  •   with
  •   the
  •   intrinsic
  •   meaning
  •   of
  •   not
  •   being
  •   limited
  •   t‫ים מקוונים, משתמשים באינטרנט, והתקנים המחוברים או מכשירי חשמל, הם התיישבו קוד‬o
  •   the
  •   web
  •   side
  •   of
  •   the
  •   Net,
  •   and
  •   with
  •   the
  •   direct
  •   reference
  •   to
  •   its
  •   server/rest-of-the-world
  •   perspective‫  
  •  המ‬mechanism
  •   of
  •   a
  •   single
  •   clock.
  •   
  •   as
  •   a]centric. [ 1-‫תואם השירות בזמן אמת כל שנכתב בשפת התכנות בזמן אמת, פירשו של שרת ה‬‫לתרחיש הקודם, בזמן אמת באינטרנט רך בדיוק בזמן אמת מחשוב: נסיעה הלוך ושוב על אות‬
  • 실시간
  •   웹?
  •   
  • 실시간
  •   웹?
  •    실시간님
  • 실시간
  •   웹?
  •   
  • Comet?
  •   
  • Comet?
  •     হল *াউজার /0ভােব এটা অন7েরাধ ছাড়া এক: ওে<ব ধ" 서버와
  •   브application model 양방향
  •   통신을
  •   위한
  •   방법들
  •    라우저간의
  •   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.
  • 양방향
  •   통신
  •   
  • 양방향
  •   통신
  •    커넥션
  •   끊기면
  •   상대방
  •   목소리를
  •   들을
  •   수가
  •   없다...
  •   
  • Comet
  •   종류
  •    •  Long
  •   Polling
  •    •  Streaming
  •    •  Flashsocket
  •    •  Websocket
  •   
  • 그래도
  •   목적은
  •   하나
  •    •  양방향
  •   통신
  •   
  • Long
  •   Polling
  •    •  XHR
  •   요청을
  •   받은
  •   서버가
  •   응답을
  •   줄
  •   때까지
  •    브라우저는
  •   기다린다
  •   
  • Long
  •   Polling
  •    지연
  •    서버
  •   이벤트
  •   발생
  •    요청
  •    수신
  •   
  • Long
  •   Polling
  •    function longPoll(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { // 응답이
  •   완료되면
  •   서버로
  •   재연결
  •   요청보내기
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   callback(xhr.responseText); xhr.open(GET, url, true); xhr.send(null); } }; // 서버로
  •   요청
  •   연결하기
  •    
  •   
  •   
  •   
  •   xhr.open(POST, url, true); xhr.send(null); }
  • Long
  •   Polling
  •    장점
  •    •  호환성이
  •   좋다
  •    단점
  •    •  이벤트가
  •   발생할
  •   때마다
  •   연결을
  •   다시
  •   시도
  •   한다
  •   
  • Streaming
  •    •  서버에서
  •   multipart
  •   메세지를
  •   보낼
  •   때
  •   하나의 
  •   block을
  •   받을
  •   때마다
  •   readystatechange
  •   이 벤트가
  •   발생
  •   한다
  •   
  • Streaming
  •   
  • Streaming
  •    서버
  •   이벤트
  •   발생
  •    서버
  •   이벤트
  •   발생
  •   
  • Streaming
  •    function xhrStreaming(url, callback) { var xhr = new XMLHttpRequest(); xhr.open(POST, url, true); var lastSize; xhr.onreadystatechange = function() { var newTextReceived; if(xhr.readyState > 2) { // 최신
  •   텍스트
  •   가져오기
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   newTextReceived = xhr.responseText.substring(lastSize); lastSize = xhr.responseText.length; callback(newTextReceived); } if(xhr.readyState == 4) { // 응답이
  •   완료되면
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   //새로운
  •   요청을
  •   다시
  •   만든다
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   xhrStreaming(url, callback); } }; // 서버로
  •   요청
  •   연결하기
  •    
  •   
  •   
  •   
  •   xhr.send(null); }
  • Streaming
  •    장점
  •    •  매번
  •   새로운
  •   연결을
  •   시도하지
  •   않고
  •   통신이
  •   가능하다
  •    단점
  •    •  지원하는
  •   브라우저가
  •   별로
  •   없다
  •    •  오동작하는
  •   브라우저도
  •   있다
  •   
  • FlashSocket
  •    •  Adobe
  •   Flash의
  •   flash.net.Socket
  •   을
  •   이용한
  •    소켓
  •   통신
  •   
  • HTML5
  •   시대에
  •   왜
  •   Flash인가?
  •   
  • HTML5
  •   시대에
  •   왜
  •   Flash인가?
  •    PC
  •   설치
  •   비율
  •    97.6 %
  • HTML5
  •   시대에
  •   왜
  •   Flash인가?
  •    Long
  •   Polling,
  •   Streaming
  •   
  • HTML5
  •   시대에
  •   왜
  •   Flash인가?
  •    FlashSocket,
  •   WebSocket
  •   
  • HTML5
  •   시대에
  •   왜
  •   Flash인가?
  •   
  • FlashSocket
  •    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); } } }
  • FlashSocket
  •    장점
  •    •  빠르다
  •    •  안정하다
  •    단점
  •    •  모바일에서
  •   지원하지
  •   않는다
  •   
  • WebSocket
  •   
  • WebSocket
  •   
  • Websocket
  •    •  양방향
  •   통신을
  •   위한
  •   HTML5
  •   Spec
  •   
  • WebSocket
  •    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(); }
  • WebSocket
  •    장점
  •    •  빠르다
  •    •  표준
  •    단점
  •   
  • 중간정리
  •    양방향
  •   통신을
  •   위해
  •   다양한
  •   방법이
  •   있음을
  •   기억하자
  •   
  • Long
  •   Polling,
  •   Streaming
  •   특징
  •    •  커넥션을
  •   물고
  •   있기
  •   때문에
  •   서버
  •   비동기
  •   처리
  •   필요
  •    •  응답이
  •   지속적으로
  •   없을
  •   경우
  •   여러
  •   요소에
  •   의해
  •   타 임아웃이
  •   발생할
  •   수
  •   있음
  •    •  도메인이
  •   다를
  •   경우
  •   CORS를
  •   이용할
  •   수
  •   있음
  •   
  • Long
  •   Polling
  •   ­–
  •   모바일
  •    •  안드로이드에서
  •   브라우저
  •   타임아웃이
  •   빠르게
  •   발생함
  •    •  모바일에서
  •   네트워크
  •   연결
  •   중
  •   표시
  •   나옴
  •   
  • WebSocket
  •   특징
  •    •  초기화할
  •   때
  •   바로
  •   접속을
  •   시도
  •    •  addEventListener를
  •   통해서도
  •   이벤트
  •   바인딩
  •   가능
  •    •  binary
  •   데이터를
  •   받을
  •   경우
  •   적절한
  •   binaryType을
  •   설정
  •    •  draft별로
  •   프로토콜
  •   정의가
  •   상이
  •   
  • Long
  •   Polling
  •   지원범위
  •    •  대부분의
  •   브라우저에서
  •   가능
  •    •  성능상
  •   제일
  •   좋지
  •   않은
  •   방법
  •   
  • Streaming
  •   지원범위
  •    •  Firefox
  •   등
  •   일부
  •   브라우저
  •   
  • WebSocket
  •   지원범위
  •   
  • Socket.io
  •    •  지원범위
  •   신경쓰지
  •   않고
  •   양방향
  •   통신을
  •   도와 주는
  •   것
  •   
  • 네이버에서는?
  •   
  • 네이버에서는?
  •    RTCS
  •    Real-Time
  •   Communication
  •   System
  •   
  • RTCS
  •   성능
  •    •  담당자가
  •   휴가를...
  •   
  • 모바일
  •   실시간
  •   웹
  •    •  느리다
  •   
  • 모바일
  •   실시간
  •   웹
  •    한국
  •   3G
  •   평균
  •   다운로드
  •   속도
  •    1.37 Mbps
  • 모바일
  •   실시간
  •   웹
  •    •  약전계,
  •   통신
  •   불안
  •   요소
  •   존재
  •   
  • 모바일
  •   실시간
  •   웹
  •    •  주고받을
  •   데이터가
  •   빈번하고
  •   많거나
  •    •  사용자간
  •   동기화가
  •   필요한
  •   경우는
  •   적합하지
  •   않다
  •   
  • 그래도
  •   모바일은
  •   빠르게
  •   성장하고
  •   있다
  •   
  • 실시간
  •   웹
  •   도전해
  •   보세요
  •