アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

CanvasとWebSocketsでみんなでウロウロする

火曜日担当のkomagataです。

Metasploitは一回お休みさせていただいてJavascriptのお話しです。

仕事は主にwebプログラミングなので身も蓋も無い言い方をすると「DBに入れたり出したり」しかしてません。

「もう文字列処理はうんざりなんだよ!」

というのは嘘ですが、たまには動きのある見栄えのするグラフィックとかアニメーションとかプログラムしてみたいと思い、HTML5で使えるようになるらしい、グラフィック機能のcanvasと双方向同期通信のWebSocketsを使ってキャラクターがウロウロするだけのプログラムを作ってみました。

WebSocketsを実装しているのは現状Google Chrome 4以降だけなので、動作してる雰囲気を伝えるために動画にしてみました。

最近のChromeには実装されているので下記のように簡単にサーバーに接続することができます。

ws = new WebSocket("ws://localhost:8080/")
ws.onopen = function() { console.log('open') }
ws.onclose = function() { console.log('close') }
ws.onmessage = function(evt) { ws.send('Hello!') }

CometなどよりとてもシンプルでたちまちWebSocketsが好きになりました!

Ajaxのように非同期に小さなメッセージをちょこちょこ飛ばすのではなく、1ユーザーに対して1本ガッシリしたラインを繋ぎ、双方向にドカドカ通信するイメージでしょうか。

真っ先にネットゲーム的なものでの利用方法が思い付きますが、これが標準的なブラウザで使えるようになれば、他の新しい使い方で出てきて斬新なUIが生まれれば良いなと思います。

とりあえず現状を下記のURLで動かしています。chromesafariのnightlyでは動くみたいです。(windows, mac, linuxどれでも動くことは確認しました。)

http://verdana.komagata.org/prowler/

ソースは下記です。

komagata's prowler at master - GitHub