Edited at

jsを使わずリアルタイムチャットを作ってみた

More than 1 year has passed since last update.


はじめに

社内でLTがあり、リアルタイムチャットを作ることにしました。

しかし、

ここで先に申し上げたいことは、これは、ちょっとした遊び心で作ったもので

真剣にリアルタイムチャットを作成する際にはあまり参考にはなりませんのでご了承ください。。(笑)


作ったもの

WEBアプリ

■使用言語

phpのみ

■仕様

投稿したものが、お互いのブラウザ上にて、画面を更新せずにリアルタイムで表示されるという仕様です。


問題点

サーバー側から情報を受けとって表示まで処理が完了した後、

jsを全く使わずに(クライアントから要求せずに)どのようにして、相手の情報を画面上に表示するのか?

という問題があります。

WebSocketなど、サーバ側から情報をプッシュする技術をもありますが、

フロントエンド側にもある程度、jsの記載が必要となります。

■対応方法

無限ループ(笑)

「サーバー側から情報を受けとって表示まで処理が完了した後、・・」とありますが、

表示まで処理が完了しても、サーバー側で処理をし続ければ、クライアントからの要求がなくてもずっと、サーバー側をつかんだ状態で最新情報を渡すことができます。


実装方法

①投稿したものをテーブルなどに登録するようにします。

※今回は時間がなかったので共通のtxtファイルに書き込むようにしました。

②無限ループを準備します。


index.php

while (true)

{
//処理
}

③ループ内の処理はこんな感じです。

 1. txtファイルから最新のログ情報を取得

   ↓

 2. 画面に表示しているチャットログと(1)で取得したチャットログを比較

  差分があれば、画面上に差分を出力

   ↓

 3. 1秒スリープ

 ※チャットログの内容が更新されていないかずっと確認し続ける

こんな感じです。


index.php

while (true) {

$tmp = 最新のチャットログを読み込む;
if($tmp !== $posts){ //出力中のログと取得した最新ログを比較する
$diff = array_diff($tmp, $posts);
foreach ($diff as $val){
echo $val ."</br>"; //差分があれば画面に出力
ob_flush();
flush();
}
$posts = $tmp;
}
sleep(1); //1秒スリープ
}

これで実行すると

無限ループでずっとクルクル回って処理が続いた状態となりますが

お互いの投稿が自動で画面上に出力されます。(笑)


さいごに

ちょっとした遊び心で作っただけですので、真似する際は気を付けてください。

CPU使用率が跳ね上がります。。(汗)

なんの参考にもならない投稿で失礼しました!

以上