웹소켓을 사용하기 이전의 채팅 구현

채팅 프로그램을 웹을 사용하여 구현하려면 html5의 웹소켓(websocket)이 먼저 떠오를 것이다. 웹소켓을 사용하여 브라우저를 통한 TCP 방식의 양방향 서비스를 비교적 간단하게 구현할 수 있겠지만 이전에는 어떻게 구현했을까? 그리고 어떤 고민이 있었을지 함께 고민해보고자 한다.

# 채팅 프로그램의 구현

실시간 채팅 프로그램이 정상적으로 동작하기 위해서 무엇이 필요할까? 우선 아래의 항목들이 요구될 것이다.

1. 지속적인 양방향 통신
2. 수 많은 사용자 지원
3. 빠른 통신 속도

위 세가지 중에서 1번은 실제 어플리케이션으로써의 구현을... 그리고 2, 3번은 처리 속도 및 성능과 관련이 있다.

# 지속적인 양방향(bi-directional) 통신

채팅은 클라이언트와 서버가 계속해서 메시지를 주고 받아야한다. 1대 다수... 즉, 한대의 서버와 수 많은 사용자가 연결되어 있기 때문에 서버에서는 채팅방에 실제 채팅이 발생(누군가 메시지를 전송)하는 경우 전달받은 데이터를 저장하면 가장 큰 역할은 끝이난다. 하지만 변경된 채팅창의 내용을 클라이언트는 어떻게 알아차릴까...

만약 만 명이 동시에 채팅 중이라면 만 명에게 하나의 텍스트가 추가되었다고 서버에서 다시 모든 클라이언트에게 전송(push)해야 할까? 만명이 1초에 하나씩 쓴다고 가정한다면 억 번의 요청이 필요할 것이다...


고민하기 이전에 일단 채팅 시스템을 구현해보자! 어떤 방법이 있을까? (웹소켓 방식은 제외하고 얘기하면)


1. iframe, frame을 사용하여 구현
2.비동기 방식의 ajax를 사용하여 구현

# iframe 또는 frame 태그를 사용하는 방법

이 방법은 클라이언트의 채팅 페이지에 안보이는 iframe, frame을 추가하는 방법이다. 이 방법을 사용하면 불필요한 서버로의 폴링(polling)이 없어도 채팅창에 새로운 글이 업데이트 되었음을 알아차릴 수 있다.

안 보이는 frame의 역할은 채팅의 내용을 지속적으로 보여주고 클라이언트에서 스크립트를 사용하여 해당 frame의 내용을 실제 사용자가 보게될 view 영역에 연동하면 된다.

성능을 고려하지 않는다면 매우 효과적인 방법이다. 서버와의 동기화를 위하여 어쩌면 아무런 소득이 없을지 모를 불필요한 통신이 없어도 된다.

# 비동기 방식을 사용하는 방법

ajax를 사용하여 비교적 작은 요청(request)과 작은 수신(response)을 이용할 수 있다. 하지만 비동기 방식 역시 폴링 방식임으로 비교적 작은(?) 통신이 가능하겠만 채팅에 참여한 사용자가 늘어날 수 있다는 점... 그리고 불필요할 수 있는 헤더 정보를 달고 다녀야 한다는 점이 문제가 될 것이다...


웹소켓(Web Socket)을 사용하면 위 방식들이 조금씩 가지고 있던 문제점을 해결할 수 있다. 가장 효과적인 양방향 통신이 가능한 것이다. 새로운 기술이 도입되기 이전에는 어땠을지 알아보는 것도 참 재미있는 일이다.