勉強したことのメモ

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
Fatal error: [] operator not supported for stringsの対処

Fatal error: [] operator not supported f ...

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

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

images
htmlspecialcharsを通してMySQLに格納したものを元に戻して出力

MySQLにHTMLタグを入れたくない場合にhtmlspecialcharsを使 ...

images
PHPの連想配列と正当性のチェック

ソースの解析中、こんな書き方があったのか、 と思ったのでメモ。 $List = ...

jquery_logo
簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

images
FLASHから受信した画像をPHPで保存し、サムネイルも作る

■参考サイト ・FLASH http://www.ilovex.co.jp/bl ...

jquery_logo
javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

images
CRUDのfunction化(処理ページ)

<?php //エスケープ用htmlspecialchars functi ...

images
PHPでファイルパスorフォルダパスの確認

PHPで画像とか触る際にフォルダのパス、ファイルのパスを 知りたいことがあったの ...

images
フォームからCSVファイルをアップロードしてPHPの配列に格納する方法

formからcsvファイルをアップロードさせて、PHPで色々処理したかった。とり ...