RealtimeWeb
                Application
                         withJava
               ArawnOutsiderin봄싹
                                2011.6.19
Real
Time
Web
ServerPush
Realtime web application with java
Realtime web application with java
리얼타임웹에
           대해서얼마나
           알고계십니까?
http://springsprout.org:10000/
Client-side
               Server-side
일단....
               Client-side
현재
               (어쩌면약간과거)
Polling
브라우저           서버
요청




브라우저                서버
요청

               응답




브라우저                서버
요청

               응답

                     이벤트



브라우저                서버
요청

               응답

주기                   이벤트



브라우저                서버
요청

               응답

주기                   이벤트
               요청


브라우저                서버
요청

               응답

주기                   이벤트
               요청

               응답
브라우저                서버
사실...
          서버푸시라고
          하기는어렵습니다.
Comet

      WebSocket
Comet
Ajax처럼
               특정기술이
               아닌패턴
LongLived
               HTTP
               Connection
Long
               Polling
브라우저           서버
요청




브라우저                서버
요청


                     대기




브라우저                서버
요청


                     대기


                     이벤트

브라우저                서버
요청


                     대기

               응답
                     이벤트

브라우저                서버
요청


                     대기

               응답
                     이벤트
               요청
브라우저                서버
JSONP
               Polling
JSONP==
          JSONwithpadding
스크립트태그로호출
scriptsrc=”http://domain.com/?callback=process”
/script


서버에서콜백함수로JSON객체리턴
      process({
      “key”:“value”,
      “key2”:“value2”
      });
동일출처정책
          SameOriginPolicy
도메인당
          커넥션2개제한
Streaming
브라우저           서버
요청




브라우저                서버
요청

                     대기




브라우저                서버
요청

                     대기

                     이벤트



브라우저                서버
요청

                                      대기

                                      이벤트
               응답(Chunked)

브라우저                                 서버
요청

                                      대기

                                      이벤트
               응답(Chunked)
                                      이벤트
브라우저                                 서버
요청

                                      대기

                                      이벤트
               응답(Chunked)
               응답(Chunked)    이벤트
브라우저                                 서버
varxhr=newXMLHttpRequest();
xhr.oepn('GET','/comet',true);

xhr.onreadystatechange=function(){
if(xhr.readyState==3
xhr.status==200){
//xhr.responseText
}
}
Chunked???
IE는
지원하지
않습니다
Foreveriframe
     (Hiddeniframe)
웹페이지




               서버
웹페이지



     hiddeniframe




                            서버
웹페이지


                            요청
     hiddeniframe




                                 서버
웹페이지


                                   요청
     hiddeniframe

                            ChunkedData




                                                  서버
웹페이지


                                     요청
     hiddeniframe

                              ChunkedData
                            script데이터/script


                                                    서버
클릭소리
               로딩바문제
ActiveXObject(“htmlfile”)
WebSocket
HTML5
           W3C/IETF표준
          WebSocket프로토콜사용
          진정한양방향통신
HTTP를
               업그래이드해서
               웹소켓프로토콜을


	    	    	 
               연결한다
HTTP호환handshake
80/443으로동작
Proxy/firewall에친화적
ws://와wss://사용
//요청
     GET/demoHTTP/1.1
     Upgrade:WebSocket
     Connection:Upgrade
     Host:example.com
     Origin:http://example.com
     Websocket-Protocol:sample

     //응답
     HTTP/1.1101WebSocketProtocolHandshake
     Upgrade:Websocket
     Connection:Upgrade
     Websocket-Origin:http://example.com
     WebSocket-Location:ws://example.com/demo
     WebSocket-Protocol:sample
