狠狠撸

自宅で出来る！ゲームサーバの作り方
2015/04/18 上原光晶
1

自己紹介
? IT系企業でPGを7年
? ゲームPGを9年ほど
? iアプリ6年、スマフォアプリ3年
? 主にサーバ、最近の4年はクライアントも
? サーバは主にJava(Tomcat)
? クライアントはJava(iアプリ)、C#(Unity)
2

概要
ゲームサーバ勉強会も含め、様々な勉強会で知識を得る
機会は多いが、実際にそれを試す環境があるとは限らない。
しかし、特にサーバサイドのソフトウェアは多くがオープン
ソースで公開されており、個人でも無料で試すことが出来る。
そこで、基本となるWeb+DBベースのゲームサーバ環境の
一例として、簡単なチャットサーバの構築方法をお話したい。
※ 資料とプロジェクトファイルは、後ほど公開致します。
3

チャットサーバイメージ図
クライアントクライアント
Webサーバ
DB KVS
MySQL
Tomcat
Redis
Webブラウザ Webブラウザ
VMware Player
4

? 事前準備
? サーバ環境構築
? 開発環境構築
? サーバ実装
5

? 事前準備
? サーバ実装
6

環境
? OS：Windows7
? 仮想マシン環境：VMware Player 7.1.0
? 仮想マシンOS：CentOS 6.6
? 開発環境：Eclipse 4.4.2 Pleiades All in One
7

環境
? 仮想マシン：VMware Player 7.1.0
? https://my.vmware.com/jp/web/vmware/
free#desktop_end_user_computing/vmware_player/7_0
? VMware-player-7.1.0-2496824.exe
8

環境
? サーバOS：CentOS 6.6 isoイメージ
? http://wiki.centos.org/Download
? CentOS-6.6-x86_64-bin-DVD1.iso
9

環境
? Eclipse 4.4.2 Pleiades All in One
? http://mergedoc.sourceforge.jp/index.html#/
pleiades_distros4.4.html
? Java版の64bit Full Edition
10

? 事前準備
? サーバ実装
11

OSインストール
? VMware Player起動
? 新規作成で仮想マシン作成
12

? CentOS6.6 isoイメージをマウント
13

? アカウントを入力
14

? 仮想マシン名とフォルダ指定
15

? 後は指示通りにすると自動的にインストールが完了
16

サーバ設定
? 言語を日本語に指定し、
先ほど入力したパスワー
ドでログインする。
17

サーバ設定
? ターミナルコンソール起動
18

サーバ設定
“su -“ コマンドを入力し、同
じパスワードでrootになれる。
19

サーバ設定
$ コマンド ==> ユーザのアカウントでのコマンド実行
# コマンド ==> rootアカウントでのコマンド実行
■ ネットワークアクセス制限を解除
# iptables -F
# /etc/init.d/iptables save
20

ミドルウェアインストール
? 以下の各種ミドルウェアをインストールする
? MySQL
? Redis
? JDK
? Tomcat
21

Webサーバ
KVS
Tomcat
Redis
MySQLインストール
DB
MySQL
VMware Player
22

MySQLインストール?初期設定
■ yumリポジトリ追加 [1]
# yum install -y https://dev.mysql.com/get/
mysql-community-release-el6-5.noarch.rpm
■ MySQLパッケージインストール
# yum install -y mysql-community-server
■ 文字コード設定
# vi /etc/my.cnf
[mysqld]
character-set-server=utf8 <= 追記
23

MySQLインストール?初期設定
■ MySQLの自動起動設定＆MySQL起動
# chkconfig mysqld on
# /etc/init.d/mysqld start
■ MySQLサーバへアクセスして起動確認
$ mysql -u root
…
mysql>
24

Webサーバ Tomcat
DB
MySQL
KVS
Redis
Redisインストール
VMware Player
25

Redisインストール
■ yumリポジトリ追加 [1]
#?yum install -y http://
rpms.famillecollet.com/enterprise/remi-
release-6.rpm
■ Redisパッケージインストール
# yum install -y redis
■ 設定変更（他のPCからのアクセスを許可）
# vi /etc/redis.conf
以下の行を変更
bind 127.0.0.1 => bind 0.0.0.0
26

Redis初期設定
■ Redisの自動起動設定＆Redis起動
# chkconfig redis on
# /etc/init.d/redis start
■ Redisサーバへアクセスして起動確認
$ redis-cli
redis 127.0.0.1:6379>
27

