PHPとajaxでチャットの作成
2024/01/12
■ソース
・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で存在チェックを行う。
もっと設計の段階で細かいところも詰める。
関連記事
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
jQueryでshow/hideよりaddClass/removeClassの方が速い
diaplay:none/blockする際に最近はshow()/hide()を ...
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
tableのフィルター機能
jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...