PHP＋PUSHERを利用してWebsocket通信を行う

現在、とあるWebアプリケーションの開発の中で、ブラウザ間のリアルタイム同期が必要となりました。Websocketを使う場合、サーバを用意するのが面倒だと思っていたら、PUSHERというクラウドサービスがあることを知って、検討するためにちょっと使ってみましたので以下に手順を書いていきます。

次の構成を想定します。

手順１　PUSHERの登録

まずは以下のURLからアカウント登録をします。
http://pusher.com/

登録後、入力したメールアドレスに確認用のメールアドレスが送信されますので、送られてきたURLにアクセスし、登録を完了させます。

手順２　PUSHERへアクセスするためのライブラリを取得

http://pusher.com/docs/server_libraries　へアクセスし、PUSHERへAPIリクエストを行うためのライブラリを取得します。各言語のものがあります。

今回はPHPを利用しますので、以下を入れました。
https://github.com/pusher/pusher-php-server

手順３　websocketのコネクションを生成するページを作成(ブラウザAのアクセス用)

  <script src="http://js.pusher.com/1.11/pusher.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    Pusher.log = function(message) {
      if (window.console && window.console.log) window.console.log(message);
    };

    WEB_SOCKET_DEBUG = true;

    var pusher = new Pusher('********'); // API Key
    var channel = pusher.subscribe('test_channel');
    channel.bind('test_event', function(data) {
      alert(data);
    });
  </script>
  <p>Browser A</p>

手順４　Push通信を要求するためのページを作成(ブラウザBのアクセス用)

  // 各キー等は、PUSHERのサイトの「API access」タブに記載されています
  $pusher = new Pusher($key, $secret, $app_id);
  $pusher->trigger('test_channel', 'test_event', 'hello pussher!!');
  printf("trigger called.");

手順５　動作確認

ブラウザを２つ立ち上げて、動作確認を行います。
片方のブラウザ(ブラウザA)で、手順３で作成したページへアクセスし、もう片方のブラウザ(ブラウザB)で、手順４で作成したページへアクセスすると、ブラウザAにポップアップが表示されます。

以上。簡単ですが、今回はここまでです。