DB
MySQL
KVS
Redis
Webサーバ Tomcat
Java, Tomcatインストール
VMware Player
28

Javaインストール
■ JDK1.8最新版をDL
http://www.oracle.com/technetwork/java/javase/
downloads/jdk8-downloads-2133151.html
29

Javaインストール
■ VMware側にコピー
ファイルをVMwarePlayerにドラッグ＆ドロップすると、デ
スクトップにコピーされる
■ インストール
# cd /home/server/Desktop/
# yum install -y jdk-8u45-linux-x64.rpm
30

Tomcatインストール
■ パッケージDL
http://tomcat.apache.org/download-80.cgi
■ VMware側にコピー
Javaと同様
■ Tomcatインストール
# cd /home/server/Desktop/
# tar -zxvf apache-tomcat-8.0.21.tar.gz
# mv apache-tomcat-8.0.21 /usr/local/tomcat
31

Tomcat設定
■ Tomcat Manager用アクセス設定
# cd /usr/local/tomcat/conf
# vi tomcat-users.xml
以下を下部（</tomcat-users>の上）に追記
<role rolename=“admin-gui”/>
<role rolename=“manager-gui”/>
<role rolename=“manager-script”/>
<user username=“manager” password=“manager”
roles=“admin-gui,manager-gui,manager-script”/>
■ Tomcat起動（仮想マシン再起動のたびに実行）
# /usr/local/tomcat/bin/startup.sh
32

Tomcat起動確認
■ IPアドレス確認
# ifconfig
eth0 Link …
inet addr:192.168.59.128 …
…
■ ホストのWindowsでブラウザ起動し、以下のURLを表示
http://192.168.59.128:8080
33

Tomcat起動確認
■ マネージャツール確認
Manager Appを開き、Tomcat Webアプリケーションマネー
ジャの表示を確認
34

Tomcat起動確認
■ マネージャツール確認
manager, managerで認証
アプリケーションの一覧が表示されればOK
35

? 事前準備
? サーバ実装
36

eclipse設定
? eclipse起動
? サーバー?ランタイム作成、Tomcatサーバ作成
? Tomcatのmanager設定
37

Eclipse起動＆初期設定
■ Eclipse起動、workspace作成
workspaceフォルダを指定する
38

■ Java EEのレイアウトに変更
39

■ Tomcatサーバ設定 [2]
サーバータブで新規サーバー追加
40

■ Tomcatサーバ設定
Tomcat v8.0を指定して完了
41

Eclipse設定（Tomcat Manager [2]）
■ server.xml
<Host appBase=“…> の下に以下を追加
<Context docBase=“${catalina.home}/webapps/
manager” path=“/manager” privileged=“true”/>
■ tomcat-users.xmlに以下を追加
<role rolename=“manager-gui”/>
<user username=“manager” password=“manager”
roles=“manager-gui”/>
■ Tomcatサーバ起動＆アクセス確認
サーバタブでサーバを起動し、ブラウザで以下にアクセス
http://localhost:8080/manager
42

プロジェクト新規作成
? Mavenプロジェクト作成（maven-archetype-quickstart）
? groupId, artifactId設定して完了
? Javaバージョン、ファセット設定、Tomcatライブラリ追加
? 事前に作成したTomcatサーバにプロジェクト追加して起動
? トップページのHello World!表示を確認（webapp/
index.jsp）
43

メニューから、ファイル => 新規 => その他 =>
Maven => Mavenプロジェクト
44

