FC2ブログ

・・・

オンラインゲームの開発事始め(3) Ajaxを使ったチャットのサンプルプログラム 

研究の過程で、通信対戦に対応したブラウザゲームを作るためには「非同期通信」という仕組みが必要だとわかりました。
また、非同期通信を実現するにはAjaxという技術の使い方をマスターする必要があるということもわかりました。

具体的にはAjaxのXMLHttpRequestオブジェクトの使い方?ですかね。
いざやってみたらそんなに難しいことはなかったです。
さっそくサンプルプログラムを組んでみました。

Ajaxチャットサンプル

見た目はただのチャットプログラムです。
ですが中身は非同期通信なので、発言を入力している間にも自動的に画面上のログが更新されていきます。
このサンプルでは10秒単位で更新するようにしてありますが、理論的にはミリ秒(1/1000秒)単位で更新頻度を設定することができます。

非同期通信がなぜ重要かと言うと、通常WEBサイトは、サイトを見ている人がリンクをクリックしたり、リロードした場合に初めてサーバからデータが送られてきます。
しかしゲームの場合は画面を更新するために毎回毎回そんな操作をプレイヤーに要求するわけにはいかないので、プレイヤーに意識させずに通信を自動で行う仕組みが必要というわけです。
これを非同期通信と呼ぶんですね。
僕も今回勉強して初めて知りました(笑)

これが出来たということは、もうオンラインゲームを作るための技術的な前提はクリアできたも同然です。
次回はこのチャットプログラムを拡張して、画面にアバターキャラクターを表示してそれを動かせるところまで作ってみたいと思います。
そこまで出来たらあとはもう対戦の仕組みを入れればほぼオンラインゲームの完成ですね。
残る技術的な課題は、レンタルサーバなのでできるだけ負荷がかからないスマートな仕様を考える必要がある点だけかな。

このAjaxチャットサンプルのコード。コメントとか適当です。

main.js

var gDstUrl = "output.php";
var gTimerId;
var gXHR;

window.onload = function() {
var elementInputName = document.getElementById("input_name");
var elementInputRemark = document.getElementById("input_remark");
var elementButtonSend = document.getElementById("button_send");
var elementTextareaLog = document.getElementById("textarea_log");

gXHR = XMLHttpRequestCreate();

// 周期呼び出し関数
intervalRequest = function() {
httpRequest(null);
}

// 送信ボタンが押された時の処理
postData = function() {
var postdata = Array();
postdata['data'] = elementInputName.value + ":" + elementInputRemark.value + "\n";
httpRequest(postdata);
elementInputRemark.value = "";
}

//
httpRequest = function(senddata) {
gXHR.open("POST", gDstUrl);
gXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
gXHR.send(encodeHTMLForm(senddata));
}

// 送受信状態に変更がある場合に実行されるイベント
gXHR.onreadystatechange = function () {
switch (gXHR.readyState) {
case 0: // XMLHttpRequest オブジェクトを作成した状態
break;
case 1: // open() メソッドの呼び出しが完了している
break;
case 2: // レスポンスヘッダの受信は完了している
break;
case 3: // レスポンスボディを受信中
break;
case 4: // 完了
if (gXHR.status == 0) {
elementTextareaLog.value = "エラー";
} else if ((200 <= gXHR.status && gXHR.status < 300) || (gXHR.status == 304)) {
elementTextareaLog.value = gXHR.responseText;
}
break;
}
};

gTimerId = setInterval("intervalRequest()", 10 * 1000);
httpRequest(null);

// 「送信」ボタンが押されたらリクエストする
elementButtonSend.onclick = postData;

// 発言欄でEnterキーが押されたらリクエストする
elementInputRemark.onkeypress = function() {
if (window.event.keyCode == 13) postData();
}
}

// HTMLフォームの形式にデータを変換する
function encodeHTMLForm(data) {
var params = [];

for (var name in data) {
var value = data[ name ];
var param = encodeURIComponent(name).replace(/%20/g, '+') + '=' + encodeURIComponent(value).replace(/%20/g, '+');
params.push(param);
}
return params.join('&');
}


今回、Ajaxの学習のために以下のページを参考にさせて頂きました。
JavaScriptで非同期通信を実装する
JavaScript プログラミング講座 XMLHttpRequest について
XMLHttpRequestによるPOSTリクエスト

コメント

承認待ちコメント

このコメントは管理者の承認待ちです

# |  | 2013/11/26 16:53 * edit *

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://hakubunyakurei.blog55.fc2.com/tb.php/73-bdabbb2e
この記事にトラックバックする(FC2ブログユーザー)