MixedCode

안녕하세요. 믹스드코드 강창훈입니다.
HTML5 Websocket 과 ASP.NET SignalR 서버 기술을 이용한 참 쉬운 웹채팅 시스템개발하기 코드랩을 시작하도록 하겠습니다.
먼저 실시간 웹서비스에 대한 개념을 파악 후 해당 서비스의 구현기술에 대해 점진적으로 알아보도록 하겠습니다.

1) 실시간웹(RealTime Web)이란?

실시간 웹(Real-time web)의 위키의 사전적 의미는 인터넷에서 사용자들로 하여금 창작자가 정보를 만들어내는 즉시 소비자가 수신할 수 있도록하는 기술 혹은 서비스들을 말합니다.
이는 구독하여 정기적 혹은 부정기적으로 업데이트를 받는 것과 차별화된것입니다.
실시간 웹에서 전달되는 정보의 형식은 단문 메시지, 상태 업데이트, 새로운 뉴스 속보나 긴 문서로의 하이퍼링크 연결등입니다.
성공적인 실시간 웹서비스의 예로는 페이스북의 뉴스피드나 트위터등 SNS서비스등이 있으며 실시간 웹서비스를 지원하기 위한 다양한 기술들이 존재합니다.

상기 사전적 의미의 실시간 웹의 내용중 주요한 부분은 인터넷,즉 웹상에서 이루어지는 서비스이며 정보의 제공과 소비가 실시간으로 이루어진다는 것입니다.

전통적인 웹상에서의 컨텐츠 공급과 소비 형태를 홈페이지로 예를 들어보면 관리자나 사용자가 컨텐츠를 등록하면 일반적으로 소비자는 컨텐츠 등록사실을 알아차리지 못하며 이를 돕기위한 보조수단으로 메신저/RSS/메일이나/SMS 등으로 관련 소비자등에게 노티를 주고 소비자들은 별도의 수단(이종시스템,ActiveX플러그인)의 도움을 받아 컨텐츠의 갱신정보를 알아차리고 해당 컨텐츠에 접근하게 됩니다.

컨텐츠 소비 방식 또한 사용자의 요청(Request)이 있어야만 요청시점의 최신정보 구독이 가능하며 요청 이후 변경된 사실에 대해서는 사용자가 재요청을 하거나 별도 노티가 없다면 컨텐츠의 실시간 소비가 불가능한 구조입니다.

전통적인 인터넷상에서의 실시간 메시징(채팅) 또한 사용자 디바이스(PC,태블릿,스마트폰)에 별도의 프로그램(네이트온,카톡,페이스북,ActiveX)를 설치하고 서버에도 실시간 메시징 서버 프로그램(채팅서버)을 설치해야만 상호 메시징이 이루어지며 이 또한 PC/태블릿/스마트폰등의 환경을 통합해서 단일방식의 메시징을 하기에는 많은 노력과 비용이 발생합니다.

ㅁ실시간 웹 서비스를 구현하기 위해 선행되어야할 항목을 나열해 보겠습니다.
-모든 디바이스(PC,노트북,태블릿,스마트폰,스마트TV,각종스마트 디바이스)를 통합할수 있어야한다.
-모든 디바이스(PC,노트북,태블릿,스마트폰,스마트TV,각종스마트 디바이스)에서 동일방식(기술)로 통신할수 있어야한다.
-특정 디바이스별로 별도의 프로그램 설치없는 인터넷 표준기술을 사용할수 있어야한다. 

2.2 RealTime Web 통신 및 기술들

기존 웹 은 사용자의 요청에 의해서만이 웹서버를 통해 응답을 받을수 있었던 구조였던 반면에
실시간 웹은 사용자의 요청이 없어도 서버 상에서 데이터의 상태가 변경(등록,수정,삭제) 되었거나 이벤트가 발생하면 브라우저를 통해 서버와 현재 연결된
모든 사용자에게 메시지 데이터(string,json)를 전송(Push)할수있는 환경을 제공합니다.

실시간 웹 서비스 구현을 위해서는 실시간 웹 통신환경이  준비되어야합니다.
실시간 웹(이하 RealTime Web) 통신이란 웹 환경에서의 클라이언트인 웹브라우저와 서버인 웹서버간에
연결기반의 메시지 통신을 말하며 브라우저에서 서버로의 메시지 전송 뿐만아니라 서버에서 브라우저로의 메시지전송(Push or Polling)을 의미합니다.