■ プロジェクト設定
アーキタイプは、[maven-archetype-quickstart」を選択
45

アーキタイプパラメータは、例えば以下のように入力
グループId: jp.game.server
アーティファクトId: sample-game-server
46

プロジェクト?エクスプローラーで右クリック => プロパティー
Javaコンパイラー => 「プロジェクト固有の設定を可能にする」
のチェックをOFF
Javaのビルド?パス => ライブラリータブ
=>「JREシステム?ライブラリー」を「編集」し、「ワークスペー
スのデフォルト JRE」をチェック
=>「ライブラリーの追加」=>「サーバー?ランタイム」 =>
「Tomcat8(Java8)」
47

同じく右クリックプロパティの「プロジェクト?ファセット」
で、「ファセット?フォームへ変換」
動的Webモジュールをチェックし、右クリックで「バージョン
の変更」=> 3.1に変更し、「より詳しい構成が使用可能」
48

コンテンツ?ディレクトリーに「src/main/webapp」入力
49

同じく右クリックプロパティの「デプロイメント?アセンブリ」
=>「追加」=>「Javaビルド?パス?エントリー」=>
「Maven依存関係」
50

■ index.jsp作成
src/main/webappを右クリック => 新規 => JSPファイル
index.jspを作成し、以下のようにh1タグを追加
<body>
<h1>Hello Sample Game Server!</h1>
</body>
■ サーバにプロジェクトを追加
プロジェクトフォルダを「ローカル?ホストのTomcat8」に
ドラッグ＆ドロップ
51

■ 起動確認
同様にサーバを起動し、以下のURLにアクセス
http://localhost:8080/sample-game-server/
「Hello Sample Game Server!」が表示されればOK
52

? 事前準備
? サーバ実装
53

? [demo1] HTTP GET
? [demo2] HTTP POST
? [demo3] WebSocket
? [demo4] チャットサーバ
? [demo5] MySQL
? [demo6] Redis
54

[demo1]
HTTP GET
クライアント
Webサーバ
Tomcat
Webブラウザ
HTTP
GET
55

[demo1]
HTTP GET
? サーブレット：HTTPアクセス処理するプログラム
? GameServerServlet.java作成
? request.setAttribute, request.getRequestDispatcher
? servlet.jsp作成
? request.getAttribute
56

[demo1]
jp/game/server/demo1/GameServerServlet.java
@WebServlet(“/demo1/servlet”) ???アクセス用URL
public class GameServerServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setAttribute("title", “ゲームサーバサンプル"); ???受け渡すパラメータ
request.setAttribute("body", "ゲームサーバを作るぜ！");
request.getRequestDispatcher(“/demo1/servlet.jsp”). ???表示用のJSP
forward(request, response);
}
}
57

[demo1]
webapp/demo1/servlet.jsp
<%@ page language="java" contentType="text/html; charset=utf8" pageEncoding="utf8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title><%= request.getAttribute("title") %></title> ???受け渡されたパラメータ
</head>
<body>
<h1>Demo1 Servlet</h1>
<h2><%= request.getAttribute("body") %></h2>
</body>
</html>
58

[demo2]
HTTP POST
クライアント
Webサーバ
Tomcat
Webブラウザ
HTTP
GET/POST
59

[demo2]
HTTP POST
? GameServerServlet.java
? doGetでトップページ表示
? login.jspでログイン画面表示
? doPostでログイン
? chat.jspに遷移
60

[demo2]
jp/game/server/demo2/GameServerServlet.java
@WebServlet("/demo2/servlet")
public class GameServerServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
???
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter(“name"); ???クライアントからのパラメータの取得
name = new String(name.getBytes("ISO8859_1"), "UTF-8");
request.setAttribute("name", name);
request.getRequestDispatcher("/demo2/chat.jsp").forward(request, response);
}
}
61

[demo2]
webapp/demo2/login.jsp
<!DOCTYPE html>
<html>
<head>
<title>Demo2 Servlet</title>
</head>
<body>
<h1>Demo2 Servlet</h1>
<h2><%= request.getAttribute("body") %></h2>
<form method="post" action="<%= request.getContextPath() %>/demo2/servlet">
名前:<input name="name" type="text"/><br/><br/>
<input type="submit" value="OK" />
</form> ???フォームを使用して、サーバにデータを送信（POST）
</body>
</html>
62

[demo3]
WebSocket
クライアント
Webサーバ
Tomcat
Webブラウザ
WebSocket
63

[demo3]
WebSocket
? WebSocket：HTTPベースの双方向通信プロトコル
? GameServerWebSocket.java作成 [3]
? @OnMessage
? ws.jspのJavaScriptでWebSocketインスタンス作成
? onopen時にsend
? @OnMessageの動作確認
64

