PHP – Ajaxでリアルタイムチャットなど

PHPを使用し、チャットなどを作る時に必要となる、「ウェブのページを再ロードすることなく、バックグランドでデータを取得して、表示内容だけを更新する」ための基礎知識をまとめました。

Ajaxの基本的なコード

ヘッダ部分に追加する行その1 JQuery


<script src='https://code.jquery.com/jquery-3.3.1.js'></script>

ヘッダ部分に追加する 行その2 コード本体


function chekMessage() {
    $.ajax({
        type: 'post',
        url: '<< URL >>'
    }
    .then(
        function (data) {
            dispElm = document.getElementById('display_area');
            dispElm.html=data;
        },
        function () {
            $('#display_area').html('ERROR');
        }
    );
}

上記の「<< URL >>」の部分に読み込んできたいページやファイルのURLを入れます。
下線の部分のfunctionが処理が成功したときに呼ばれる関数で、引数として読み込んだデータが渡されます。
下線の部分のFunctionのすぐ下の引数なしのFunctionは、処理中にエラーが発生したり、URLで指定されたデータが見つからない(読み込めない)などの異常が発生した時に呼び出されます。

HTML body内に記述する表示エリアの例


<span id='display_area'></span>

処理を定期的に繰り返す方法

チャットアプリなどでは、表示情報を数秒おきに更新する必要があります。ウェブ画面を再ロードすることなく表示項目だけを更新したい場合は(今回の場合は上記サンプルの「chekMessage()」を繰り返し呼び出す仕組みが必要です。

数秒間隔で関数を呼び出す処理(ヘッダ部分に追加)


$(document).ready(function() {
    // 最初に関数を1回呼び出しておく
    chekMessage();
    // タイマー起動(chekMessage関数を3秒間隔で呼び出す)
    setInterval('chekMessage()', 3000);
});

「$(document).ready」で、ページが準備できた際に呼び出される関数内で、setIntervalを呼び出します。第一引数には呼び出す関数名を記述し、第二引数には呼び出す間隔をミリ秒単位で指定します。

タイマー処理を止める方法

setIntervalを使うと、指定した関数を永遠に呼び出し続けます。これを停止したい場合は、以下のようにします。


// タイマー起動(chekMessage関数を3秒間隔で呼び出す)
intvlId = setInterval('chekMessage()', 3000);

// タイマー停止
clearInterval(intvlId);

指定時間後に1回だけ関数を呼び出す

指定したミリ秒後に関数を1回だけ呼び出したい場合は、以下のコードを使います。


// chekMessage関数を3000ミリ秒後に1回だけ呼び出す
var timeId = setTimeout( 'chekMessage()', 3000 ) ;

// 設定したタイマーを停止する
clearTimeout(timeId);

コーリングシーケンス


// 指定したミリ秒ごとに処理を実行する
var intervalId = setInterval('コード',間隔(ミリ秒));
var intervalId = setInterval('関数名()',間隔(ミリ秒),関数の第一引数,第二引数,…);

// 実行中のIntervalタイマーをキャンセルする
clearInterval(intervalId);

// 指定したミリ秒後に処理を1回だけ実行する
var intervalId = setTimeout('コード',間隔(ミリ秒));
var intervalId = setTimeout('関数名()',間隔(ミリ秒),関数の第一引数,第二引数,…);

// 実行中のTimeoutタイマーをキャンセルする
clearTimeout(intervalId);

チャットを作る場合のヒント

PHPを使ってチャットアプリを作る場合は、上記のAjaxコード、定間隔の関数の実行という2つに加えて考えなければならない点は、チャット用のデータをどう保持するかです。JSONなどでチャットデータを持っても良いですが、面倒な場合は、PHPプログラムでチャットの全行を表示するように「&lt;table>」を表示するHTML文をファイルに書き出して、Ajaxでそのファイルを読み込んで、HTMLのspanなどの表示領域に放り込んでしまう方法があります。

ファイルを書き出す場合は、以下のPHP関数を利用します

ファイルを書き出す場合は、他の人が書き込んだものと競合しないように、排他をかけたほうが良いので、以下のPHP関数を利用します。


// テキストファイルを排他ロックしながら書き出す
file_put_contents($fullPath, $textData, LOCK_EX);

$fullPath = 書き出すファイルのフルパス名
$textData = 書き出す内容

タイトルとURLをコピーしました