PHPで作れる定番機能の1つ「チャット機能」を自作してみました。
完成までの流れと苦労したポイント、どんなふうに作っていったかをまとめてみました。
#チャット機能を自作
今回使ってみたのはこのような感じのチャットです。
自作チャット
チャット機能を作ることができればPHPのあらかたのテクニックが学習できるかなと思い、作成することにしました。
##要件定義
まず最初にチャットを実現するために必要な機能を洗い出します。
チャットで欲しい機能
- チャットを送信時に時間とアイコンを表示
- チャットログを蓄積、表示
- チャットログが増えたら自動更新
- デモなのでユーザー切り替え
- チャットログリセット
必要になる言語
- HTML/CSS（元枠）
- PHP（データ操作）
- JavaScript（自動更新）
##設計
実現方法
- ログはJSONファイルに格納
- ログが増えたかどうかはファイルサイズで判断
- ajaxを使って更新時のチラツキを抑える
##制作
実際のコーディング方法は記事にまとめてみました。
【自作】PHPでチャット機能の作り方！LINEのような会話形式のプログラムのコードを徹底解説！
苦戦したポイント
- PHPでJSONファイルを操作する
- Postの二重送信対策
- ログが増えたかどうかをどうやって判断するか
- ajaxの更新
###JSONファイルへの格納
まずは送信されたチャットデータ（Post）にエスケープ処理を施し別の配列に格納し直します。
配列に格納されたデータをJSONファイルとして操作できるように整形、chatlog.jsonファイルに蓄積していきました。
これでログが増えればどんどんJSONファイルに溜まっていきます。
###二重送信対策
入力値をPHPで扱おうとするとページリロード時の二重送信が起きてしまいました。（一度送信されたデータが再度送信される）
これは入力値を受け取り後即座にリダイレクトさせることで解消することができました。
###ログの増減の識別方法
一番四苦八苦したのはログ増減の識別方法です。
いろいろ悩んで調べたあげくajaxという機能を知りました。ajaxとは日本語で非同期通信という意味でページ全体を更新せず、一部分だけを更新できるので余計な通信をしなくて済む優れた機能でした。
JavaScriptのsetIntervalメソッドを使ってajaxの処理を0.1秒ごとに呼び起こす方法を取りました。
input要素を2つ用意し1つはajax前のファイルサイズを格納、もう1つはajaxで常に現在のファイルサイズに更新し続けます。input要素自体は表示されないようにしておきます。
2つのinput要素のファイルサイズが異なる場合にのみログのリフレッシュ処理を起動させることで余計なリフレッシュを起こさせずに実現することができました。
##テスト
MAMPを使ったローカル環境で幾度となくテストを繰り返し、問題なさそうだったので無事公開しました。
##公開
しかし公開後ユーザー切り替えを行うと、2人同時にチャットをしている場合に、ユーザーを後手で切り替えた側に乗っ取られてしまう不具合が発生しました。
これはまだ解決できていませんが、sessionをうまく使えば行けるかな？と甘く考えております。
そしてもう一つの課題点。
sessionの破棄が明示的にできないことです。
sessionを使ったは良いもののチャットページを離脱するタイミングが読めないので破棄する処理を入れ込めませんでした。。
まだまだ至らぬ点も多く、自分のスキルの無さが出てきてしまいましたがこれからも楽しみながら学習していきたいと思います。
ご覧いただき本当にありがとうございました！
あめ