[demo3]
jp/game/server/demo3/GameServerWebSocket.java
@ServerEndpoint(“/demo3/ws") ???WebSocket接続用URL
public class GameServerWebSocket {
@OnMessage
public String onMessage(String message) { ???クライアントからのデータ受信時のコールバック
System.out.println(message);
return message;
}
}
65

[demo3]
webapp/demo3/ws.jsp
<!DOCTYPE html>
<html>
<head>
<title>Demo3 WebSocket</title>
<script src=/slideshow/ss-47136625/47136625/"../js/jquery.min.js"></script>
<script type="text/javascript">
var url = 'ws://' + location.host + '<%= request.getContextPath() %>/demo3/ws';
var ws = new WebSocket(url); ???WebSocketインスタンス生成
ws.onopen = function() { ???コネクション接続完了時のコールバック
ws.send('Hello WebSocket GameServer’); ???サーバにメッセージを送信
};
</script>
</head>
<body>
<h1>Demo3 WebSocket</h1>
</body>
</html>
66

[demo4]
チャットサーバ
クライアント
Webサーバ
Tomcat
Webブラウザ
HTTP
GET/POST,
WebSocket
クライアント
Webブラウザ
67

[demo4]
チャットサーバ
? GameServerWebSocket.javaを手直しし、ブロードキャスト
? chat.jspを手直しし、チャットメッセージ送信＆受信機能
? ブラウザ2つ起動して動作確認
68

[demo4]
@ServerEndpoint("/demo4/ws")
public class GameServerWebSocket {
private String name = "";
@OnMessage
public void onMessage(String message, Session session) throws IOException {
System.out.println("Message:" + message);
???
}
private void broadcast(String message, Session session) {
for (Session s : session.getOpenSessions()) { ???現在接続されている全セッション取得
s.getAsyncRemote().sendText(message); ???サーバからクライアントへデータ送信
}
}
}
69

[demo4]
webapp/demo4/chat.jsp
???
ws.onmessage = function(receive) { ???サーバからのメッセージ受信時のコールバック
$('#message').html(receive.data + "<br/>" + $(‘#message').html());
???messageのタグに文字列を追加
};
ws.onopen = function() {
ws.send('enter,<%= request.getAttribute("name") %>');
};
function send() {
ws.send('talk,' + $(‘#inputText')[0].value); ???inputTextの文字列をサーバに送信
}
???
<span id="message"></span>
<br/>
<input id="inputText" type="text" placeholder="メッセージ" value=""/>
<input type="button" value="送信" onclick=“send();"/> ???ボタン押下でsend()メソッド呼び出し
???
70

[demo5]
MySQL
Webサーバ
DB
MySQL
Tomcat
VMware Player
HTTP
GET/POST,
WebSocket
71

[demo5]
MySQL
? /etc/my.cnf編集（文字コード）
? データベース、テーブル作成（ログインログ、チャットログ）
? Mavenでmysql-connector-javaインスコ
? Dao.java作成
? ログイン時とチャット発言にログを残すようにする
? MySQLにレコードが挿入されていることを確認
72

[demo5]
MySQL設定
■ /etc/my.cnf編集
# vi /etc/my.cnf
以下のように、[mysqld]の行の下に文字コードUTF-8設定の記述を追加し、サーバを再起動
[mysqld]
character-set-server=utf8
# /etc/init.d/mysqld restart
■ mavenでmysql-connector-java追加
pom.xmlを編集し、<dependencies>タグの中に以下を追加
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.35</version>
</dependency>
73

[demo5]
MySQL設定
■ データベース、テーブル、ユーザ作成
$ mysql -u root
- データベース作成
mysql> CREATE DATABASE sample_game_server;
mysql> USE sample_game_server;
- テーブル作成
mysql>?CREATE TABLE login_log (id INT AUTO_INCREMENT PRIMARY KEY, ?
name VARCHAR(32) NOT NULL, created_at DATETIME NOT NULL);
mysql>?CREATE TABLE chat_log (id INT AUTO_INCREMENT PRIMARY KEY, ?
name VARCHAR(32) NOT NULL, message VARCHAR(256) NOT NULL, ?
created_at DATETIME NOT NULL);
- ユーザ作成
mysql>?GRANT ALL PRIVILEGES ON sample_game_server.* TO ?
sampleuser@localhost IDENTIFIED BY 'samplepass';
mysql>?GRANT ALL PRIVILEGES ON sample_game_server.* TO ?
sampleuser@'%' IDENTIFIED BY 'samplepass';
74

[demo5]
jp/game/server/demo5/Dao.java
public class Dao {
???
public static void addLoginLog(String name) {
try (
Connection conn = DriverManager.getConnection(url, userName,
userPass); ???DBへのコネクション接続
PreparedStatement stmt = conn.prepareStatement(INSERT_LOGIN_LOG);
) {
stmt.setString(1, name);
stmt.executeUpdate(); ???INSERT文実行
} catch (SQLException e) {
e.printStackTrace();
}
}
???
}
75

[demo5]
???
???
switch (data[0]) {
case "enter":
name = data[1];
broadcast(name + "が入室しました。", session);
Dao.addLoginLog(name); ???ログインログ作成
break;
case "talk":
String chatMessage = data[1];
broadcast(name + ":" + chatMessage, session);
Dao.addChatLog(name, chatMessage); ???チャットログ作成
break;
default:
break;
}
}
???
76

[demo5]
動作確認
■ MySQLにログインし、直接テーブルの中身を確認する
$ mysql -u root
mysql> SELECT * FROM chat_log;
+----+----------+-----------------------------+---------------------+
| id | name | message | created_at |
+----+----------+-----------------------------+---------------------+
???
+----+----------+-----------------------------+---------------------+
mysql> SELECT * FROM login_log;
+----+----------+---------------------+
| id | name | created_at |
+----+----------+---------------------+
???
+----+----------+---------------------+
77

[demo6]
Redis
Webサーバ
DB KVS
MySQL
Tomcat
Redis
VMware Player
HTTP
GET/POST,
WebSocket
78

[demo6]
Redis
? MavenでJedisインストール
? JedisManager.java作成
? key:ユーザ名、value:発言メッセージ
? 「keys *」コマンドでキーリスト確認、メッセージが
残っていることを確認
79

[demo6]
Redis設定
■ mavenでjedis追加
pom.xmlを編集し、<dependencies>タグの中に以下を追加
<dependency>
<groupId>redis.clients</groupId>
<artifactId>jedis</artifactId>
<version>2.7.0</version>
</dependency>
80

[demo6]
jp/game/server/demo6/JedisManager.java
public class JedisManager {
???
private void initialize() {
JedisPoolConfig poolConfig = new JedisPoolConfig();
poolConfig.setMaxIdle(10);
poolConfig.setMinIdle(5);
poolConfig.setMaxTotal(20);
String host = "localhost";
int port = 6379;
JedisPool pool = new JedisPool(poolConfig, host, port);
???Redisへのコネクション接続
}
public void setData(String key, String value) {
???Redisにデータを格納
}
public String getData(String key) {
???Redisからデータを取得
}
}
81

[demo6]
@OnMessage
???
switch (data[0]) {
???
case "talk":
String chatMessage = data[1];
broadcast(name + ":" + chatMessage, session);
Dao.addChatLog(name, chatMessage);
JedisManager.getInstance().setData(name, chatMessage);
???Redisに、発言者と内容を保存
break;
default:
break;
}
}
???
82

[demo6]
動作確認
■ Redisに直接アクセスし、データを確認
$ redis-cli ???Redisクライアントでアクセス
redis 127.0.0.1:6379> keys * ???保存されているキーを取得
1) "kuwabara"
2) "yoshida"
redis 127.0.0.1:6379> get yoshida ???指定したキーの保存データを取得
"HELLO!"
redis 127.0.0.1:6379>
83

サーバに配備
? VMware上のサーバにてTomcatを起動
? eclipseからwarをexport
? Tomcat Managerからwarを配備
? 配備したServletで各種動作確認
84

サーバに配備
■ CentOSにてTomcatを起動
■ eclipseからwarをExport
85

サーバに配備
■ Tomcatを起動
■ Tomcat Managerからwarを配備
http://192.168.XX.XX:8080/manager
■ 動作確認
http://192.168.XX.XX:8080/sample-game-server/demo1/servlet
86

終わりに
? チャットメッセージの代わりに、ゲームのプレイデー
タを送受信すればオンラインゲームが出来る
? 対戦将棋の場合、動かす駒のIDと移動先座標
? MO RPGの場合、キャラIDと移動先、攻撃対象の敵
キャラIDとダメージ値など
? 友人に公開したい場合は、クラウドサービスを使うと
良い（友人のIPアドレスを許可する等）
87

上原光晶
ご清聴、ありがとうございました
88

参考資料
[1] http://qiita.com/futoase/items/
0ca6b61cb88194c90367
[2] http://shitekisyuki.blogspot.jp/2014/07/
eclipsetomcat.html
[3] http://qiita.com/opengl-8080/items/
7ca8484c8579d264e239
89

狠狠撸

自宅て?出来る！ケ?ームサーハ?の作り方

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to 自宅て?出来る！ケ?ームサーハ?の作り方 (20)

自宅て?出来る！ケ?ームサーハ?の作り方