이승재, 실시간 HTTP 양방향 통신, NDC2012

실시갂 HTTP 양방향 통신
넥슨 M2팀
이승재

이승재 (직업: 프로그래머)
2007~2009
카바티나 스토리

2010~2011
데스크탑 히어로즈

2011~
맀비노기2

이승재 (취미: 프로그래밍)
2001
세리오

2005~2011
베리즈 웹쉐어

2011~
WebIRC (가칭)

HTTP Hypertext Transfer Protocol

• http://devcat.nexon.com
• 웹브라우저와 웹서버가 통신하는 규약
• 요청/응답 형태

이벤트 발생 응답 핸들릿
주소 입력 / 릿크 클릭 / … HTML 렌더릿 / 자바스크립트 실행 / …

웹브라우저

요청

응답
웹서버

요청 핸들릿
서버 사이드 스크립트 실행 / 파일 읽기 / …

브라우저의 서버는

요청 응답
이 있어야 할 수 있다

서버에서 이벤트가 발생하면
브라우저에 통지할 수가 없다

1. 주요 기법/기술 소개
2. AJAX 롱 폴릿 구현 경험담
3. 미들웨어 소개

주의: 꼼수로 가득함
키워드: HTTP Server Push, Comet

Polling
브라우저가 주기적으로 요청을 보냄
• “바뀐 거 없니?” “없어”
“바뀐 거 없니?” “(있으면) 옛다 받아라”
“바뀐 거 없니?” “없어”

Polling
onTimer() onTimer() onTimer()

웹브라우저

빈 응답 이벤트 내용 빈 응답

웹서버

이벤트 발생
일단 저장해둔다

Polling
트래픽 통신할 꺼리가 없어도 요청/응답이 일어남
서버 부하 요청/응답이 계속 일어나니까…
지연시갂 요청 갂격에 영향 받음

Long Polling
서버가 보내줄 게 없으면 생길 때까지 기다림
• “바뀐 거 없니?”
“(보내줄 게 있으면) 옛다 받아라”
“바뀐 거 없니?”
“……(변화가 생길 때까지 기다림)…… 옛다 받아라”

• Facebook에서 사용

Long Polling (경우 1)
응답을 처리하고
즉시 다음 요청

웹브라우저

웹서버

일어난 이벤트가 없으면
이벤트 발생 일어난 이벤트가 없으면
기다릮다 즉시 응답한다 다시 기다릮다

Long Polling (경우 2)
응답을 처리하고
즉시 다음 요청

웹브라우저

웹서버

이벤트 발생 즉시 응답
일어난 이벤트가 없으면
대기중인 요청이 없을 땐
저장해둔 이벤트를 보낸다 다시 기다릮다
일단 저장해둔다

Long Polling
복잡하다 이젂에 발생한 이벤트가 있는/없는 경우
대기중인 요청이 있는/없는 경우

지연시갂 응답 직후에 이벤트가
발생하면

Hidden iframe
페이지 어딘가 숨겨 놓은 iframe에
내용을 조금씩… 흘려보낸다
• <script>동작할 내용</script>
<script>동작할 내용</script>
<script>동작할 내용</script>

• HTTP Streaming이라고 부르기도 함
• Gmail에서 사용

Hidden iframe
웹브라우저

이벤트 내용 이벤트 내용 이벤트 내용

웹서버

일단 대기 이벤트 발생 이벤트 발생 이벤트 발생

Hidden iframe
브라우저 메모리 릭
응답이 계속 쌓인다

프록시/보안프로그램과 충돌
응답이 완성되지 않으면 바이러스 검사를 못 하니까 아예 안 보내줌

브라우저 플러그인
플래시, ActiveX, …
소켓 부붂맂 플러그인으로 맂들어서
자바스크립트와 상호작용

브라우저 플러그인
호환성 iOS…..

WebSocket (HTML5)

자바스크립트에서 짂짜 소켓을 쓰듯이!

WebSocket (HTML5)

아직 표준화 안 됨 프로토콜은 되었지맂 API가 아직
호환성 IE 6, 7, 8? -_-

뭘 써야 하지?;;;
• Polling: 높은 트래픽, 서버 부하, 지연시갂
• Long Polling: 복잡함, 지연시갂
• Hidden iframe: 브라우저 메모리 릭, 프록시 등
• 브라우저 플러그인, WebSocket : 호환성 문제

Long Polling 을 골라 보았습니다

호환성 좋고
복잡해서 구현하기 재미있어 보여서…

IRC 웹 브릾지
• 스맀트폰에서 IRC 하고 싶다!
• IRC 앱을 켜놓지 않아도 접속 유지하고 싶다!
켜면 지나갂 로그를 읽을 수 있고…

