勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

PHPとajaxでチャットの作成

      2014/06/06

■ソース
・index.php
<?
error_reporting(E_ALL & ~E_NOTICE);
include("./config.php");

//データの受け取り
$loginid             = ($_POST['loginid']) ? $_POST['loginid'] : '';
$loginpass         = ($_POST['loginpass']) ? $_POST['loginpass'] : '';
$key             = ($_POST['key']) ? $_POST['key'] : '';

//ログインチェック
$loginflg         = ($loginid == $account[$key]['loginid'] && $loginpass == $account[$key]['loginpass'] && $loginid != '' && $loginpass != '') ? 1 : 0 ;
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<html lang="ja">
<head>
<title>チャット</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var account = {'1' : '太郎', '2' : '花子'};

function chat_send () {
var chat_body = $('#chat_body').val();
var key = $('#key').val();
if (chat_body == '' || chat_body == ' ' || chat_body == ' ') {
alert('内容が入力されていません。');
return false;
} else {
chat_ajax(chat_body, key);
}
}

function chat_ajax (chat_body, key) {
var data = {chat_body : chat_body, key : key, mode : 'send'};
$.ajax({
data : data,
type : 'POST',
url : './ajax.php',
success : function(req) {
$('#chat_body').val('');
}
});
}

function chat_get (){
var timestamp = new Date().getTime();
$.get("./chat.log?stamp="+timestamp, function(req){
$("#reserve").html(req);
});
setTimeout("chat_get();",500);
}

<? if ($loginflg == 1) : ?>
$(function(){
chat_get();
});
<? endif ; ?>
</script>
</head>
<body>
<h1>チャット</h1>
<? if ($loginflg == 0) : //ログインしてない場合?>
<fieldset style="width:200px;">
<legend>ログインフォーム</legend>
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post">
アカウント名:
<select name="key">
<? for ($i = 1; $i <= count($account); ++$i) : ?>
<option value="<?=$i;?>"><?=$account[$i]['name'];?></option>
<? endfor; ?>
</select><br />
ID:<input type="text" name="loginid"><br />
PASS:<input type="text" name="loginpass"><br />
<input type="submit" value="login">
</fieldset>
<? else : //ログインしている場合?>
<div style="height:500px; width:500px; overflow-y:scroll;">
<fieldset style="overflow-y:scroll;">
<legend>チャットログ</legend>
<span id="reserve">
<?
if (!is_file($file_path)) {
echo 'チャットログはありません。';
}
?>
</span>
</fieldset>
</div>
<br>

<fieldset style="width:200px;">
<legend><?=$account[$key]['name'];?>でログイン中</legend>
<form acthon="<?=$SERVER['PHP_SELF'];?>" method="post" name="chat_form">
<textarea name="chat_body" id="chat_body"></textarea><br />
<input type="hidden" name="mode" value="send">
<input type="hidden" name="key" id="key" value="<?=$key;?>">
<input type="hidden" name="loginid" value="<?=$loginid;?>">
<input type="hidden" name="loginpass" value="<?=$loginpass;?>">
<input type="button" value="発言" onClick="return chat_send();">
</form>
</fieldset>
<? endif;?>
</body>
</html>

・config.php
<?
$file_path         = "./chat.log";
$account         = array(
'1' => array(
'name' => '太郎',
'loginid' => 'id1',
'loginpass' => 'pass1',
),
'2' => array(
'name' => '花子',
'loginid' => 'id2',
'loginpass' => 'pass2',
),
);
?>

ajax.php
<?
error_reporting(E_ALL & ~E_NOTICE);
include("./config.php");

if ($_POST['mode'] == 'send' && $_POST['chat_body']) {
$body = str_replace('*', '*', $_POST['chat_body']);
$body = str_replace('@_@', '@_@', $body);
$chat_body = '
[発言者]' . $account[$_POST['key']]['name'] . '<br />
[日時]' . date('Y/m/d H:i:s') . '<br>
[発言内容]' . $_POST['chat_body'] . '<hr>';
if (is_file($file_path)) {
$chat_log = file_get_contents($file_path);
$chat_body = $chat_body . $chat_log;
}
file_put_contents($file_path, $chat_body, LOCK_EX);
echo 1;
} else {
echo 0;
}
?>

■覚えておくこと
getでチャットログを取りに行く際、キャッシュが微妙に
残っているっぽい挙動があった。画像だけじゃなく、
非同期通信&リアルタイムで書き換える場合はタイムスタンプをつける。

ログイン情報を引き回す際はセッション使ったほうがスマートにできそう。
このあたりはやったことが無いので要勉強。

file_get_contents()は指定した場所にファイルが無い場合はエラーが
出たので、使うときはis_fileで存在チェックを行う。

もっと設計の段階で細かいところも詰める。

 - Ajax, jQuery, PHP

  関連記事

images
定数とグローバル宣言した配列

定数のメリットが分からず、ほとんど使ってこなかったけど 画像用のfunction ...

images
PHPで画像のサイズや拡張子等、詳細情報を取得

PHPで画像のサイズや拡張子等、詳細情報を取得する際 いつもググってしまっていた ...

images
PHP5.3にバージョンアップした際の注意

PHP5.1? ぐらいから5.3にバージョンアップした際に 色々とあったのでメモ ...

images
PHPでメモリの使用率確認

PHPでメモリの使用率を確認。ついでに処理時間も一緒に表示。 /*ヘッダに書いと ...

images
PHPで文字列の操作(検索、置換、切り出し)

しばしば行う文字列の操作をまとめておく。 ----- ■文字列の長さを調べる e ...

images
PHPで実行時間の測定

$start_time = microtime(true); /***測定したい ...

images
MySQLから任意の順番で取り出す

SELECT * FROM テーブル名 WHERE seq =  $seq OR ...

images
PHPでパーミッションの変更

chmodというみたことが無いPHP関数があったのでメモ。 ■参考サイト htt ...

jquery_logo
pjaxについてのメモ

ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...

jquery_logo
jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...