Pragmatic Programmer

Real time Apps #1
Polling, LongPolling, Server Sent Events, Websocket, SignalR

 실시간 인터랙티브 웹 페이지(또는 앱, 이하 웹 페이지로 통일)에 대해서 익히 들어 봤을 것이다. 사용자의 행동(클릭, 스크롤,...)으로 웹 브라우저에서 서버의 변경된 데이터를 사용자에게 보여 줄 수 있는 웹 페이지 말이다. 사용자의 발전되는 경험으로 인해 오래전부터 인터랙티브형 웹 페이지에 대해 요구되고 있었으며, Ajax 방법론이 대두 되면서 사용자가 만족할 만한 인터랙티브 웹 페이지를 만들 수 있었다. 그렇지만 앞으로의 개발 방향이 기존의 레거시 시스템을 웹을 지원하는 방향으로 흘러가고 있으며 Active-X, Flash, Silverlight를 제외 하고 표준 HTML 과 CSS, Javascript 만으로 C/S 프로그램이 하던 일을 대체해야 한다는 시대적 흐름이 형성 되었다. 그리고 시대적으로 새로운 디바이스(이기종 스마트폰, 이기종 타블렛, Other...)가 출시되었으며 새로운 규격의 브라우저에서도 호환되게 개발해야 한다. 개발자는 이러한 여러 가지 제약 사항을 이겨내고 만족 스러운 인터랙티브형 웹페이지를 구현하기란 쉽지 않다. 

 그렇지만 개발자들은 고객의 요구 사항을 최대한 만족 시키기 위해 부단히 노력하여 여러 가지 시도로 인터랙티브형 웹 페이지가 되도록 노력하였다. 그래서 Polling, LongPolling등과 같은 방법으로 인터랙티브형 웹 페이지가 되도록 개발하게 되었다. 하지만 처음 설계될 당시의 HTTP 프로토콜과 HTML의 한계성을 가지고 있기 때문에 개발자는 뒤에서 컨트롤하고 사용자에게는 감추는 역할을 더 많이 신경 쓰게 된 것이다. 세계의 여러 개발자들이 이런 문제점을 개선하고자 HTML5와 ECMAScript 6(ECMAScript는 표준화된 스크립트 프로그래밍 언어를 말한다. - 위키피디아 click) 표준이 정립이 되고 있으며 Windows, Linux 같은 또 다른 하나의 개발 플랫폼으로 HTML이 진화를 하고 있다.

 HTML5에 대해서 좀더 이야기를 하고 싶으나 주제에 벗어나므로 간단히 정리하고자 한다. HTML5를 짧게 수식 같이 정리하면 아래 '표1'과 같을 것이다.

[표1] HTML5 정의 표

 (이것은 개인적인 정의일 뿐 W3C 공식적인 정리는 아님을 알려 드린다.)

 Javascript와 CSS에 대해서는 대부분 알 고 있을 것이라 생각하고 Template에 대해서만 더 설명을 더 하겠다.

 간단하게나마 HTML5에 대해서 마무리를 하고 이제 본론으로 돌아와 인터랙티브 웹 페이지를 가능 토록하는 방법 중에 서버와의 통신으로 데이터를 가져오는 기법이란 주제로 좁혀 다루고자 한다. 아래 목차대로 하나씩 짚어 나가면서 진행해 보도록 하겠다.

 본격적으로 살펴보기에 앞서서 아래 '표1'과 같이 데이터 통신에 관한 기술 정리를 간단하게나마 해 보았으니 참조만 하자.

※ hybrid : 하위 브라우저 호환을 지원하는 기능으로 WebSocket를 지원하지 않는 브라우저에서는 다른 하위 통신 방식으로 데이터 요청을 지원해준다.

[표2] 통신 방식

SignalR Cross browser Compatibility over WebSocket

 SignalR은 Microsoft에서 WebSocket을 지원할 수 있도록 해주는 프레임 웍이다. SignalR은 WebSocket 프로토콜 위에서 돌아 가는 방식이며 WebSocket을 지원하지 않는 브라우저에서도 호환될 수 있도록 지원하고 있다. 그냥 단순히 WebSocket을 사용하는 웹 페이지를 만든다면 HTML5를 지원하는 브라우저 여부를 판단하여 그렇지 않은 브라우저는 다른 방식으로 구현을 해야 할 것이다. 그렇지만 SignalR을 사용하여 편리하고 일관되게 하위 호환성을 확보 할 수 있을 것이다.

 SignalR을 지원하는 브라우저에 대해서 알아 보자

 jQuery는 1.6.4 이상 지원

• Microsoft Internet Explorer versions 8, 9 and 10. Desktop, and Mobile 지원.
• Mozilla Firefox: current version - 1, both Windows and Mac versions.
• Google Chrome: current version - 1, both Windows and Mac versions.
• Safari: current version - 1, both Mac and iOS versions.
• Opera: current version - 1, Windows only.
• Android browser

  jQuery 1.6.4이상의 버전과 브라우저만 있으면 SignalR이 제공해주는 일관된 방법으로 개발 할 수 있을 것이다.