読者です 読者をやめる 読者になる 読者になる

php+socket.ioを使ったチャットの作り方

kimagureneet.hatenablog.com
こっちにまじめにまとめました

やりたいこと

既存の会員制のwebサービスにチャットシステムを導入したい(ログイン中のみ使用可)
チャットは会員同士の1対1のツーショットのみ
会話の内容はログに保存していつでもみれるようにしたい
php以外よくわからないので極力phpを使いたい

使った技術

apache
php
mysql
socket.io(@バージョン0,9)
+
ElephantIO

そもそもsocket.ioで何ができるのか

今まで僕が作っていたサービスはブラウザからwebサーバへurlを指定してサーバからhtmlを受けとるというもの。
今回はチャットしている相手が送信したタイミングで、サーバから(受信者の)ブウラザへメッセージがあった旨を通知する必要がある。


javascriptのタイマーなどで定期的にサーバへ新着メッセージの有無を取りにいくという方法もあるかもしれないが、リアルタイム性にかけるし通信量も無駄に増えてしまう。
これを簡単に実装できるのものを探していたらsocket.ioが使えそうなのでこれを使う事にしました。


ちなみにこれはクライアント(ブラウザ側)とサーバ側の両方の実装が必要で、それぞれにjavascriptで書いたスクリプトを用意する必要がありました。
なので今まで通りwebページを表示するのにapacheでのwebサーバを使用しつつチャット用に別途socket.ioで書いたチャットサーバも使用するイメージでしょうか。

処理の流れ

1. なにはともあれチャットサーバを起動。これがブラウザからのチャット用の送信メッセージを受け付けて、受信者のブラウザへリアルタイムでメッセージを送信します。


2. ブラウザはまず始めにチャットサーバとの接続を確立します(今回はこの接続を受信専用に使用しました)


3. 2の接続が成功するとチャットサーバ(socket.io)でどのブラウザと接続しているかを識別するためのidが発行されて(ソケットidと呼びます)ブラウザへ返されるのでこれとメッセージを送信する相手の会員idをajaxでwebサーバへ送信します。

4. 3を受け取ったwebサーバは送信者のソケットidと送信相手の会員idをdbに保存します。


5. そしてブラウザからメッセージを送信する場合。ajaxでメッセージと送信相手の会員idをwebサーバへ送信します


6. メッセージを受け取ったwebサーバはdb(mysql)へメッセージと送信相手の会員idを保持します。さらにチャットサーバへメッセージと送信相手のソケットidを送信します。


7. 6より通知を受信したチャットサーバは受信者のソケットidとメッセージを受け取ったのでそのまま受信する側のブラウザへメッセージを送信します


8. 受信側のブラウザは1で接続が確立していればいつでもメッセージを受信することができるのでこれを受け取って画面に表示する。


ざっと概要を書いてみましたが、説明がわかりずらくてすみません、、、
やってることは難しくないのですが文章力がないので次回は具体的にdb構成とphpjavascriptのコード。とsocket.ioで書いたチャットサーバのコードを書いてみます。できたら図解も入れてみたいと思います