[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기

HTML5/WebSocket으로
Pong 게임 만들기
iFunfactory
민영기

2018 iFunFactory Dev Day
Contents.
01 웹 게임의 과거와 현재
02 Pong
03 Pong 을 위한 네트워킹 기술
04 Pong 을 위한 클라이언트 기술

웹 게임의 과거와 현재
01

옛날 옛적 웹 게임은…
서버 사이드 구현
• 서버 기반 렌더링
• 정적인 컨텐츠 위주
• 제한적인 상호작용
플러그인
OR

출처: http://news.inews24.com/php/news_view.php?g_serial=1083844&g_menu=020500
출처: https://www.hungryapp.co.kr/news/news_view.php?bcode=news&catecode=010&pid=60179

2018iFunFactoryDevDay
•HTTP
• 전이중(full-duplex) 통신 불가
• Server push 불가
•HTML/javascript
• Markup language의 한계
• DOM 조작의 한계
웹에서 멀티플레이 게임을?

•브라우저에서 플레이 가능
•순수 웹 기술만 사용
•유저간 실시간 동기화 지원
•되도록 간단한 게임을 제작
백문이 불여일작(作)

Pong
02

•1972년 아타리에서 개발
•최초로 상업적으로 성공한 비디오 게임
•탁구와 비슷한 대전 게임
Pong

게임 화면

•공이 자신의 뒤로 나가면 상대가 점수 획득
•블록을 조작, 공을 상대에게 보내야 함
•지정된 점수를 먼저 얻는 쪽이 승리
규칙

•게임의 상태
• 게임 중/종료, 점수, etc…
• 느슨한 동기화 가능.
•블록의 위치
•공의 위치
동기화 대상 후보

•블록의 위치
• 일정 주기마다 자신의 블록 위치 전송
•공의 위치
• 기본적으로 동기화하지 않음
• 방향 변경 이벤트만 동기화, 그 외는 물리엔진 이용
•블록과 공의 충돌
• 자신의 충돌 시 정보를 상대에 알림
동기화

Pong 을 위한 네트워크 기술
03 토폴로지

네트워크 토폴로지
Browser Browser
P2P
Browser Browser
Sever
Client-Sever

•모든 통신은 간접적 형태로 이루어짐
• href(링크), XmlHttpRequest(Ajax), …
• TCP 및 이하 레이어로 접근 불가
•타 브라우저로의 접근은 허용하지 않음
•Client-Server 모델 사용
• 선택지가 없음
브라우저상의 통신

03 서버 Push

•Req/Resp 가 아닌, Svr push 가 필요
•가능한 가볍고 빨라야 함
•브라우저에서 사용 가능해야 함
Pong 을 위한 네트워크 프로토콜

•HTTP
• HTTP functions as a request–response protocol in the client–server
computing model
• server는 브라우저로부터의 요청 `응답` 만 가능
•스펙 상 Server push 가 불가능
웹에서의 Server Side Push

•속도 향상을 목표로 한 신규 HTTP
• 다중 stream
• 헤더 압축
•스펙에 PUSH 가 있으나…
HTTP/2

•서버가 원할 때 메세지를 보낼 수 없음
• 브라우저가 요청하지 않은 리소스 전송(O)
• 브라우저 요청 없이 메세지 전송(X)
•브라우저로부터 요청을 받았을 때
요청받지 않은 것도 보낼 수 있는 기능
HTTP/2 PUSH

•PLUG-IN
• TCP socket 으로, 네이티브 어플리케이션처럼 통신
• 보안 문제등으로 사장되어 가고 있음
웹에서의 Server Side Push

Long Polling
브라우저 서버
1. Push 받기
위해 요청 전송
2. Push할 데이터가
있을 때까지
대기
3. 1의 응답으로
Push 메시지 전송
4. 다음 Push를
받기 위해
요청 발송

•통신 빈도 증가
• 브라우저는 서버로 보낼 것이 없더라도
푸시를 받기 위해 항상 요청을 보내야 함
•통신 딜레이 증가
• 보낼 것이 있어도 브라우저로부터의 요청을 기다려야 함
•양방향 통신 불가
• 서버/브라우저가 보내는 채널을 별도로 유지해야 함
Long Polling

03 WebSocket & Socket.IO

•Web 상에서 full-duplex 통신을 지원하는 규약
•TCP 이용
•HTTP로 통신하지 않음
•TLS 를 이용한 암호화 지원
WebSocket

WebSocket Handshake
1. HTTP->WebSocket
업그레이드 요청
2. WebSocket 사용
/사용 불가 알림
브라우저 서버
3. Websocket 통신
HTTP
통신
Websocket
프로토콜
통신

•TCP / Datagram 기반 프로토콜
•Text/Binary 모두 전송 가능
•각 메세지는프레임으로 나뉘어 전달
•각 프레임마다 헤더가 추가됨
• opcode, length, …
• 이론상 프레임의 최대 길이는 2^63 Byte
WebSocket Protocol

• 프레임 헤더 크기 외의 overhead 는 없음
• 전송할 데이터의 크기에 따라 헤더 크기가 달라짐
• 크게 신경쓰지 않아도 될 수준
Websocket Overhead
데이터 크기 헤더 크기
(Byte)(C->S)
헤더 크기
(Byte)(S->C)
<126 Byte 6 2
<64 KByte 8 4
<2^63 Byte 12 8

•TLS 사용 시 메시지마다 TLS 레코드 생성
•비교적 메세지 사이즈가 작아도 tcp segement 생성
Websocket Overhead

•생성 및 연결
• var sock = new WebSocket(‘ws://{url}’);
•전송
• sock.send(msg);
•이벤트 핸들러
• sock.onopen = function(evt) { … }
• sock.onmessage = function(evt) { … }
• sock.onclose = function(evt) { … }
• sock.onerror = function(evt) { … }
Websocket API

•대부분의 브라우저가 지원
Websocket 지원 브라우저

•웹상에서 실시간 통신을 지원하는 프레임워크
•다양한 언어로 구현체 존재
• Javascript, Java, C++ 등
•다양한 통신 수단 이용
• Weboscket, long-polling, iframe, …
Socket.IO

•독자적인 프로토콜을 사용
•단순 Websocket 서버/클라와 호환 불가
•독자적인 url 형식 사용
Socket.IO

•WebSocket 사용시에도 overhead 존재
• 별도의 프로토콜(=헤더) 존재
• 별도의 handshake 과정 존재
Socket.IO

Socket.IO WebSocket

•연결 끊김 시 재연결 지원
• 하지만 재전송은 지원하지 않음
•WebSocket 없이도 실시간 통신 가능
• 하지만 대부분의 브라우저가 websocket 지원
Socket.IO

•스트리밍, 문서 협업(동시 편집 등) 기능 지원
• 게임에 필요한 것은 event 전파
•게임에 필수적인 추가기능은 없는 듯?
• 반면 overhead 는 존재
Socket.IO

PONG 네트워크 토폴로지
Browser Browser
Sever
WebSocket
WebSocketWebSocket

03 Server

•Websocket 을 지원할 것
•그 외는 다른 게임 서버 요구 사항과 같음
Pong 서버용 기술

•대부분의 웹서버 기술에서 Websocket 지원
• 웹 이외의 기술에서도 지원하는 경우 많음
•지원하는 웹 서버
•Apache, IIS, Nginx….
•지원하는 서버 프레임워크
• Spring, PHP, flask 등의 웹 프레임워크
• IFunEngine, supersocket 등의 서버 기술 프레임워크
Pong 서버용 기술

•Python/Flask/Flask-sockets
•사용 편이성 고려
•HTTP 처럼 Websocket 사용 가능
Pong 서버

Pong 네트워크 토폴로지
Browser Browser
Sever(Python, flask)
WebSocket
WebSocket WebSocket

Pong 을 위한 클라이언트 기술
04 HTML & HTML5

•Markup language
• 화면에 어떻게 표시될지는 브라우저 해석대로
•Layout 및 Layering 의 어려움
•Sound 등 멀티미디어 지원 미비
•클라이언트에 데이터 저장 불가
HTML

•<canvas>
• 직접 ‘그릴’ 수 있는 영역
•<audio>
• mp3/ogg 등의 사운드 플레이 지원
•local storage
• key/value 쌍을 클라이언트쪽에 저장하는 기능
•WebWorker
• Background 작업 수행 가능
HTML5

그러나

지금이 어느 시대인데…

Pong 을 위한 클라이언트 기술
04 HTML5 Game Engine

•Unity Webgl
• 모바일 지원 미비
• https://docs.unity3d.com/Manual/webgl-browsercompatibility.html
•Unreal html5
• 아직 실험중(experimental)인 기능
• https://docs.unrealengine.com/en-us/Platforms/HTML5/GettingStarted
HTML5 Game Engine

HTML5 Game Engine

•네트워크 기능은 거의 제공하지 않음
•통합 개발 환경 제공하는 엔진도 존재
• 백로 엔진
• https://egret.com/en/
• construct
• https://www.construct.net/kr
HTML5 Game Engine

•Phaser
• 2D 게임 엔진
• 물리엔진, 카메라, scene 관리 등 cocos2d 와 유사한 기능 제공
• 문서화가 잘 되어 있고 기술자료 풍부
Pong 을 위한 게임 엔진

Browser
Browser
Sever(Python, flask)
WebSocketHTML5
Phaser
WebSocket
Pong 기술 스택

PONG 구조
Sever
(Python, flask)
Room
(Game)
Lobby
Browser
HTTP
WebScoket

Demo
https://github.com/iFunFactory/pong-webscoket

•웹 기술만으로 멀티플레이 게임 동기화 구현 가능
•HTML5로 동적인 게임 제작 가능
•게임 개발 지원 툴도 발전 중
정리

•보안
• 브라우저에서 구동하려면 소스 암호화 불가능
• 난독화 필요
• 중요한 로직은 서버에서 구현, 혹은 검증을 통해 공격 방어 필요
과제

Q&A
Thank You!
경기도 성남시 분당구 대왕판교로 660, 유스페이스1 B동 606호 아이펀팩토리
info@ifunfactory.com +82-70-4923-6566 www.ifunfactory.com

[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기

Similar to [아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기 (20)

More from iFunFactory Inc.

More from iFunFactory Inc. (20)

[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기