勉強したことのメモ

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

  関連記事

MySQLiで直近に挿入したオートインクリメントの値と次回挿入する値を取得する方法

phpとmysqliを使っている中で次回挿入するオートインクリメントの値と、前回 ...

smart_resize_imageで縦横の比率関係なく、固定リサイズ

PHPで縦横どちらかが指定の長さを超えた場合、比率を保ったままリサイズで使ったs ...

短縮URL作成(管理画面)2

<? /* 編集機能追加。もっと短く記述できるようにする。 */ erro ...

$_SERVER['PHP_SELF']に脆弱性あり

formのaction属性とかページングのリンクとかで、 <form ac ...

前置インクリメントと後置インクリメント

何かの検索している時に見つけたもの。 前置インクリメントの方が高速とのこと。 ■ ...

PHPでCSVファイル出力用の関数

ここのところログ系をCSVファイル出力にするケースが多かった為、使いまわせるよう ...

MySQLのREGEXPで半角記号を検索したい場合

MySQLのREGEXPで半角記号を検索したい場合 \\を付けてエスケープしない ...

no image
短縮URL作成(管理画面)

error_reporting(E_ALL & ~E_NOTICE); ...

PHPで画像を上下反転させ保存する

やりたかった事は、下記の通り。 ・既にフォルダに保存されている画像を上下反転させ ...

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...