mBaaS를 사용하여 무료로 채팅 게임 만들기 (후편)

채팅 게임을 만드는 기사의 후편입니다. 전회 Pusher와 cocos제 게임을 연결했으므로, 이번은 앱 서버와 게임을 연결합니다.

Parse.com 소개

Parse.com은 mBaaS의 하나로 이전에 Facebook에 인수 된 것으로 큰 화제를 불렀습니다. 비슷한 mBaaS가 많은 가운데

문서가 충실합니다

클라이언트용 SDK의 기능이 풍부

장애가 발생하자마자 알 수 있다( htp : / / s 타츠 s. 파르세. 코m/ )

DashBoard의 UI가 깨끗합니다

등, 제공되고 있는 기능은 물론의 세세한 부분까지 정중하게 만들어져 있는 인상이 있습니다.

데이터 저장하기

cocos로 만든 게임에서 데이터를 저장해 봅니다. Parse.com의 데이터 스토어는 명시되지 않지만, 오류시 오류 메시지에서 아마도 엔티티는 MongoDB이므로, 예를 들어 채팅 게임의 경우 이렇게 표현할 수 있습니다.

데이터 읽기 및 쓰기에는 REST API가 제공되므로 이를 사용하여 통신합니다.

local xhr = cc.XMLHttpRequest:new()
xhr.responseType = cc.XMLHTTPREQUEST_RESPONSE_JSON
xhr:setRequestHeader("X-Parse-Application-Id", "YOUR_APP_ID")
xhr:setRequestHeader("X-Parse-REST-API-Key", "YOUR_API_KEY")
xhr:setRequestHeader("Content-Type", "application/json")
xhr:open("POST", "https://api.parse.com/1/classes/Message)
xhr:registerScriptHandler(function()
    if xhr.readyState == 4 and (xhr.status >= 200 and xhr.status < 207) then
        print(xhr.response)
    else
        print("xhr.readyState is:", xhr.readyState, "xhr.status is: ",xhr.status)
    end
end)
xhr:send(json.encode({text = "17歳です"}))

※전회와 같이, 클라이언트 측으로부터 인증 없이 데이터를 기입하는 것은 위험하므로, 실제로 가동시킬 때는 가이드라인 에 따라 설계해야 합니다.

CloudCode

데이터를 저장할 수 있었으므로 Pusher로 전송하여 다른 기기로 메시지를 보냅니다. Parse.com에는 CloudCode라고 하는 구조가 있어 서버측의 로직이나 데이터 보존시의 밸리데이션등을 실시할 수 있습니다. 여기에서는 메시지를 저장한 후 메시지를 Pusher로 보냅니다.

var crypto = require('crypto');

var PUSHER_ID     = "YOUR_PUSHER_ID";
var PUSHER_KEY    = "YOUR_PUSHER_KEY";
var PUSHER_SECRET = "YOUR_PUSHER_SECRET";

var sign = function(str) {
    return crypto.createHmac('sha256', PUSHER_SECRET).update(str).digest('hex');
}

var push = function(body, success, error) {
    body = JSON.stringify(body);
    var method = "POST";
    var path = "/apps/" + PUSHER_ID + "/events";
    var query = "auth_key=" + PUSHER_KEY;
    query += "&auth_timestamp=" + parseInt(new Date().getTime() / 1000, 10);
    query += "&auth_version=1.0";
    query += "&body_md5=" + crypto.createHash('md5').update(body, 'utf8').digest('hex');
    query += "&auth_signature=" + sign([method, path, query].join('\n'));
    Parse.Cloud.httpRequest({
        method: method,
        url: "http://api.pusherapp.com" + path + "?" + query,
        headers: {
            'Content-Type': 'application/json'
        },
        body: body,
        success: success,
        error: error
    });
}

Parse.Cloud.afterSave("Message", function(req) {
    push({
        name    : "talk",
        data    : JSON.stringify({"text":req.object.get("text")}),
        channel : "talk_room"
    }, function(httpResponse) {
        console.log(httpResponse.text);
    }, function(httpResponse) {
        console.error(httpResponse.status + ': ' + httpResponse.text);
    });
});

push에서는 Pusher에 대한 자격 증명을 조립하고 CloudCode의 HTTP 요청 API로 전송합니다. afterSave 는 지정된 클래스의 데이터가 저장될 때마다 호출되는 코드로, 여기에서는 Message를 저장할 때 그 내용을 Pusher에 전송하고 있습니다.

결합하다

마지막으로, 여기까지 소개한 요소를 조합하여 채팅 게임을 완성합시다. UI 부분을 제외한 송수신 처리는 다음과 같습니다.

local json = require("json")

function init()
    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 == "talk"
            local data = json.decode(msg.data) -- ※dataはさらにjsonエンコードされているのでデコードしています
            showMessage(data.text)
        end
    end, cc.WEBSOCKET_MESSAGE)
end

function send()
    local xhr = cc.XMLHttpRequest:new()
    xhr.responseType = cc.XMLHTTPREQUEST_RESPONSE_JSON
    xhr:setRequestHeader("X-Parse-Application-Id", "YOUR_APP_ID")
    xhr:setRequestHeader("X-Parse-REST-API-Key", "YOUR_API_KEY")
    xhr:setRequestHeader("Content-Type", "application/json")
    xhr:open("POST", "https://api.parse.com/1/classes/Message)
    xhr:registerScriptHandler(function()
        if xhr.readyState == 4 and (xhr.status >= 200 and xhr.status < 207) then
            print(xhr.response)
        else
            print("xhr.readyState is:", xhr.readyState, "xhr.status is: ",xhr.status)
        end
    end)
    xhr:send(json.encode({text = getInputText()}))
end

우스이 ​​모임 님의 소재를 이용하고 있습니다

요약

cocos로 만든 게임에 실시간 통신 기능을 구현하는 방법에 대해 썼습니다. 기사의 대부분이 각 mBaaS의 기능의 소개가 되어 버려 cocos의 어드벤트 캘린더로서 어떨까, 라고 하는 반성의 기분도 약간 있습니다만, 클라이언트 측에서의 엔지니어링에 주력하고 싶은 cocos이기 때문에 서버 측을 간편하게 구현할 수 있다 옵션을 가져가는 것이 중요하다고 생각해 이 테마로 썼습니다.

내일은 mettoboshi 씨의 Appwarp/Cubism SDK의 이야기입니다. 비교적 가까운 이야기가 될까 기대하고 있습니다 :)