【Ajax】チャットログを自動更新して表示させる方法！phpとjavascriptで実装

chat.php
$J_file = "chatlog.json"; // チャットログパス(相対パス)を変数に格納
session_start(); // セッションを使うので明示的にスタート

$filesize = filesize($J_file); // 旧⇦ファイルサイズを取得
if(empty($_SESSION['filesize'])){
  // 新が空なら(1番最初のアクセスなら)新にファイルサイズを格納
  $_SESSION['filesize'] = $filesize ;
}

chat.php
// チャットログがあればチャットログとファイルサイズ(新旧)を表示
if($file = file_get_contents($J_file)){
  $file = json_decode($file);
  $array = $file->chatlog;
  
  // チャットログを全て取り出しHTMLツリーを構築
  foreach($array as $object){
    if(isset($result)){
            // 第二回目以降
            $result =  $result.'<div class="'.$object->person.'"><p class="chat">'.str_replace("\r\n","<br>",$object->text).'<span class="chat-time">'.$object->time.'</span></p><img src="'.$object->imgPath.'"></div>';
        }else{
            // 第一回目
            $result = '<div class="'.$object->person.'"><p class="chat">'.str_replace("\r\n","<br>",$object->text).'<span class="chat-time">'.$object->time.'</span></p><img src="'.$object->imgPath.'"></div>';
        }
  } 
  
  // 現在のファイルサイズと旧ファイルサイズを表示
  $result = $result .'<input id="preFilesize" type="hidden" value="'.$_SESSION['filesize'].'"><input  id="aftFilesize" type="hidden" value="'.$filesize.'">';
}else{
  // チャット履歴がない場合はチャットが増えたときに備える
  $result = '<input id="preFilesize" type="hidden" value="'.$_SESSION['filesize'].'"><input  id="aftFilesize" type="hidden" value="'.$filesize.'">';
}

chat.php
<div class="chat-area" id="chat-area">
  <?php echo $result;?> 
</div>

⇩{"連想配列1"}

【1階層】⇩連想配列1→{"chatlog":"[配列1]"}

【2階層】⇩[配列]1→["連想配列2","連想配列2","連想配列2"....]

【3階層】連想配列2(チャットログ)→{"person":"person1","imgPath":"image/person1.png","time":"16:20","text":"チャットの本文"}

chatlog.json
{"chatlog":
    [
      {"person":"person2","imgPath":"..\/image\/person2.png","time":"22:26","text":"\u30c1\u30e3\u30c3\u30c8\u6a5f\u80fd\u3092\u81ea\u4f5c\u3057\u3066\u3044\u307e\u3059\u3002"},
      {"person":"person1","imgPath":"..\/image\/person1.png","time":"22:27","text":"\u30c1\u30e3\u30c3\u30c8\u30ed\u30b0\u306fJSON\u30d5\u30a1\u30a4\u30eb\u3067\u683c\u7d0d\u3057\u3066\u3044\u307e\u3059\u3002"}
    ]
}

main.js
document.addEventListener('DOMContentLoaded', function() {
  // ファイルサイズ更新Ajaxを0.1秒ごとに実行
  setInterval(resultLog, 1000); 
  
  function resultLog() {
    let preFS = document.getElementById('preFilesize');
    let aftFS = document.getElementById('aftFilesize');
    
    if (preFS.value === aftFS.value) {
        // ファイルサイズが同じ場合
        // XMLHttpRequestオブジェクトを生成
        let xhr = new XMLHttpRequest();

        // 非同期通信を開始
        xhr.open('GET', 'chatlog.php?ajax=' + "OFF", true);
        xhr.send(null);
        // onreadystatechange→通信の状態が変化したタイミングで呼び出されるイベントハンドラー
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) { //通信が完了
                  // readyState→HTTP通信の状態を取得
                  if (xhr.status === 200) { //通信が成功
                      // 現在のファイルサイズを取得し新しいファイルサイズのみ更新
                      aftFS.value = xhr.responseText;
                  }
            }
        }
      } else {
        // ファイルサイズが違う場合
        
        let chatArea = document.getElementById('chat-area');
        // XMLHttpRequestオブジェクトを生成
        let xhr = new XMLHttpRequest();
          
          // 非同期通信を開始
          xhr.open('GET', 'chatlog.php?ajax=' + "ON", true);
          xhr.send(null);
          xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { //通信が完了
                    if (xhr.status === 200) { //通信が成功
                      // チャットログを更新+FSも更新
                      chatArea.insertAdjacentHTML('afterbegin', xhr.responseText);

                      // チャット履歴の1番下にフォーカスを持ってくる
                      let chatAreaHeight = chatArea.scrollHeight;
                      chatArea.scrollTop = chatAreaHeight;
                      // チャット履歴の1番下にフォーカスを持ってくる
                    }
                } else { //通信が完了する前
                  // 通信完了前に最初のチャットログとFSをリセット
                  chatArea.textContent = '';
                }
          }
      };
    };
}, false);

chatlog.php
<?php

$J_file = "chatlog.json";
$filesize = filesize($J_file); // 最新のファイルサイズ

if(isset($_GET['ajax']) && $_GET['ajax'] === "ON"){
    // ファイルサイズが違った時
    if($file = file_get_contents($J_file)){
        // 新しいチャットログのHTMLを構築
        $file = json_decode($file);
        $array = $file->chatlog;
        foreach($array as $object){
          if(isset($result)){
            $result =  $result.'<div class="'.$object->person.'"><p class="chat">'.str_replace("\r\n","<br>",$object->text).'<span class="chat-time">'.$object->time.'</span></p><img src="'.$object->imgPath.'"></div>';
          }else{
            $result =  '<div class="'.$object->person.'"><p class="chat">'.str_replace("\r\n","<br>",$object->text).'<span class="chat-time">'.$object->time.'</span></p><img src="'.$object->imgPath.'"></div>';
          }

        } 
    }
    // チャットリセットされた時もファイルサイズが一瞬違うため9行目にfalseが返ってもinputを表示させる
    $result = $result .'<input  id="preFilesize" type="hidden" value="'.$filesize.'"><input  id="aftFilesize" type="hidden" value="'.$filesize.'">';
    echo $result;
    exit;

}elseif(isset($_GET['ajax']) && $_GET['ajax'] === "OFF"){
    // ファイルサイズが同じ時
    echo $filesize; 
    exit;

}