23
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

mBaaSを使って無料でチャットゲームを作る(前編)

Posted at

2014年も残すところわずかとなりましたが、今年も色んなスマホゲームがリリースされました。魅せ方やゲーム性など各社様々な工夫を取り入れていましたが中でも「リアルタイム通信」というのは一つのキーワードだったのではないでしょうか。cocos2dxを使った自作ゲームにもそれらの機能を取り入れたいところですが、いざ導入するとなるとサーバ側の処理を実装する必要があったり維持費が掛かったりと敷居が高いです。

本稿ではmBaaSを使ってcocosで作ったゲームにリアルタイム通信機能を実装する方法について書きます。

Pusherの紹介

スクリーンショット 2014-12-05 19.49.28.png

Pusherはリアルタイム通信に特化したmBaaSです。開発者はAPIやクライアントSDK経由でサービスにアクセスすることで、チャットのように双方向な通信が必要な機能を簡単に実装することができます。類似サービスも色々あったのですが、

  1. 提供されている機能がシンプル
  2. 以前触ったときより触り心地が良くなっていた

と、技術的にはそこまで真面目に選定したわけではないのですがPusherを使ってみます。類似サービスについては別途文末に記載します。

cocosと繋いでみる

早速cocosで作ったゲームと接続してみましょう。PusherではWebSocketによる接続が提供されており、cocosにもWebSocket用クラスがあるのでそれらを利用します。部屋を建ててチャンネルを購読するコードは以下のようになります。

local json = require("json")

local ws = cc.WebSocket:create("ws://ws.pusherapp.com/app/{YOUR_APP_KEY}?protocol=7")
ws:registerScriptHandler(function(msg)
    msg = json.decode(msg)
    if msg.event == "pusher:connection_established" then
        ws:sendString(json.encode({
            event = "pusher:subscribe",
            data = { channel = "teen_room" }
        }))
    elseif msg.event == "pusher_internal:subscription_succeeded" then
        print("チャンネルを購読")
    elseif msg.event == "talk"
        local data = json.decode(msg.data) -- ※dataはさらにjsonエンコードされているのでデコードしています
        print(data.text)
    end
end, cc.WEBSOCKET_MESSAGE)

cc.WebSocket:createで初期化、registerScriptHandlerで受信、sendStringで送信します。上記のコード例は接続を確立してチャンネルを購読するまでの処理です。プレフィックスがpusher:*となっているイベントは、接続成功の通知や購読要求などPusherのシステムイベントと解釈されます。さらに詳細は公式のドキュメントに記載されています。

Debug Consoleからmessageを受信してみる

コードが書けたので次はイベントを受信してみます。PusherにはDebugConsoleが付属しており、ブラウザ経由でデバッグすることができます。

スクリーンショット 2014-12-05 20.06.47.png

コンソールを開きながら先のコードを走らせると、接続されている様子が分かります。ここではイベントを送信することもできるので、チャンネルとイベントを指定して送信します。先のコードを実行していれば受信したメッセージが出力されているはずです。

cocos2d: [LUA-print] 17歳です

Pusherのセキュリティ

これで送信/受信、両方の準備ができたのであとは端末を二台用意してチャットゲーム完成!といきたいところなのですが、もう一手間かける必要があります。というのも、Pusherでは基本的に端末から直接任意のメッセージを送信することはできず、一旦アプリサーバを介して送信するよう設計されています(※端末からのメッセージを許可する設定もあるようです)。

hero_howitworks.png

これは、ブラウザアプリやモバイルアプリのコードは基本的にユーザに読まれてしまうリスクを持っているため、そこに送信用キーを載せるのは危険だからというのが主な理由かと思われます。

そこで、別のmBaaSを使ってPusherにメッセージを送信できるようにします。詳細については次回の記事で書きます。

おまけ

Pusher同様、アプリにリアルタイム通信を実装するためのmBaaSは他にも以下のようなものがあります。料金や実装状況など、用途に合わせて選択していければと思います。

23
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?