SDK 도입과 활용에 대한 이해

SDK 도입과 활용에 대한 이해

1. 왜 SDK 를 써야 하는가 ?
2. iframe 을 사용하는 이유는 ?
3. 부모창 측의 송수신 방법
4. 자식창 측의 송수신 방법

1. 왜 SDK 를 써야 하는가 ?

CORS (Cross-Origin Resource Sharing) 비교적 최근 브라우져는 보안 상의 이유로 외부 출처의 컨텐츠를 가져오는데 제약을 둔다. 외부 사의 컨텐츠를 사용하는 중계서비스 의 특성상 이는 감수해야 할 이슈이며, 이를 회피하기 위해 외부사는 SDK를 사용하여 본 서버 와 통신을 한다.

2. iframe 을 사용하는 이유는 ?

중계서비스의 특성 상 외부 게임을 내부로 런칭 한다. 테두리에는 중계사, Portal 이 있고, 내부에 컨텐츠 웹게임이 노출되는 형태로 제공한다.

3. 부모창 측의 송수신 방법

부모창의 송수신

$(document).ready(function() {
    //addEventListener 로 자식창에서 발생하는 이벤트를 해당 function 으로 받겠다는 선언을 한다. 
    window.addEventListener('message', _receiveMessage, false);  
});

// 수신 :: 이벤트 발생시 실행시킬 callback function 을 지정한다.
    var _functions = {
        'matchedFunction' : _matchedFunction
    };
    function _receiveMessage(event) {
        var postMessageData = event.data;
        if (!postMessageData) {
            return;
        }
        var targetSrc = document.getElementById("gameIFrame").src;
        if (targetSrc === undefined || targetSrc.indexOf(event.origin) !== 0) {
            return;
        }

        var postMessageDataObject = _parseRequest(postMessageData, event.origin);

        if (!postMessageDataObject.header) {
            return;
        }

        var functionName = postMessageDataObject.header.functionType; // 호출할 function name
        _functions[functionName](postMessageDataObject); // 실행할 function
    }
    function _matchedFunction(postMessageData) {
        var ver = postMessageData.head.version;        
        $.ajax({
            url: "/sdk/" + ver,
            type: 'POST',
            data:JSON.stringify(postMessageData),
            dataType: "json",
            timeout: 5000,
            contentType: "application/json; charset=utf-8"
        }).done(function(response) {            
            document.getElementById("gameIFrame").contentWindow.postMessage(response, postMessageData.body.requestOrigin);
        }).fail(function(err) {
            console.log(err);
        });
    }

 // 송신 :: 서버를 호출해 받은 response 를 자식 iframe 에 전송한다. 
 document.getElementById("gameIFrame").contentWindow.postMessage(response, postMessageData.body.requestOrigin);

4. 자식창측의 송수신 방법

// 우선 sdk 를 import 한다
<script src="/js/sdk/sdk.js"></script>
    // 선언
    var sdk = new SDK();
    // 송신 :: startFunction의 parameter 에 송신할 정보를 넣는다.
    // 수신 :: callbackFunction 에 수신할 정보와 처리할 방법을 넣는다.
    sdk.startFunction(document.getElementById('param1').value, callbackFunction);  
    function callbackFunction(data, err) { 
        if (!err) {
            alert(data);
        }
    };