PHPでWebSocketが使えるライブラリ”Ratchet“を使って、ブラウザVJデモを作ってみました。
↑あまりかっこいいものではないですが、デモ動画です。
コントロール用のウィンドウから、表示用ウィンドウのエフェクトを操作しているところがWebSocket部分です。
いや、変に苦労しました。
開発&動作環境がさくらインターネットのレンタルサーバ(スタンダードプラン)なんでroot権限ないし、ZeroMQとかWAMPとかauthbahn.jsとか何それおいしいの?な状態だったし。。
とりあえず、簡単にメモを残します!
参考にしたのはRatchetのPush Integrationサンプルです。
Ratchetインストールメモ
まずはRatchetをインストールしなければならないので、Push Integrationサンプルのページに書いてあるcomposer.jsonをコピペして必要なパッケージをインストールしようとしました。すると、以下のようなエラーが。。
Problem 1
– react/zmq v0.3.0 requires ext-zmq * -> the requested PHP extension zmq is missing from your system.
– react/zmq v0.2.0 requires ext-zmq * -> the requested PHP extension zmq is missing from your system.
– Installation request for react/zmq 0.2.|0.3. -> satisfiable by react/zmq[v0.2.0, v0.3.0].
react/zmqをインストールするには、zmq(ZeroMQ)のPHP extensionが必要みたいです。
なので、先にzmqのphp extensionをインストールするのですが、このzmqのextensionをインストール(ビルド)するにはlibzmqが必要です。まずはこいつをインストールしましょう。
ここからStable Release 3.2.5をダウンロードし、ビルドします。
なぜ最新の4.1.0じゃないかというと、単純にさくらのレンタルサーバだとビルドが通らなかったからです!
次にzmqのextensionですが、root権限がないのでpear経由ではなくソースからビルドします。ソースからのビルドはここを参照。
参考サイトの通りにやればzmq.soのビルドはできるのですが、なぜかインストール先が/usr/local以下から変更できない。。仕方ないので、zmq.soを手動でコピー。
zmq.soの情報を独自php.iniに追記してインストール完了、、と思いきや、composerのエラーは変わらず。
そりゃそうですよね、コマンドラインから独自php.iniを読みにいく設定してませんから。
これも力技で、phpを実行するとphp -c xxx/php.ini が実行されるようエイリアスを仕込みます。
これでreact/zmqの0.3.0がインストール出来ました!!
アプリの作成メモ
ReactとかZeroMQのことは置いておいて、ここでのポイントはautobahn.jsです。
autobahn.jsはWebSocketとWAMPのプロトコルに対応したクライアントライブラリで、Push Integrationサンプルでも使われています。
APIのリファレンスはこちらを参照(WAMP v2に対応した0.9.4のリファレンスには、サンプルで使われている関数は載ってなかったです)。
主な動作の仕組みは↓です。
準備
- Webサーバとは別にWebSocketサーバを起動しておく
※ WebSocketサーバは、クライアント(ブラウザ)との通信用に8080ポート、ZeroMQ(Webサーバ経由で送られてくるメッセージ)との通信用に5555ポートを利用するようにしています。
使用時
- コントローラのURLにアクセスし、表示用のウィンドウを開く
※ このとき、表示用ウィンドウがWebSocketサーバに接続されます。 - Webサーバに対して、コントローラから操作用のコマンドをajaxで送信する
- コマンド(JSON)を受信したら、WebサーバがWebSocketサーバにZeroMQ経由でメッセージを送信する
※ ZeroMQのPUSH/PULLパターンを使っています。 - WebSocketサーバがメッセージを受信したら、接続しているクライアント(表示用ウィンドウ)に対してコマンド(JSON)を送信する
- コマンドを受信したクライアントは、その内容に合わせて処理を行う
ソースはgithubにアップしました。
以上!!!!