くろあん徒然日記

PCのネタが多い雑記。全てに関して『ド素人』が書き綴るTipsエントリの数々……信憑性はいかほどだろう?

ストリーミング形式のチャットシステムを作りたかった【PHP&JavaScript】

PHPは少し触ったことあるけど、JavaScriptなんて知らねえよ(´・ω・)このやろう

な人向け。誰でもできるストリーミング的チャット画面の作り方。

やりたいこと&こんな人向け

  1. PHPを使ったチャットシステムを作る
  2. 投稿されたメッセージを自動リロードで読み込みたい
  3. でもmetaタグによるrefreshとか使いたくない
  4. frameも使いたくない
  5. というかいくら自分自身のページに戻るとはいえ、画面遷移をさせたくない
  6. 面倒な御託とかいいから簡単にサッと作りたい
  7. JavaScriptとか全く知らない(←重要)

調べておこう!(=御託)

  1. Ajax非同期通信(存在を知っておいて欲しいので、とりあえず(1/4)だけ読めばおk)
  2. HTML5WebSocket(第1回だけ読めば(ry)。Ajaxの弱点を知っておいてください。なお、WebSocketは今回使いません)

やってみよう!

今回はとりあえず「やりたいこと」を達成するため、拡張性その他諸々はガン無視です。

自分自身、JavaScriptとか全く知らないので、そこら辺は偉い人に聞いてみてください。

第1段階:必要なファイルを用意する

まず、prototype.jsなるファイルを用意します。中身? ただのテキストです。

ここでダウンロードしてきてください。

ダウンロードしたjsファイルは、サーバ上の適当なところに置いておきます。

後でこのファイルを置いたパスが必要なので、覚えておいてください。

 

第2段階:必要な公開用ファイルを作成する

1つは、実際に公開するhtmlファイル(今回はchat.htmlという名前)、

もう1つは、自動的にリロードする操作を行うphpファイル(今回はstream.phpという名前)です。

それぞれ空のファイルを作っておきましょう。

 

第3段階:コーディングする

解説ガン無視で良い方は、以下のソースをコピペすればなんとかなるんじゃないでしょうか?

今回は、データベース中に保存されているチャットの内容(連番ID、名前、メッセージ)を、5秒ごとに更新をかけて取りに行く想定のソースです。

 

※解説

[chat.html]

L.7:ここに、第2段階で保存したjsファイルのパスを記述します。

L.14:自動更新を行う場所を指定します。後で出てくるL.46の<div id="chat">の部分を自動で更新したいので、"chat"と記述します。

L.15:自動更新する際に実際に動くphpを記述したファイルのパスを指定します。

L.17-18:必要があれば、L.15で指定したphpにクエリパラメータを送ることができます。掲示板システムなどで、スレッドを指定する必要があるときなどに使いましょう。

L.19:ページの更新間隔です。適当に好きな数字を秒単位で書いておきましょう。

L.30-37:エラーが発生したときの処理を記述します。自動更新の場合、アラートでポップアップウィンドウが出ても、それを消した後、L.19で指定した秒数が経過するとまたポップアップが出てウザいので、エラーが一度でも出た場合はL.32,36で自動更新を止めるようにしています。

L.46-48:ここに自動更新する内容が入ります。今回は、システムに投稿されたメッセージが全てここに表示されるようになります。

 

[stream.php

L.4:chat.htmlでクエリパラメータを送信した場合、このような感じで受け取れます。普通のGETメソッドと同じ使い方。

L.20-24:余談ですが、ヒアドキュメントで変数を記述するときは、別にいちいち<?php echo "$hoge"; ?>とか書かなくていいんですね。初めて知った……^q^(参考URL

L.25:正直これも余談ですが、ヒアドキュメントを終えるときのEODなどの宣言は、見た目がどれだけ変でも、先頭に空白やタブ文字を置くなどしてはいけません。エラーが出ます。インデントとかやっちゃダメね。

L.27:ここで出力されるechoの内容が、chat.htmlで一定間隔(今回の例では5秒)ごとに、<div id="chat">内に記述されます。

 

以上、解説にもならない解説おわり。

これで、5秒ごとにチャットのメッセージ部分だけを更新させることができます。

 

でも待てよ……?

第1段階での資料をしっかり読んでくれた方なら分かると思いますが、自動更新をかけてることで、結局やってることはmetaタグによるrefreshと大して変わりません(消費リソースという意味ではAjaxの方に軍配が上がるそうですが……)。

なので、『データベースに変更があったときにだけ更新したい!』という方は別の方法が必要になります。

 

あと、もう一度言いますが、自分もJavaScriptなんて知らない方の人間ですので、細かいところはご自身でググるとかしてみてください。

 

 

今回の参考文献