JavaScriptとFlash(socketjsのSocketConnect)でリアルタイムチャットを作ってみる ぎじゅっやさん

socketjs( JavaScript + Flash ) = Comet ?

(ノ・・)ン。。。。。。(((●コロコロッ


追記：
こちらもどうぞ。



とりあえずこんなの↓を作った見た。



(鯖会社の撤去命令で閉鎖中)


右側に入力ボックスがあってそれに適当な文字を入力してEnterを押すと、
左側に文字が出てくるという至って簡単なもの。


ブラウザを複数立ち上げると、
別のクライアントＩＤが割り振られて、
投稿した内容が即座に表示されている。。。はず。

日本語が使えないとか、
動作が緩慢だとかはどうか許して欲しい。
実験なので改良する気はあまり無い。悪しからず。

---

AJAXは古い技術を集めたものとはいえ、
世間に革命的なインパクトを与えた。
ただ、AJAXの最大の欠点・・・
いや、AJAXの欠点と言うよりWebアプリのジレンマと言うべきか。
それがこれ。




例えばチャットやメッセンジャー。
これらをWebアプリで実装しようとしても、
どうしてもリアルタイムにならない。
「更新」ボタンを付けるかぐらいしか思いつかない。
仮想的にAJAX(またはiFrame)で１分に一回ぐらいクロールしてリアルタイムを実現できるかもしれないが、
完全なリアルタイムには絶対ならないし、
無駄なリクエストがほとんどを占めてしまう。

それを実現するのがCometの技術なのだが、
Cometの技術は今のところPHPの出番がない。
そのうちApacheがモジュールを出したりするだろうが、
workerモジュールが使えないPHPにはやはり出番はなさそうだ。

そこで別の実装法としてServer-Sent Event(HTTP Stream)を試してみたが、
うまくいったのかこれ？って言う感じではある。
IEに至っては延々読み込みが止められなかった。
個人的なアプリならともかく実際のサービスに導入するのはできないだろう。


では手詰まり？
かと言えばそうでもなさそうだ。
その他の技術してsocketjsやAFLAXといったFlashとJavaScriptのコラボというのがある。

Flash Player5以降にXMLSocketというクラスライブラリが搭載されているのだが、
これがSocket通信を可能にする技術。
socket通信を使用してリアルタイム性を実現する方法だ。
そして各種イベント発生時にJavaScriptを発動させる仕組みになっている。
となれば、後はどうとでも出来るというわけだ。

（・υ・）｀｀ホォー メカラウロコ

これによってブラウザ依存の無い、
リアルタイムAJAXが実現できる。



AFLAX(名前が生命保険会社っぽいな)はもっと総合的なものなのでもっと調査が必要。
今回はソケット通信に特化したsocketjsを使って簡単なチャットアプリを作ってみることにした。
サーバ側をPHP、クライアント側がFlash+JavaScriptという構成。
まぁ、ただ、PHPはやはりこの手のものに使わない方がいい気がしている。
実運用とかがあった時はC#とかで書こうかと。

[More:]

●Socket通信サーバ
Cli版のPHPで実装。
PHPletのライブラリだけ頂いて自前で作成。
ソケット関数、フォーク関数が必要なので、
コンパイル時に下記のオプションを追加しておく。

--enable-pcntl --enable-sockets

あまり参考にはならないと思うが、
ソースも公開しておく。
=>Chat Server PHP
=>chat Server Source

●Socket通信クライアント
socketjsで実装。


さて、socketjsについて少し掘り下げてみよう。
socketjsとは？

Realtime Sockets in Javascript!
The JS-Bridge to Flash' Socket API

FlashのXMLSocketとJavaScriptの橋渡しをしてくれるモジュール。
下記APIとなるJavaScriptコードを自前で作成する。

• SocketConnect(host,port)
• SocketSend(data)
• SocketClose()
• SocketOnInit()
• SocketOnConnect(success)
• SocketOnData(data)
• SocketOnClose()

各種イベント発生時にこれらのAPIが起動する仕組みだ。
用途はかなりありそう。

こちらはカスタマイズしやすいようにrawデータを公開しよう。
=>socketjs JavaScript Source


ハマリポイント
今回の組み合わせは存外にはまりポイントが多い。
接続するだけで数日を要したぐらいだ。
全部あげたいところだがほとんど忘れた。（汗

●Flash

• 使用できるポート番号は1024以上
• Flashが保存してあるサイトのドメイン以外は使用不可
• 受信する文字列の終端文字は改行ではなくNULL

●JavaScript

• SocketOnConnectの戻り値はboolenではなくtrue,falseという文字列
• APIが関数であるためクラス作成が出来ない
• IEでembed配列が使えないのでFlash用のIDはハードコーディングするしかない

●PHP

• PHPletのクラスライブラリは未定義のクラスをポンポン呼び出す
• マルチプロセスだからなのか、ユーザーを複数当てるにもうまく割り当てられない。
• socketjsのドキュメントには終端文字を"\0\n"と記述してあるが実際は"\n\0"、最終的にはchr(0)を使用

FlashのXMLSocketに関して、
Flash Player7以降で多少緩和されている。
crossdomain.xmlというのを設置することでポート及びドメインの問題は回避できるらしいのだが、
まだ試せていないのが現状。


終端文字がNULLだというのは、
詰まるところ通常のHTTPやFTP通信はこれを使って出来ないようにするためなのだろうか。
あと、直接記述してあるポートに飛ぶためファイアウォールは通せない。
ファイアウォールを通すにはFlash Remotingを使用しなければならないらしい。
ってよくわかってないんだけど。。。
Flash RemotingをPHPで実現するAMFPHPと言うのがあるのだが、
これを調査する必要がありそうだ。
調査でき次第ご報告するとしよう。



以前のSSEよりもこちらの方が実運用に向いている。
リアルタイムにXMLHTTPRequestが使えればいいのだが、
まだまだ調査が必要だ。