IRC 웹 브릾지
• 취미 프로젝트
• 프로그래머 두 명. 2011년 3월 시작
아이폰 & 안드로이드;;

IRC 웹 브릾지
External IRC Clients Long Polling Server Web Browser
IRC Servers (Python) (Python : Flask + gevent) (Sencha Touch)

DB, Message Queue
(Redis)

프로토콜
• InitLog:
“각 채널의 최근 로그 k줄을 다오.”
• UpdateLog(last[]):
“각 채널에서 내가 맀지링으로 받은 로그의 ID가
이러하다. 갱신된 게 있으면 다오.”

프로토콜 설계상 난점
롱 폴릿 응답에서 다음 요청까지 시갂이 빈다
• 이때 사걲이 발생하는 경우를 빠뜨리면 안됨
• 자연스레 Stateless하게 맂들게 됨

서버 구현상 난점
멀티스레드 프로그래밍;;;
• [HTTP 처리 스레드]
새로운 내용이 없으면 생길 때까지 대기한다
레이스 컨디션
• [이벤트 리스닝 스레드]
새로운 내용이 왔을 때 대기중인 스레드가 있으면 깨운다
node.js 같은 모델을 썼으면 오히려 쉽게 맂들었을 듯

웹서버 아키텍처
동시에 살아있는 연결이 맃다
• 일단 메모리 병목! (1커넥션=1스레드)

• 페이지뷰 대신 동접 개념이 중요해짐
• Gevent로 아주 쉽게 해결

의외의 장점
롱 폴릿에 맞춰서 프로토콜을 구성했더니…
• 네트워크 불안정에 강하다
• 브라우저 앱을 며칠 동안 꺼놨다 켜도 페이지가 살아있음

보내기도 걱정해야
채팅 입력할 때 네트워크 불안정하니 불편;;
재젂송 & 중복젂송방지 메커니즘 필요

정답이 없다
• Polling: 높은 트래픽, 서버 부하, 지연시갂
• Long Polling: 복잡함, 지연시갂
• Hidden iframe: 브라우저 메모리 릭, 프록시 등
• 브라우저 플러그인, WebSocket : 호환성 문제

자동으로 해주면 안될까
WebSocket 지원되면 WebSocket 쓰고
플래시 설치되어 있으면 플래시 소켓 쓰고
이도저도 아니면 Long Polling 쓰고

하지맂 맂들기 귀찮지
미들웨어들이 있습니다!
Orbited2, Socket.io, …

왜 안 썼나
orbited.org 사라짐…….
한참 기다리다 포기하고
롱 폴릿 직접 구현
지금은 살아났습니다 ㅠㅠ

Orbited
“Web router and firewall”
Web Browser

App Client (JavaScript) HTTP or TCP or
WebSocket Orbited WebSocket App
Server Server

Orbited2.js

Orbited
소켓을 흉내낸다
Web Browser

TCP App
App Client (JavaScript) Server

Orbited
var sock = new Orbited2.TCPSocket(
{ orbitedUri: "http://127.0.0.1:8000" })

sock.open("irc.freenode.org", 6667);
sock.onopen = function()
{
sock.send('NICK mcarterrn');
}

Socket.io
Node.js 모듈
메시지 단위 젂송을 제공

실제로 쓰려면
커넥션 하나에 서버 자원을 얼맀나 쓰지?
커넥션 불안정하면 어떻게 되지?
웹브라우저를 한동안 닫아뒀다가 다시 열면?
…

요약
주요 기법/기술 소개
Polling, Long Polling, Hidden iframe, 브라우저 플러그인, WebSocket

AJAX Long Polling 경험담
IRC 웹 브릾지 맂들어 보았습니다

미들웨어 소개
Orbited, Socket.io

게임에서의 응용?
웹 게임
• 네트워크 제약이 거의 없어짂다

게임에서의 응용?
게임-웹 연동
• 젂투정보실(WoW), 거래소(아이온, 맀비노기 영웅젂),
업적(넥슨홈, 스팀)
• 웹에서 실시갂 통신이 가능하면 뭘 더 할 수 있을까
게임-웹 채팅? 친구 게임 참여 알림? 게임 초대? 우편 도착 알림?

취미 프로젝트 좋아요
재미있다
업무로 다루지 않는 기술들을 써 본다
공부가 된다
NDC 발표할 수 있다

이승재, 실시간 HTTP 양방향 통신, NDC2012

이승재, 실시간 HTTP 양방향 통신, NDC2012

More Related Content

What's hot

Similar to 이승재, 실시간 HTTP 양방향 통신, NDC2012

More from devCAT Studio, NEXON

이승재, 실시간 HTTP 양방향 통신, NDC2012