11. WebSocket 을 통한 실시간 통신 구현하기
우리는 지금까지 포스트 작성, 초기로딩과 추가로딩도 구현했습니다. 하지만 아직, 새 포스트를 작성 했을 때는 새로고침을 해야만 불러올 수 있죠. 새 포스트를 작성 했을 때 단순히 리스트의 앞 부분에만 데이터를 추가하는 방식으로 구현을 하면, 일단 작동은 할 것입니다. 하지만, 새 포스트가 작성 됐다는걸, 본인만 알 수 있겠죠. 다른사람이 페이지를 보고 있을 때는, 그 사람들이 새로고침을 해야만 우리가 새로 작성 포스트를 볼 수 있습니다.
이를 해결 하기위해선 크게 세가지 방법이 있습니다.
Short Polling: 짧은 시간 단위로 주기적으로 서버에 새 데이터가 있는지 요청을 합니다. 이 방식은 구현하기는 편하지만 사용자가 많아지면 모든 사용자가 가만히 있어도 주기적으로 서버에 요청을 보내다보니, 서버에 부하가 가게 됩니다.
Long Polling: 이는 위 방식과 사뭇 비슷하면서도 다른데, 클라이언트가 서버에 주기적으로 요청하는것은 동일합니다. 하지만, 서버가 바로바로 응답하는게 아니라, 클라이언트가 새 데이터를 요청하게 되면 만약에 보여줄 새 데이터가 있으면 바로 응답을 하고, 새 데이터가 없는경우엔 응답을 지연시킵니다. 그 다음에, 새 데이터가 생성되면 이 때 응답을 하게 됩니다. 롱 폴링을 할 때는 타임아웃을 30초정도 설정을 하여, 30~60초정도 기다리다가, 주어진 시간이 지나면 서버는 데이터가 없다고 응답을 하게되고, 그러면 클라이언트는 재요청을 하게됩니다. 새 데이터가 없을때는 요청을 뜸하게 하기 때문에 서버에는 지장이 안되지만, 새 데이터가 자주 생성이 된다면, 결국엔 모든 유저가 계속 요청을 반복하기 때문에 여러명이 반복적으로 사용하는 서비스에서는 권장되지 않습니다. 보통, 다음 서술될 Socket 이 지원되지 않는 환경에서 이 방식을 통해 서비스를 구현합니다.
Socket: 이 기술은 은 위 문제점들을 해결해주는 방안입니다. 소켓을 통하여 서버와 클라이언트 간의 연결을 계속 활성화 시키고, 클라이언트는 요청만하고, 서버는 응답만 하는 구조가 아니라, 클라이언트가 대기하고, 서버가 클라이언트에게 직접 데이터를 전달하는 방식입니다. 그리고, HTTP 헤더가 초기에만 전달이 되고 그 다음엔 필요한 데이터만 양쪽으로 전송이 되니, 트래픽 부분에도 많은 절약이 발생하게 됩니다.
11장의 타이틀을 보고 이미 짐작을 했겠지만, 우리는 위에서 서술 된 기술들 중에서, Socket 을 사용해서 새 포스트 로딩을 구현하겠습니다.
우리는 브라우저에서 소켓을 사용하기 위해, Websocket 이라는 기술을 사용하게 됩니다.이 기술은 2010년에 만들어진 브라우저 기술입니다. 과거엔 WebSocket 을 사용하지 않은 브라우저의 비율이 높았기 때문에 Socket.io 혹은 SockJS 등을 사용해서 WebSocket 이 없는곳에서는 위에서 말했었던 Long Polling, 혹은 Flash 소켓, iframe 트릭 방식 등을 통해 구현을 했었죠.
Socket.io 는 당시 개발자들에게 폭발적인 인기를 끌었고, 웹 상에서도 실시간적으로 처리되는 서비스를 만들 수 있게 해주었습니다. 덕분에 많은 유용한 웹어플리케이션이 개발됐었습니다.
하지만 이제는 Socket.io 를 무조건 사용 할 필요가 없습니다. WebSocket 은 IE10 에서부터 지원이 되며 그 이하 버전의 비중은 매우 적습니다. (만약에 여러분의 서비스가 IE9 이하 버전을 지원해야된다면, Socket.io 혹은 SockJS 를 사용 할 필요가 있습니다.)