좀 예전에 작성해 놓았던 건데 걍 정리 하는 차원에서 맛보기 들어 갑니다.
아래 기술하는 내용은 XMLHttpRequest polling 방식 입니다.
아주 예전에 제가 쓰던 방식은 hidden iframe 을 이용한 remote scripting 이였는데 뭐.. 세상은 날로 좋아지고 있으니.. ㅎㅎ
관련 글 WebSocket 도 참고하세요.
// 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.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>
- 이 파일은 Client 로 전달한 content 나 message 등을 넣어 놓으면 server.html 에서 while loop 내 file_get_contents 함수를 통해서 Data 를 읽고 Client 로 전달해 주면 됨.
- Client 에서 주기적으로 Server 에 Request 를 보냅니다.
- Server 에서는 comet.txt 파일의수정 시간을 검사를 합니다.
- 전달할 메시지가 추가 되었다면 file의 수정된 시간이 크기 때문에 comet.txt 파일의 Content 를 읽어서 Client 로 전달을 합니다.
※ 작성된 코드는 아주 옛날에 작성된것으로 ㅋ 초간단 버전 입니다. - 태클금지 -
mwac15-9.pdf