varws=
     newWebSocket(ws://domain.com);

     ws.onOpen=
     function(e){console.log(opened);}
     ws.onRead=
     function(e){console.log(e.data);}
     ws.onClose=
     function(e){console.log(closed);}

     ws.send(HelloWorld);
Adobe
               Flash
               Socket
Server-side
지속적인연결!
          (persistentconnection)
Thread
                 per
               Request
ThreadperRequest
                        ServletContainer
     Request
                       Thread           ServletPool
     Request                                Servlet
                       Thread
                                            Servlet
     Request                                Servlet
                       Thread
                                            Servlet
                                              ....
     Request
                       Thread
Servlet
      Container
     Comet지원
Resin
               (3.1+)
CometServlet
publicinterface                   CometServletextendsServlet{
booleanservice(ServletRequest,ServletResponse,
CometController)
throwsServletException,IOException;

booleanresume(ServletRequest,ServletResponse,
CometController)
throwsServletException,IOException;

}
ResinComet
     SampleCode
ResinCometServlet처리흐름
                                                            Job
 Client                        CometServlet
                                                          Executor

               service(cometCtrl)

                                         execute(cometCtrl)
                               suspend


                                            cometCtrl.wake()
                                resume

               resume(cometCtrl)
Jetty
               (3.0+)
Continuation
          publicinterface       Continuation{
           publicbooleansuspend(longtimeout);

           publicvoidresume();

          ...

          }
Tomcat
               (6.0+)
CometProcessor
               publicinterface             CometProcessor
               extendsServlet{

               publicvoidevent(CometEvent)
               throwsIOException,
               ServletException;

               }
Servlet3.0
               (JSR315)
servlet
servlet-nameAsyncMessageListenServlet/servlet-name
servlet-class.../servlet-class


async-supported
true
/async-supported
/servlet
servlet-mapping
servlet-nameAsyncMessageListenServlet/servlet-name
url-pattern/messageListen/url-pattern
/servlet-mapping
interface  HttpServletRequest
               extendsServletRequest{

               AsyncContextstartAsync();

               AsyncContextstartAsync(
               ServletRequest,ServletResponse);

               }
publicinterface   AsyncContext{
      publicServletRequestgetRequest();

      publicServletResponsegetResponse();

      }
Servlet3.0
                Sample
                 Code
AsynchronousServlet처리흐름
                                                     Job
 Client                 AsyncServlet
                                                   Executor



                                request.startAsync()

                               execute(asyncContext)




                               asyncContext.complete()
WebSocket
                Server
-jWebSocket
(http://jwebsocket.org/)
-Netty
(http://www.jboss.org/netty)
-Grizzly
(http://grizzly.java.net/)
추상화
Clientside
                                                                    WebBrowser
                                   InternetExplorer/FireFox/Chrome/Safari...


                                                                    CometClient
               LongPolling/Streaming(XMLHttpRequest,foreveriframe)/WebSocket




                                                                                                                                 Serverside
                                                                    CometServer
Comet
               Library
Lightstreamer
          scalableandreliableServerfor
             pushinglivedatatoRich
               InternetApplications
Socket.IO
               J2EEServletbasedSocket.IO
                  serverimplementation.
Project
                 Atmosphere
               aportableAjaxPush/Comet
               andWebSocketFramework
Streamhub
                HTTPCometand
               ReverseAjaxserver
Server    Long Hidden Web Flash
                  Push    polling iframe Socket Socket


Lightstreamer      O         O           O           O            O


     Socket.IO     O         O           X           O            O


Atmosphere         O         O           O           O            X


     Streamhub     O         O           O           O            O
Streamhub
                            -
                  QXQuiz
                CodeReview

               https://github.com
                  /spring-sprout
               /jco-2011-realtime
Thread
             vs
          Evented
Questions...?
Arawn
arawn.kr@gmail.com
http://arawn.tistory.com
Outsider
outsideris@gmail.com
http://blog.outsider.ne.kr
끝

More Related Content

PPTX
Asynchronous Web Programming with HTML5 WebSockets and Java
PDF
Building Next Generation Real-Time Web Applications using Websockets
PDF
WebSockets with Spring 4
PPTX
Web sockets in Java
PPTX
Spring + WebSocket integration
KEY
Pushing the web — WebSockets
KEY
The HTML5 WebSocket API
PPTX
Websockets and SockJS, Real time chatting
Asynchronous Web Programming with HTML5 WebSockets and Java
Building Next Generation Real-Time Web Applications using Websockets
WebSockets with Spring 4
Web sockets in Java
Spring + WebSocket integration
Pushing the web — WebSockets
The HTML5 WebSocket API
Websockets and SockJS, Real time chatting

What's hot (20)

PDF
GWT Web Socket and data serialization
PPTX
Intro to WebSockets
PDF
Introduction to WebSockets
PPS
J web socket
PPTX
Php push notifications
PDF
WEB SOCKET 應用
PPTX
vlavrynovych - WebSockets Presentation
PPT
HTML5 WebSocket: The New Network Stack for the Web
PPTX
ODP
Real time web (Orbited) at BCNE3
PDF
WebSockets wiith Scala and Play! Framework
PDF
HTML5 Server Sent Events/JSF JAX 2011 Conference
PPTX
Large scale web socket system with AWS and Web socket
PPTX
WebSockets in JEE 7
PPTX
Reverse ajax in 2014
ZIP
Websocket protocol overview
PPTX
HTML5 WebSocket Introduction
PDF
Writing & Using Web Services
PDF
Getting Started with WebSockets and Server-Sent Events
PDF
Introduction to Node.js Platform
GWT Web Socket and data serialization
Intro to WebSockets
Introduction to WebSockets
J web socket
Php push notifications
WEB SOCKET 應用
vlavrynovych - WebSockets Presentation
HTML5 WebSocket: The New Network Stack for the Web
Real time web (Orbited) at BCNE3
WebSockets wiith Scala and Play! Framework
HTML5 Server Sent Events/JSF JAX 2011 Conference
Large scale web socket system with AWS and Web socket
WebSockets in JEE 7
Reverse ajax in 2014
Websocket protocol overview
HTML5 WebSocket Introduction
Writing & Using Web Services
Getting Started with WebSockets and Server-Sent Events
Introduction to Node.js Platform
Ad

Viewers also liked (7)

KEY
Router と WebSocket
PPT
WebSockets and Java
PDF
Using SockJS(Websocket) with Sencha Ext JS
PPTX
WebSocket MicroService vs. REST Microservice
PDF
Nuts and Bolts of WebSocket Devoxx 2014
PPTX
Spring Boot & WebSocket
ODP
SockJS Intro
Router と WebSocket
WebSockets and Java
Using SockJS(Websocket) with Sencha Ext JS
WebSocket MicroService vs. REST Microservice
Nuts and Bolts of WebSocket Devoxx 2014
Spring Boot & WebSocket
SockJS Intro
Ad

Similar to Realtime web application with java (20)

PPTX
Building WebSocket and Server Side Events Applications using Atmosphere
KEY
Realtime Web 간보기
PPTX
Connected Web Systems
PPTX
Server Side Javascript : how to start ?
PDF
HWIOS Websocket CMS explained
PPTX
What is new in WCF 4.0?
PPT
Cometdの紹介
PDF
Comet from JavaOne 2008
PDF
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
PPTX
SERVLET in web technolgy engineering.pptx
PDF
Java Web Programming [2/9] : Servlet Basic
PPTX
Writing Portable WebSockets in Java
PPTX
SERVLETS (2).pptxintroduction to servlet with all servlets
PDF
Sociable Software
PDF
Mike Taulty MIX10 Silverlight 4 Patterns Frameworks
PPT
Servlet ppt by vikas jagtap
KEY
Java web programming
PPTX
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
PDF
Server-Side Programming Primer
PPTX
Codecamp iasi-26 nov 2011-web sockets
Building WebSocket and Server Side Events Applications using Atmosphere
Realtime Web 간보기
Connected Web Systems
Server Side Javascript : how to start ?
HWIOS Websocket CMS explained
What is new in WCF 4.0?
Cometdの紹介
Comet from JavaOne 2008
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
SERVLET in web technolgy engineering.pptx
Java Web Programming [2/9] : Servlet Basic
Writing Portable WebSockets in Java
SERVLETS (2).pptxintroduction to servlet with all servlets
Sociable Software
Mike Taulty MIX10 Silverlight 4 Patterns Frameworks
Servlet ppt by vikas jagtap
Java web programming
Codecamp Iasi-26 nov 2011 - Html 5 WebSockets
Server-Side Programming Primer
Codecamp iasi-26 nov 2011-web sockets

More from JeongHun Byeon (20)

PDF
GitHub Actions의 다양한 기능 활용하기 - GitHub Universe '24 Recap
PDF
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
PDF
오픈소스에 기여할 때 알면 좋을 개발 프로세스
PDF
DevOps를 가속화하는 플랫폼 엔지니어링
PDF
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
PDF
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
PDF
Citizen 개발기
PDF
오픈소스 뒤에 메인테이너 있어요
PDF
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일
PDF
Lessons from maintaining Mocha, an open source project
PDF
개발 관련 기술 블로그 운영하기
PDF
Terraform을 이용한 Infrastructure as Code 실전 구성하기
PDF
오픈소스 생태계 일원으로서의 개발자(자막 버전)
PDF
오픈소스 생태계 일원으로서의 개발자
PDF
Node.js API 서버 성능 개선기
PDF
더 나은 개발자 되기
PDF
블로그 주도 개발
PDF
Front-end Development Process - 어디까지 개선할 수 있나
PDF
Node.js 현재와 미래
PDF
Nodejs Production 적용기
GitHub Actions의 다양한 기능 활용하기 - GitHub Universe '24 Recap
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
오픈소스에 기여할 때 알면 좋을 개발 프로세스
DevOps를 가속화하는 플랫폼 엔지니어링
클라우드 시대에 맞는 사이트 신뢰성 엔지니어
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
Citizen 개발기
오픈소스 뒤에 메인테이너 있어요
오픈소스에 기여할 때 해도 되는 일과 하면 안되는 일
Lessons from maintaining Mocha, an open source project
개발 관련 기술 블로그 운영하기
Terraform을 이용한 Infrastructure as Code 실전 구성하기
오픈소스 생태계 일원으로서의 개발자(자막 버전)
오픈소스 생태계 일원으로서의 개발자
Node.js API 서버 성능 개선기
더 나은 개발자 되기
블로그 주도 개발
Front-end Development Process - 어디까지 개선할 수 있나
Node.js 현재와 미래
Nodejs Production 적용기

Realtime web application with java