실시간 웹(RealTime Web)통신은 웹서버에서 클라이언트인 사용자 웹브라우저로 필요시 마다 바로 응답(메시징)을 할수 있다는것을
의미하며 이는 전통적인 웹의 서비스방식인 비연결 기반에서의 사용자 요청에 의해서 발생하는 Pulling 방식이 아닌 연결기반에서의 서버 Push 방식을 의미합니다.

ㅁPush기반 전송기술
-HTML5 WebSocket : HTML5에서 지원하는 전송기술이며 HTML5을 지원하는 대부분의 클라이언트의 최신버전 브라우저(IE10,Chrome,Firefox최신버전은 완벽히 지원되며 Opera,Safari등은 선택적으로 지원됨)들은 지원하며 장점으로는 클라이언트에서 서버로 서버에서 클라이언트로 양방향 전송(twoway)이 가능하며 전송속도 또한  다른 전송기술보다 가장 빠릅니다.

-ServerSentEvents : 클라이언트와 서버간 1회선으로 연결되며 재연결의 필요성이 없지만 서버에서 클라이언트로의 단방향 전송만 지원하며 IE는 지원하지 않습니다.(다른 브라우저는 대부분 지원)

ㅁComet 기반 전송기술
-Forever Frame : IE에서만 지원하며 iframe이 반복적으로 불필요한 데이터와 함께 로드되는 방식으로 서버에서 클라이언트 메시지를 전송한다.

-Ajax long Polling: Long Polling방식은 연결이 지속되지 않으며 지속적으로 클라이언트의 연결가능상태를 확인하여(Polling) 단일 연결 작업 처리후 연결이 끊기고 다시 폴링을 통해 클라이언트에 연결하는 기술입니다.
Ajax를 지원하는 모든 브라우저에서 지원합니다.

3.3 RealTime Web 활용사례

실시간 웹기술 응용분야로는 채팅서비스,알림서비스,실시간 대시보드,웹게임,시뮬레이션,협업툴,모니터링툴,프로그레스바 등 실시간으로 브라우져와 웹서버간 데이터를 주고받을수 있는 다양한 분야에 사용될수 있습니다.

상기 응용분야별로 구현가능한 예를 좀더 자세히 제시해 보겠습니다.

ㅁ웹 채팅
-ActiveX나 사용자 컴퓨터에 채팅 클라이언트 프로그램 설치 없이도 웹브라우져 만으로 웹서버와의
RealTime통신을 통해 채팅구현이 가능합니다.
-(유무선통합)웹채팅,그룹채팅,화상회의시스템,화이트보드

ㅁ알림서비스
-DB에 데이터가 변경되었거나 웹서버에서 특정 이벤트가 발생하면 실시간으로 웹사이트 접속 사용자들에게 알림 메시지를 발생 시킬 수 있습니다.
-쪽지서비스,스마트폰 SNS,실시간 공지 알림(학원..),대시 보드,증권정보,공시정보,경매정보,물가정보,날씨정보...

ㅁ게임
-HTML5 기술을 이용 웹 게임 구현 시 서버와의 실시간 통신에 적용
-웹게임,케주얼게임
http://shootr.signalr.net/

ㅁ모니터링툴
-빌딩관리,시설물관리,공장자동화,서버관리,각종 자원들의 실시간 모니터링 데이터의 웹 기반
모니터링툴 제작에 활용
-BMS(빌딩관리시스템),BEMS(빌딩에너지관리시스템),FMS(시설물관리시스템),실시간 데이터 변경 모니터링시스템

ㅁ프로그레스바,챠트
-대용량 멀티 파일 업로드,대용량 데이터 전송 시  진행 율 정보를 실시간으로 프로그레스바로 표현가능합니다.
-대용량파일업로드컴포넌트 대체, 데이터전송 모니터링,실시간 챠트 프로그램

다음시간은 실시간 웹을 구현해주는 대표적인 기술인 HTML5 WebSocket에 대해 알아보고 직접 초간단 채팅 페이지를 만들어 웹채팅을 개발하고 경험해보겠습니다.
감사합니다.