WebSocket使ってブラウザでVJっぽいことやってみるよー

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のリファレンスには、サンプルで使われている関数は載ってなかったです)。

 

主な動作の仕組みは↓です。

 

準備

  1. Webサーバとは別にWebSocketサーバを起動しておく
    ※ WebSocketサーバは、クライアント(ブラウザ)との通信用に8080ポート、ZeroMQ(Webサーバ経由で送られてくるメッセージ)との通信用に5555ポートを利用するようにしています。

使用時

  1. コントローラのURLにアクセスし、表示用のウィンドウを開く
    ※ このとき、表示用ウィンドウがWebSocketサーバに接続されます。
  2. Webサーバに対して、コントローラから操作用のコマンドをajaxで送信する
  3. コマンド(JSON)を受信したら、WebサーバがWebSocketサーバにZeroMQ経由でメッセージを送信する
    ※ ZeroMQのPUSH/PULLパターンを使っています。
  4. WebSocketサーバがメッセージを受信したら、接続しているクライアント(表示用ウィンドウ)に対してコマンド(JSON)を送信する
  5. コマンドを受信したクライアントは、その内容に合わせて処理を行う

 

ソースはgithubにアップしました。

 

以上!!!!