⑤簡易版Ajax版チャット

　　⑤簡易版Ajax版チャット
　　　　ア．チャットの入り口のプログラム（chatIn.html）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>チャットAjax版</title>
<script type="text/javascript" src="chatIn.js"></script>
</head>
<body>
チャットAjax版<br>
<form name="form1" method="post" action="chat.php" id="sub">
ハンドル名：<input name="fHandle" type="text" id="hand">
<input name="fIn" type="hidden" value="logIn"> <!-- 最初のログインの情報を送信している。 -->
<input type="submit" name="Submit" value="入室">
<input type="reset" name="Submit2" value="クリア">
<span style="color:red;" id="handMsg"></span>
</form>
</body>
</html>

　　　　イ．ハンドル名が未入力の場合に処理するJavascript。（chatIn.js）

window.onload=function(){
  document.getElementById("sub").onsubmit=function(e){
    if(document.getElementById("hand").value==""){
      document.getElementById("handMsg").innerHTML="※ハンドル名を入力してください。";
      if(e.preventDefault){  //「preventDefault()」メソッドがあるかをチェックしています・
        e.preventDefault();  //IE以外のブラウザの場合、ひとつ前のイベントを取り消しをしています。
      }
      return false;  //IEの場合のは、「return false」でイベントが取り消されます。
    }
  return true;  //この行は、なくてもかまいませんが、IEの場合、イベント続行の意味がありますので書いておきます。
  }
}

　　　　ウ．チャット本体のプログラム（chat.php）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>チャットAjax版</title>
<script type="text/javascript" src="chat.js"></script>
</head>
<body>
<div id="header">チャットAjax版<br>
<?php
  if(isset($_REQUEST['fHandle']))$sHandle=$_REQUEST['fHandle']; else $sHandle=""; //ハンドル名の受信
  if(isset($_REQUEST['fIn']))$sIn=$_REQUEST['fIn']; else $sIn=""; //ログインフラグの受信
  $conn=mysqli_connect('localhost','root','******') or die("データベース接続に失敗しました");
  mysqli_select_db($conn,'chat_db') or die("指定されたデータベースは存在しません。");

  //チャットにログインしてきたユーザの情報をDBに保存する。
  if($sIn=="logIn"){
    $sMsg="{$sHandle}さんが入室されました。";
    $sql="insert into chat_tbl values(null,'".$sHandle."','".$sMsg."',null);";
    if(!mysqli_query($conn,$sql)){
      echo "データの書き込みに失敗しました。\n";
    }
  }
  mysqli_close($conn);
?>
ハンドル名：<span style="color:red;"><?= $sHandle ?></span>
<form name="form1" method="post" id="sub">
  メッセージ：
  <input name="fMsg" type="text" size="100" id="msg"><!--　メッセージの入力　--> 
  <input name="fHandle" type="hidden" value="<?= $sHandle ?>" id="hdl"><!--　ハンドル名の再送用　--> 
  <input type="submit" name="fSub1" value="発言" id="btn">
</form>
</div>

<!--この下DBに書き込まれているチャットデータを挿入している。-->
<div id="disp"></div>
</body>
</html>

　　　　エ．チャットのメッセージの送信とメッセージの表示を行うAjaxのJavascript。（chat.js）

window.onload=function(){

  //ログインした時に最初にメッセージが表示されるようにAjaxで処理している。
  var handle=document.getElementById("hdl");
  var message=document.getElementById("msg");
  var send =  "hdl=" + handle.value + "&msg=" + message.value;
  sendReturn(send);

  //「発言」ボタンをクリックしたときにメッセージの送信をAjaxを使って行っている。
  document.getElementById("sub").onsubmit=function(e){
    var handle=document.getElementById("hdl");
    var message=document.getElementById("msg");
    e.preventDefault();  //サブミットイベントの中止

    //ハンドル名とメッセージをURLエンコードデータにしている
    var send = "hdl=" + handle.value + "&msg=" + message.value;
    sendReturn(send);
    message.value="";  //メッセージ送信後、メッセージのテキストフィールドをクリアしている。
  }

  //10秒ごとにメッセージの表示を更新するようにインターバルを設定している
  timerID=setInterval(function(){

    //発言ボタンを押したときも同じ関数が呼び出されるのでインターバルで呼び出されるときは、発言ボタンのクリック時と
    //異なるURLエンコードデータを送信（引数に）している
    sendReturn("timeOut=para")
  },10000);
}

//サーバから帰ってきたチャットのデータをHTMLの「<div id="disp"></div>」に挿入している。
function returnDataSHow(){
  if(xmlhttp.readyState == 4){
    document.getElementById("disp").innerHTML=xmlhttp.responseText;
  }
}

//「chatDisp.php」にハンドル名とメッセージを送信する関数。
function sendReturn(chat){
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange=returnDataSHow;
  xmlhttp.open("POST","chatDisp.php");
  xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xmlhttp.send(chat);
}

　　　イ．Ajaxで呼び出され、チャットのDB（chat_tbl）のデータを文字列にしてクライアントに戻すプログラム。（chatDisp.php）

<?php
  if(isset($_REQUEST['hdl'])) $hdl = $_REQUEST['hdl']; else $hdl="";
  if(isset($_REQUEST['msg'])) $msg = $_REQUEST['msg']; else $msg="";
  if(isset($_REQUEST['timeOut'])) $timeOut=$_REQUEST['timeOut']; else $timeOut="";
  $conn=mysqli_connect('localhost','root','******') or die("データベース接続に失敗しました");
  mysqli_select_db($conn,'chat_db') or die("指定されたデータベースは存在しません。");

  //メッセージが入力されていない場合、インターバルによってこのプログラムが呼び出された場合は、
  //データベースへの保存はしないようにしている。。
  if($msg!="" && $timeOut==""){
    $sql="insert into chat_tbl values(null,'".$hdl."','".$msg."',null);";
    if(!mysqli_query($conn,$sql)){
      echo  "データの書き込みに失敗しました。\n";
    }
  }

  //メッセージ表示用のデータの作成。
  $sql="select * from chat_tbl order by dateTime desc;";
  if($result=mysqli_query($conn,$sql)){
    $data="";
    while($row=mysqli_fetch_array($result,MYSQL_ASSOC)){

      //すべでのメッセージを一つの文字列にしている。
      $data.="<hr><li><span style='color:red;'>".$row['handle']."</span>　>　".$row['message']."　<span class='time'>".$row['dateTime']."</span></li>\n"
    }
  }
  else{
    echo "クエリーに失敗しました。\n";
  }
  mysqli_close($conn);
  echo $data;
?>

　　　＜課題１＞更新ボタンをクリックするとキャッシュのデータを送信してしまいます。このようにならないようにしなさい。
　　⑥更新ボタンをクリックしてもキャッシュでデータが送信できないようにする。