- 등장 배경
기존 Web 통신은 모두 클라이언트(Browser) 의 요청 --> Server 의 응답 형식이었다. Polling 방식 + 단방향 통신으로 IO 를 구현해온 것이다. 그래서 Web 환경에서 채팅 기능을 구현하려면 클라이언트는 일정 주기 별로 계속 서버에 메시지 도착 유무를 판단하기 위하여 Polling 해야 한다.
HTML5 에서는 Established 된 TCP 연결을 통해서 양방향이 동시 통신을 할 수 있게 되었다. 이것을 프로그래머 입장에서 좀 더 귀가 트이게 이야기 하자면, Mobile Web application 에서 PUSH 기능을 쓸 수 있게 된 것이다.
- 성능의 향상
기존 Web 통신에서 그나마 쓸만한 것이 Ajax 이었다. 만약 똑같은 기능을 Web socket 과 Ajax 로 구현하면 그 성능 차이는 어떨까?
인터넷에서 조금만 구글링 해보면 Performance 테스트한 결과들을 쉽게 볼 수 있는데, 정량적인 수치를 단언하긴 힘들지만 일반적으로 30배 이상 속도가 빠르다. 그럴 수밖에 없는 것이, Ajax 는 호출 할 때마다 연결을 새롭게 해야 한다. 그렇기 때문에 송신해야 하는 Data 는 HTTP 헤더 정보를 포함해서, 항상 더 많다. 반면에 Web socket 은 Established 된 TCP 연결 상에서 필요한 Data 만 바로 보내면 되기 때문에, 클라이언트와 Server 사이의 대역폭을 훨씬 효율적으로 사용할 수 있게 된다.
- 구현하는 방법
Javascript 내에서 간략하게 Web socket 기능을 구현해서 쓸 수 있다. 객체를 만들고 Event Handler 를 부착하기만 하면 된다.
<script lang="javascript"> var ws = new WebSocket("http://yourdomain.com");
// PUSH Message Handler ws.onmessage = function(msg) { alert(msg.data); } // Connection Established ws.onopen = function(msg) { alert("Connection Established"); }
// Connection Closed ws.onclose = function(msg) { alert("Connetion Ended"); }</script>
