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);
        }
    };


블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.

function setUrlToParam(param, name) {
var url = window.location.href;
url = url.replace('#', '');
if (url.indexOf('?') > 0) {
window.location.href = url.slice(0, url.indexOf('?')) + '?'+ name + '=' + param;
} else {
window.location.href = url + '?'+ name + '=' + param;
}
}


url parameter 를 줌

블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.

function moveLoop(pos, playerPos) {
setTimeout(function() {
playerPos++;
moveBoardPos(playerPos);
if (playerPos < Number(pos)) {
moveLoop(pos, playerPos);
}
}, 300);
}

0.3초 간격으로 moveBoardPos 를 호출

블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.

javascript deep copy

javascript 2017.03.03 16:53
JSON.parse(JSON.stringify(datas))


블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.


블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.

$('select[name="select"]').off('change');
$('select[name="select"]').on('change', function() {
});


'javascript' 카테고리의 다른 글

javascript deep copy  (0) 2017.03.03
속도개선을 위한 PULL 방식의 화면 구성  (0) 2016.12.02
jquery 이벤트 프로시저 on off 하기  (0) 2016.11.23
select box 를 input 으로 변경  (0) 2016.10.05
jQuery 화면 끝단, 이벤트  (0) 2016.09.26
입력 폼 숫자만 받기  (0) 2016.09.05
블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.

function changeSelectToInput($id) {
$id.replaceWith($('<input />').attr({
type: 'text',
id: $id.attr('id'),
name: $id.attr('name'),
value: $id.val(),
class: 'readonly',
readonly: 'readonly'
}));
}


블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.

$(window).scroll(function () {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight != 0) {
bottom();
} else {

top();

}


블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.


$('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g, '');
});


input 클래스 선언 후 사용 .


숫자를 제외한 입력은 삭제된다. 

'javascript' 카테고리의 다른 글

select box 를 input 으로 변경  (0) 2016.10.05
jQuery 화면 끝단, 이벤트  (0) 2016.09.26
입력 폼 숫자만 받기  (0) 2016.09.05
datepicker 한글로 띄우기  (0) 2016.07.15
jQuery select 생년월일 option tag 만들기  (0) 2016.03.25
javascript 문자열 체크  (0) 2016.03.22
블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.

$('input[datepicker="on"]').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년',
onSelect: function () {
},
beforeShow: function (textbox, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: 50,
marginLeft: textbox.offsetWidth + 'px'
});
}, 0);
}
});


'javascript' 카테고리의 다른 글

jQuery 화면 끝단, 이벤트  (0) 2016.09.26
입력 폼 숫자만 받기  (0) 2016.09.05
datepicker 한글로 띄우기  (0) 2016.07.15
jQuery select 생년월일 option tag 만들기  (0) 2016.03.25
javascript 문자열 체크  (0) 2016.03.22
jquery 엔터키 이벤트로 받아 처리  (0) 2016.02.04
블로그 이미지

기계새

Java, Spring, iBatis, Maven, eclipse 개발관련 잡다한 메모공간입니다.