こてさきAjax:マウスジェスチャー送受信をWebSocketとXHRで比較

2010年10月16日

マウスジェスチャー送受信をWebSocketとXHRで比較

※こちらの記事で紹介しているデモにはバグがあり、以下の内容は正確ではありません。修正記事をhttp://blog.livedoor.jp/kotesaki/archives/1601908.htmlにPOSTしましたので、ご確認ください。

なんか、最近毎日のようにブログを書いています。node.jsが楽しすぎて。。。(^-^)

さて、前回の記事は「サーバーPushだけだったら、HTTPでも出来るよん。特にServer-Sent Events使うと、ちょー簡単」というものだったのですが、今日の記事は心機一転して「WebSocket使わないとやっぱキツイっす」というものです。

作ったデモは、mousemoveイベントの際に、マウス座標をサーバーでエコーバックして、ブラウザに描画するという至ってシンプルなもの。ようは、エコーサーバーですが、データの送信頻度が半端じゃないというものです。（トラフィックは対したことはない）

ありがちっちゃぁありがちなデモです。

※proxy接続環境や、outgoing 80番以外は閉じているようなstrictな環境ではアクセスできません。

一点面白いのは、一定間隔（５秒おき）でエコー通信が

WebSocket(赤) => HTTP(青) => WebSocket(赤） => ... と切り替わるところ。HTTPでのエコーに入った途端に、軌跡の数が激減するのが分かります。上の画像で、青の軌跡がやたら少なくなっていますが、これはそういう意味です。（なんのこっちゃ）

で、何故にHTTPになると軌跡の数が減っちゃうの？というのが本題。HTTPは、リクエスト＆レスポンスのプロトコルのため、HTTP1コネクションあたり、レスポンスが返ってこないと、次のリクエストが送信できません。このためここで、マウス座標はHTTPの場合、このリクエストで送信しているのですが、上の理由により送信できないため、データが間引かれてしまいます。てことで、「さみしい、、、さみしいよ～～」な結果になってしまう訳です。

もうちょっと詳しく見てみましょう。

FireBugで見てみると、HTTPでデータがエコーバックされるのに、大体18msecかかっています。この間、mouseが動いても、その座標データを送信することは出来ず。「僕もうあきらめるッス」ということで、真っ赤っかにabortしまくっています。悲しいですね～

てなわけで、「WebSocket使わないと、自由自在にデータを送信することは出来ないよん。HTTPでは注意しないと、いつの間にかデータがなくなっちゃうよん」というのが結論です。「リアルタイムWebにはWebSocketが必要」ってことです。僕が１年ぐらい前に書いた「websocket pipelineで、webは早くかつ低コストになるか？を実験」と、メカニズムは同じです。

HTTPでこれをやるとしたら、"mousemove"イベント発生時に一定時間（例えば100msecとか）軌跡データをバッファに溜めておいて、タイミングが来たら、まとめて送信するとか。あとは、XHRを複数張って、パラレルに送信するってのが考えられます。ただ、前者は「遅延が起きるし、制御がめんどい」。後者は、「順番が入れ替わるカモ～困っちゃうカモ～」だし、サーバーリソースも数倍食っちゃうので、うーーーん、って感じ。パラレル送信自体、データが落ちる可能性を0にするものではないというのもあります。落しどころは、送信バッファ＋パラレル送信でしょうね。。。めんどそう。

Google Waveで話題になった、チャットの一文字づつ送信。WebSocket使うと、訳もなくできる技だったりするのですが、これをHTTPでやっていた訳で、かなり大変だったんだろうなぁと思ってしまいます。データ同期とか面倒な制御を絡めつつ、ベースの通信もおもいっきりケアして。。。頭が下がりますm(__)m

毎度のことながら、コードはgoogle codeにおいてあります。たいしたコードでは無いですが、宜しければご確認ください。

人気ブログランキングへ