更新をリアルタイムで通知する方法
リアルタイムといえばNode.jsですが、PHPで作られたWEBサイトでリアルタイム通知を実装する必要があったので、
- Ajaxで一定間隔でリクエストを送る
- PHPでcomet実装する
- PHPでWebSocketを実装する
- Pusherを利用する
など検討した結果、リソースをなるべく消費したくなかったので、Pusherを使うことにしました。
Pusher登録
無料でWebsocketの接続数が最大20までで1日あたりのメッセージ発行数が10万回以内であれば利用することができます。
名前とメールアドレス、パスワードを設定するだけで使うことが出来ます。
App idとAccess Token
登録が完了すると、App id,key,secretが表示されるのでひかえます。
クライアント実装
Code examplesを参考にします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><head> <title>Pusher Test</title> <script type="text/javascript"> // Enable pusher logging - don't include this in production Pusher.log = function(message) { if (window.console && window.console.log) { window.console.log(message); } }; var pusher = new Pusher('******'); var channel = pusher.subscribe('test_channel'); channel.bind('my_event', function(data) { alert(data.message); }); </script></head> |
サーバー実装
サーバー側のライブラリは豊富にあります。Pusher Server Libraries | Pusher.PHPなので、pusher/pusher-php-serverを使いました。
1 2 3 4 | require('./Pusher.php');$pusher = new Pusher(PUSHER_KEY, PUSHER_SECRET, PUSHER_APPID);$pusher->trigger('test_channel', 'my_event', array('message' => 'Hello Pusher!')); |
triggerメソッドの第3引数に配列でパラメータを渡すとjson形式でクライアントで取得出来ます。
参考サイト
Auto Load and Refresh Div every 10 Seconds with jQuery and Ajax.
