勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

PHPとajaxでチャットの作成

   2024/01/12  PHP jQuery JavaScript

■ソース
・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で存在チェックを行う。

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

 - PHP jQuery JavaScript

  関連記事

スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法

モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...

ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...