PHPは少し触ったことあるけど、JavaScriptなんて知らねえよ(´・ω・)このやろう
な人向け。誰でもできるストリーミング的チャット画面の作り方。
やりたいこと&こんな人向け
- PHPを使ったチャットシステムを作る
- 投稿されたメッセージを自動リロードで読み込みたい
- でもmetaタグによるrefreshとか使いたくない
- frameも使いたくない
- というかいくら自分自身のページに戻るとはいえ、画面遷移をさせたくない
- 面倒な御託とかいいから簡単にサッと作りたい
- JavaScriptとか全く知らない(←重要)
調べておこう!(=御託)
- Ajaxと非同期通信(存在を知っておいて欲しいので、とりあえず(1/4)だけ読めばおk)
- HTML5とWebSocket(第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なんて知らない方の人間ですので、細かいところはご自身でググるとかしてみてください。
今回の参考文献