2010年10月16日

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



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

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

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

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

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

一点面白いのは、一定間隔(5秒おき)でエコー通信が

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

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

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

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

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

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

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



人気ブログランキングへ
kotesaki at 02:11│Comments(2)TrackBack(0)clip!html5 | websocket

トラックバックURL

この記事へのコメント

1. Posted by guild wars 2 gold   2013年05月15日 16:35
データ同期とか面倒な制御を絡めつつ、ベースの通信もおもいっきりケアして。。。頭が下がりますm(__)m
2. Posted by ポールスミス だまし絵   2014年08月26日 02:30
http://gardenviewcourt.com.vn/paulsmith/sale-ps-442.htmlポールスミス バッグ 人気
ポールスミス だまし絵 http://gardenviewcourt.com.vn/paulsmith/sale-ps-731.html

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