고민 하다가 걍.. 부재중 메시지나 아니면.. 읽기 전에 메시지를 연속으로 보냈을때 오류를 방지 하기 위해서.. 아래 처럼 코드 살짝 수정했습니다. ^^;
<?php
header('Content-type: text/event-stream');
header('Content-Transfer-Encoding: UTF-8');
header('Connection: keep-alive');
$file = $_GET['f'];
echo file_get_contents($file);
file_put_contents($file, '', LOCK_EX);
flush();
?>
<?php
$sender = $_GET['sender'];
$receiver = $_GET['receiver'];
$message = $_GET['message'];
$sendMessage = "\n\n" . 'id: ' . time() . "\n\n" . 'data: {sender:"' . $sender . '", receiver:"' . $receiver . '", message:"' . $message . '}' . "\n\n";
file_put_contents($receiver . '.txt', $sendMessage, FILE_APPEND|LOCK_EX);
?>
정말이지 완전 쌩초보 프로토타입이니 걍.. 참고만 하시길 바라며..
전혀 웹서버에 대한 과도한 traffic 에 대해서 고려되지 않은 내용임을 밝힙니다... ㅋㅋ
해야 할건 무지 많습니다.
기본 chatting message 에 대한 structure 도 만들어야 하고 traffic 에 대한 분산을 어떻게 할지도 고민해서 만들어야 하고...등등..
걍.. 맛보기이니.. 나머지는 각자 알아서 만들어 보세요.. ^^;;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 API::Server Sent Event::Chatting</title>
<script type="text/javascript">
//<![CDATA[
var messageVO = {
sender:'henry',
receiver:'jjeong',
message:''
}
var eventSource = new EventSource('http://localhost/status.html?f=henry.txt');
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);
}
}
}
eventSource.onopen = function (event) {
console.log("onopen");
};
eventSource.onmessage = function (event) {
document.getElementById('divChat').innerHTML += event.data + "<br>";
document.getElementById('divChat').scrollTop = document.getElementById('divChat').scrollHeight;
}
XHR.request.url = "http://localhost/messages.html";
XHR.request.method = "GET"; // "POST";
XHR.header.key = ["Content-Type"];
XHR.header.value = {
"Content-Type":"application/x-www-form-urlencoded"
};
XHR.data.key = ["sender", "receiver", "message"];
function xhrRequest(m) {
XHR.createConnection();
XHR.data.value = {sender:messageVO.sender, receiver:messageVO.receiver, message:m};
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 ) {
console.log("message send success");
document.getElementById('divChat').innerHTML += m + "<br>";
document.getElementById('divChat').scrollTop = document.getElementById('divChat').scrollHeight;
} else if ( XHR.conn.status == 404 ) {
alert('서버를 찾을 수 없어, 메시지를 전송하지 못했습니다.');
} else {
alert('알수 없는 오류가 발생하여, 메시지를 전송하지 못했습니다..');
}
}
};
XHR.open();
XHR.createRequestHeader();
XHR.send();
}
//]]>
</script>
</head>
<body>
<div id="divChat" style="height:400px; overflow:auto"></div>
<input type="text" name="inputMessage" id="inputMessage"> <button onclick="xhrRequest(document.getElementById('inputMessage').value); return false;">전송</button>
</body>
</html>
<?php
$sender = $_GET['sender'];
$receiver = $_GET['receiver'];
$message = $_GET['message'];
$sendMessage = "\n\n" . 'id: ' . time() . "\n\n" . 'data: {sender:"' . $sender . '", receiver:"' . $receiver . '", message:"' . $message . '}' . "\n\n";
file_put_contents($receiver . '.txt', $sendMessage, LOCK_EX);
?>
