본문 바로가기
  • AI (Artificial Intelligence)
Programming/JavaScript, Node.js

XHR(Ajax) > Comet > HTML5 WebSockets

by 로샤스 2014. 10. 22.
1. WebSodkets 란?

}하나의 TCP소켓 연결로 쌍방향 통신을 지원하는 기술
웹서버와 브라우저에서 구현되기 위해 고안되었지만 모든 클라이언트와 서버 프로그램간에서 사용 가능.
WebSocket APIW3C(http://www.w3.org/TR/websockets/#network-intro)에서 정의하고 있고, WebSocket 프로토콜은 IETF(Internet Engineering Task Force) 에 의해 정의 됨.

}HTTP, FTP, TELNET 등과 같은 Application layer의 프로토콜 사용.

}80번 이외의 포트로 시도되는 일반적인 TCP 연결은 관리자의 보안 정책에 따라 막히는 경우가 많기 때문에 이런 제약을 극복할 수 있는 방법이 될 수 있음.


2. 배경

}1996 Microsoft Exchange 엔지니어 팀이 메일서버 시스템에 아웃룩 같은 프론트 엔드를 제공하기 위해서 IFrame element를 사용 -> 반응성과 UX 면에서 실패

}1998MS Exchange Server 2000에서 웹 프론트 엔드를 작성하면서 [XMLHTTP : 웹 페이지에서 서버와 비동기 커뮤니케이션을 가능하게 한 컴포넌트] 개발. (이 컴포넌트는 XML과 직접적인 연관이 없음에도 접두사로 XML을 쓴 이유는 IE5가 두 번째 베타 버전을 준비하고 있었는데, 이 개발팀은 XMLHTTP 컴포넌트를 MSXML 라이브러리에 포함시켜야 했기 때문)

 

}2002년 이 기술은 Mozilla 재단이 첫 번째 브라우저 버전을 위해 (미래의 Firefox) XMLHTTPRequest (XHR)로 구현.  이후, 이 새로운 API를 사용하려고 하는 시도는 많았지만 사람들의 주목을 받지 못 함.

}구글이 자바스크립트와 XHR에 기반한 차세대 서비스를 배포하면서 많이 알려지게 됨. 첫번째 서비스는 2005 2구글 블로그를 통해 알려진 구글 지도.

}그 이후 XHR은 뜨거운 관심사가 되었고, 그 누구도 예상하지 못 했지만 Web Application 발전을 이끌게 됨.


3. 웹에서 비동기 커뮤니케이션 기술

}Ajax : 비동기 식으로 서버에 데이터를 요청해서 받음. (asynchronously poll). 서버 이벤트가 큐에 담겨지고 하나씩 브라우저로 전송. 진정한 의미의 실시간 커뮤니케이션이 어려움.

}Comet : 클라이언트의 요청 없이 서버에서 정보를 브라우저로 내려보내는 push 스타일 커뮤니케이션 모델. 추가적인 HTTP 연결을 통해 Comet은 양방향 커뮤니케이션을 지원함.
XHR and iFrames를 지원하는 Browser Vendor 들에 의해 제공되는 표준이 없고, 네트워킹과 개발에 있어서의 과부하, 두 개의 연결을 관리하는 문제 등이 있음.
다른 용어
: Ajax Push, Reverse Ajax, Two-way-web, HTTP Streaming, HTTP server push

}HTML5 WebSocket : Comet Ajax를 대체할 새로운 기술.
하나의 소켓으로 서버와 클라이언트 간의 양방향 커뮤니케이션을 가능하게 함
.
Comet 의 연결과 비대함 문제를 해결하고, Ajax polling 보다 효율적인 방법을 제시.


4. 구현

▶jWebSocket (Java) : http://jwebsocket.org/
▶web-socket-ruby (ruby) : https://github.com/gimite/web-socket-ruby
▶Socket IO-node (node.js) : https://github.com/LearnBoost/Socket.IO-node



[출처 1] http://www.infoq.com/news/2008/12/websockets-vs-comet-ajax (전부 읽어 봐야 할텐데...ㅜㅜ)
[출처 2] http://en.wikipedia.org/wiki/Websockets
[출처 3] http://en.wikipedia.org/wiki/Comet_(programming)

 

 

 

 

 

 

 

 

출처 : http://yarbong.tistory.com/36

 

 

 

 

 

 

 

댓글