Node handson

WebSocketを使ったデモアプリ

201 2年6月30日
静岡Devel opers ' 勉強会
Nod e. js ハンズオン
岸本　誠（ @ks makoto ）

発表概要

W ebSocketとは
hel l o worl d の解説
デモアプリの解説（通信部分）
簡単な改造
( 余裕があったら) 3D表示の解説

WebSocketとは

AjaxぽいことをやるためのA PI
HTTPの( TCPの) 1 本のコネクションの中
であれこれやる( cf . comet)
RFC 6455 ( 201 1 Dec1 1 )
JSプログラマが見るべきはW ebSocket
A ( 現在W
PI 3Cドラフト)

WebSocket A ( JavaScri pt)
PI

送信は送りっ放し: voi d s end ( ms g)
受信はイベントハンドラ: onmes s age
ストリームじゃなくてメッセージ指向

preparati onの内容

サーバオブジェクトを作って
s erver. on( イベント名, f uncti on( arg)
{
// ここにハンドラを書く
} というスタイル
いわゆるechoサーバ


s erver. js のほとんどの内容はHTTPサー
バの実装
Nod e用のW ebSocketの実装として
ws を使用


クライアント( JQuery使ってます)
最初のHELOはサーバから来る
サーバに ' hel l o, ' と ' worl d ¥n' を
送り
帰ってきたのをハンドラで受けて表示

デモアプリの内容

クライアント側から解説
s etup_d nd _hand l er
キャンバス要素中のドラッグを拾って
サーバにJSONにして送信
d nd という名前はうっかり（ドロップは
使ってない）


s etup_ms g_recei ver
ctx = キャンバス要素の描画コンテキ
スト
サーバからJSONで
[ メソッド名, 引数0, 引数1 , … ]
というデータが来るのでappl yでそのメ
ソッドを呼ぶ


その他
最初の表示のために、ダミーの[ 0, 0]
という内容のメッセージを投げている
というわけで、アプリのほとんどは
サーバ側にある


サーバ
HTTPサーバの実装があるのは同じ
quatという変数が、三次元の回転の状
態を保持している（四元数）。あとで
余裕があったらちょっと解説します


bui l d _cmd s がアプリのメイン
クライアントのキャンバスの描画コマ
ンドを、cmd s _bui l d erを使ってまとめ
て作っている
そこから後は3Dグラフィックスのライ
ブラリ。あとで（略）


わかっている問題点
グローバル変数を使っている
サーバなのに複数のクライアントに同
時に応対できないorz
元々クライアント側のみのアプリのつ
もりで作ったものをそのまま流用した
ため

デモアプリの改造

超単純なお絵描きアプリを作ってみま
しょう
bui l d _cmd s の先頭に、簡単な描画サン
プルがコメントとして置いてあります

まとめ

WebSocketを使うことで、かなり通信を
駆使したアプリが作れます
A に癖があり、特にJSでは、ストリー
PI
ム指向ではありません

まとめ

Nod e. js と組み合わせると、分散オブ
ジェクトっぽいことができます
（now. js を使うのが楽かも）
サーバをHas kel l で書いたりも
分散オブジェクトについては関さんの
d Ruby本とか高木浩光先生の「xORBを作
ろう」（bi t誌）などを参考に

Quaterni on ( 四元数)

三次元の回転は、座標系（XとYとZの各
軸のベクトル）丸ごとでなくても表現
できる
ロール・ピッチ・ヨーで表現するとジ
ンバルロック（s ee. 『アポロ1 3』）が

Quaterni on ( 四元数)

三次元の、あるベクトルV1 に対し、そ
の回転は、その回転面にある（従属で
ない）ベクトルV2と、
aV1 + bV2
で計算できる、というのをうまく使っ
て、4要素の数の組で回転が計算でき
る、というのが四元数

3Dライブラリ

表示はワイヤーフレームだが、データ
は向き付けのあるポリゴンの集合とし
て、多面体のデータを持っている
稜線追跡法という手法で、隠線除去を
おこなっているので、SVGでも図を描け
る（ウェブサイトに置いてあるのはそ
の開発途中のデモ）

Recomendados