이론적으로만 알았었지 실제로 어떻게 동작하는지 써본적이 없었는데 이번 기회에 정리!
원문 : http://www.zeitoun.net/articles/comet_and_php/start
위에 소스는 Prototype 을 이용하는지라 jQuery 버전으로 다시 작성,
chat-with-comet.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chating</title>
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("jquery", "1.5");
</script>
<!-- Framework CSS -->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css"
media="print">
<link rel="stylesheet" href="blueprint/form.css" type="text/css"
media="screen">
<!--[if lt IE 8]>
<link rel="stylesheet" href="../blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
</head>
<body>
<div id="content">
<div id="inputForm">
<fieldset class="info">
<legend>Comment</legend>
<input type="text" id="nickname" size="10"
value="takeone"/>
<input type="text" id="comment" size="100"/>
<input id="send-button" type="button" value="Send" />
</fieldset>
</div>
<div>
<fieldset class="success">
<legend>Comments</legend>
<div id="list"></div>
</fieldset>
</div>
</div>
<script type="text/javascript">
$(function() {
var timestamp = 0;
var noerror = true;
// 서버측 생성된 파일의 타임스탬프를 채크함
function connect() {
var comet = $.ajax({
url : 'chat-backend.php',
method : 'GET',
dataType : 'JSON',
data : {
timestamp : timestamp
},
success : function(response) {
if(response != null) {
timestamp = response['timestamp'];
$('#list').before('<div><span>' + response['nickname']
+ "</span> : " + response['comment'] + '</div>');
noerror = true;
}
},
complete : function(response) {
if (!noerror)
setTimeout(function(){ connect(); }, 5000);
else
connect();
noerror = false;
}
});
}
// 실제 내용을 서버쪽에 전달
$('#comment').keyup(function(e) {
if(e.keyCode == 13) {
$('#send-button').trigger('click');
}
});
$('#send-button').click(function() {
$.ajax({
url : 'chat-backend.php',
method : 'GET',
dataType : 'JSON',
data : {
nickname : $('#nickname').val(),
comment : $('#comment').val(),
timestamp : timestamp
},
success : function(response) {
$('#comment').val('');
},
complete : function(response) {
$('#comment').val('');
}
});
});
connect();
});
</script>
</body>
</html>
chat-backend.php
<?php
$filename = dirname(__FILE__) . '/comment.json';
$comment = isset($_GET['comment']) ? $_GET['comment'] : '';
if($comment != '') {
file_put_contents($filename, json_encode($_GET));
die();
}
$lastmodif = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
$currentmodif = filemtime($filename);
while ( $currentmodif <= $lastmodif ) {
usleep(10000);
clearstatcache();
$currentmodif = filemtime($filename);
}
$response = json_decode(file_get_contents($filename), true);
$response['timestamp'] = $currentmodif;
echo json_encode($response);
flush();
이걸 어디다 써먹지=_=
|
chat-comet.zip
