[PHP][jQuery]Ajax（非同期通信）を使ったチャット

あまり JavaScript の Ajax に関して経験がないので、
ちょっとした練習としてチャットのようなものを作ってみました。
練習用の単純なプログラムですので脆弱性等の問題があります。実際のサーバーでは運用しないで下さい。
また、Google Chrome ではローカルファイルの読み込みに制限があります。

非同期通信を利用するために jQuery を利用しています。

・表示部分（HTMLファイル）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chat</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style type="text/css">
#log {
	border: 1px solid #AAA;
	height:400px;
	width:600px;
	overflow: scroll;
}
</style>

</head>

<body>

<script type="text/javascript">

function load_log()
{
	$.ajax({
		type: 'post',
		url: './log.txt',
		success: function( data ){
			log = data.replace(/[\n\r]/g, "<br />");
			$('#log').html(log);
		}
	});
}

function write_message()
{
	$.ajax({
		type: 'post',
		url: 'write.php',
		data: {
			'message' : $("#message").val()
		},
		success: function(){
			load_log();
			$("#message").val('');
		}
	});
}

$(document).ready(function()
{
	load_log();
	setInterval('load_log()', 5000);
});

</script>

<form method="post" onsubmit="write_message();return false;">
  <input id="message" name="message" type="text" value="" />
  <input type="button" value="送信" onclick="write_message()">
</form>

<div id="log"></div>

</body>
</html>

・write.php（書き込み部分）

<?php
// Ajax以外からのアクセスを遮断
$request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ?
	strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';
if($request !== 'xmlhttprequest') exit;

$message = (isset($_POST['message']) && is_string($_POST['message'])) ?
	htmlspecialchars($_POST['message'], ENT_QUOTES) : "";
if($message == "") exit;

$max   = 30;		// 行の上限
$count = 0;
$log   = '';

$fp = fopen('log.txt', 'r');
if(flock($fp, LOCK_SH)){
	while(!feof($fp)){
		if($count >= $max - 1) break;
		$log .= fgets($fp);
		$count++;
	}
	flock($fp, LOCK_UN);
}
fclose($fp);

$log = date("Y-m-d H:i:s") . ' - ' . $message . "\n" . $log;
file_put_contents('log.txt', $log, LOCK_EX);

5 秒間隔で log.txt を読み込み、表示しているだけなので負荷は高めです。
本来であれば JSON で日付や発言者等の細かいパラメータを含めて渡したほうがよいでしょう。

実用的なチャットにするためには、ログイン機能の実装と、負荷対策として Comet のような仕組みを取り入れる必要があると思います。

PHP Archive

Webサイト開発初心者の備忘録

[PHP][jQuery]Ajax（非同期通信）を使ったチャット

コメントを残す