COMET 언제쩍 건데.. 그래서 맛보기

ITWeb/개발일반 2011. 11. 30. 11:58
좀 예전에 작성해 놓았던 건데 걍 정리 하는 차원에서 맛보기 들어 갑니다.
아래 기술하는 내용은 XMLHttpRequest polling 방식 입니다.
아주 예전에 제가 쓰던 방식은 hidden iframe 을 이용한 remote scripting 이였는데 뭐.. 세상은 날로 좋아지고 있으니.. ㅎㅎ
관련 글 WebSocket 도 참고하세요.
http://jjeong.tistory.com/485

[참고링크]
http://en.wikipedia.org/wiki/Comet_(programming)
http://www.google.co.kr/search?q=reverse+ajax


[Server]

// server.html

<?php

header("Cache-Control: no-cache, must-revalidate");

header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

header('Content-Type: multipart/x-mixed-replace; Charset=utf-8');


$filename = 'comet.txt';


$currentTime = filemtime($filename);

$inputTime = filter_input(INPUT_GET, 'inputTime', FILTER_SANITIZE_STRIPPED);


clearstatcache();


while (  $inputTime < $currentTime  ) {

    $inputTime = $currentTime;

    echo $currentTime;

    flush();

    usleep(10000);

}

?>


[Client]

// client.html

<!DOCTYPE html>

<html>

<head>

<title>XMLHttpRequest</title>

<script type="text/javascript">

//<![CDATA[

var XHR = {

        conn : null,

        request : {

            url : '',

            method : 'GET',

            data : '',

            async : true

        },

        header : {

            key : [],

            value : {}

        },

        data : {

            key : [],

            value : {}

        },

        response : {

            type : "XML"

        },


        createConnection : function() {

            if (typeof window.XMLHttpRequest) {

                this.conn = new XMLHttpRequest();

            } else if (typeof window.ActiveXObject) {

                this.conn = new ActiveXObject("Microsoft.XMLHTTP");

            }


            return this.conn;

        },


        createRequestData : function() {

            var size = this.data.key.length;


            for ( var i = 0; i < size; i++) {

                this.request.data += this.data.key[i] + '='

                        + this.data.value[this.data.key[i]] + '&';

            }


            this.request.data = this.request.data.substr(0,

                    this.request.data.length - 1);


            return this.request.data;

        },


        createRequestHeader : function() {

            var size = this.header.key.length;


            for ( var i = 0; i < size; i++) {

                this.conn.setRequestHeader(this.header.key[i],

                        this.header.value[this.header.key[i]]);

            }

        },


        open : function() {

            var requestUrl;


            if (this.request.method == 'GET') {

                requestUrl = this.request.url + '?' + this.request.data;

            } else {

                requestUrl = this.request.url;

            }


            this.conn.open(this.request.method, requestUrl, this.request.async);

        },


        send : function() {

            if (this.request.method == 'GET') {

                this.conn.send();

            } else {

                this.conn.send(this.request.data);

            }

        }

    }




XHR.request.url = "http://192.168.1.1/comet/server.html";

XHR.request.method = "GET"; // "POST";

XHR.header.key = ["Content-Type"];

XHR.header.value = {

        "Content-Type":"application/x-www-form-urlencoded"

};

XHR.data.key = ["id", "s", "ts", "inputTime"];

XHR.data.value = {

    "id":12345678,

    "s":"320x48",

    "ts": Math.floor(new Date().getTime()/1000),

        "inputTime":0

};


function xhrRequest() {

        XHR.createConnection();

        XHR.createRequestData();

        XHR.conn.onreadystatechange = function () {

                switch ( XHR.conn.readyState ) {

                        case 0 : // XHR.conn.UNSENT :

                                break;

                        case 1 : // XHR.conn.OPENED :

                                break;

                        case 2 : // XHR.conn.HEADERS_RECEIVED :

                                break;

                        case 3 : // XHR.conn.LOADING :

                                break;

                        case 4 : // XHR.conn.DONE :

                                doReadyStateChange();

                                break;

                }


                /*

                별도로 수행해야 하는 함수 작성 필요

                */

                function doReadyStateChange() {

                        if ( XHR.conn.status >= 200 && XHR.conn.status < 300 ) {

                                testConsole(XHR.conn.responseText);

                                XHR.data.value.inputTime = XHR.conn.responseText;

                        } else if ( XHR.conn.status == 404 ) {

                                alert('Not Found.');

                        } else {

                                alert(XHR.conn.status);

                        }

                }

        };


        XHR.open();

        XHR.createRequestHeader();

        XHR.send();

}


function testConsole (log) {

        var console = document.getElementById("console");


        console.innerHTML = log + '<br>' + console.innerHTML;

}


window.setInterval("xhrRequest();", 5000);

//]]>

</script>

</head>

<body>

<div id="console" style="width:800px; height:400px"></div>

</body>

</html>



[Content&Message File]
- comet.txt
- 이 파일은 Client 로 전달한 content 나 message 등을 넣어 놓으면 server.html 에서 while loop 내 file_get_contents 함수를 통해서 Data 를 읽고 Client 로 전달해 주면 됨.


[간단설명]
- Client 에서 주기적으로 Server 에 Request 를 보냅니다.
- Server 에서는 comet.txt 파일의수정 시간을 검사를 합니다.
- 전달할 메시지가 추가 되었다면 file의 수정된 시간이 크기 때문에 comet.txt 파일의 Content 를 읽어서 Client 로 전달을 합니다.
- Async 방식은 잘 아실테니 설명 생략하구요.


※ 작성된 코드는 아주 옛날에 작성된것으로 ㅋ 초간단 버전 입니다. - 태클금지 -
: