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

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

이승재 (직업: 프로그래머)2007~2009카바티나 스토리2010~2011데스크탑 히어로즈2011~맀비노기2

이승재 (취미: 프로그래밍)2001세리오2005~2011베리즈 웹쉐어2011~WebIRC (가칭)

실시갂 HTTP 양방향 통신

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

이벤트 발생 응답 핸들릿 주소 입력 / 릿크 클릭 / … HTML 렌더릿 / 자바스크립트 실행 / …웹브라우저 요청 응답 웹서버 요청 핸들릿 서버 사이드 스크립트 실행 / 파일 읽기 / …

브라우저의 서버는요청 응답이 있어야 할 수 있다

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

트위터

페이스북 메신저

쥐메일 메신저

어떻게!!???

실시갂 HTTP 양방향 통신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 BrowserIRC 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 모듈 메시지 단위 젂송을 제공

Socket.io

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

요약주요 기법/기술 소개 Polling, Long Polling, Hidden iframe, 브라우저 플러그인, WebSocketAJAX Long Polling 경험담 IRC 웹 브릾지 맂들어 보았습니다미들웨어 소개 Orbited, Socket.io

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

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

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

http://ricanet.com	1264
http://feelthesoul.net	109
http://devilchen.tistory.com	94
https://si0.twimg.com	80
http://www.hanrss.com	50
http://10.1.1.10	38
http://blog.kinorama.com	37
http://lee-seungjae.github.com	37
http://cafe.naver.com	23
http://www.ricanet.com	22
https://twimg0-a.akamaihd.net	15
http://lee-seungjae.github.io	10
http://distynova.cafe24.com	8
https://twitter.com	6
http://113.199.115.155	4
http://50.10.175.132	3
http://cafe990.daum.net	2
http://satmeet.tistory.com	2
http://twitter.com	1
http://editor.daum.net	1
http://taemine.tistory.com	1

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

by devCAT Studio, NEXON

Accessibility

Categories

Upload Details

Usage Rights

21 Embeds 1,807

Statistics

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