Node handson

1,865 views
1,839 views

Published on

Shizuoka Developper

1 Comment
0 Likes
Statistics
Notes
  • seealso http://metanest.jp/shizudev/nodejs-handson/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,865
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Node handson

  1. 1. WebSocketを使ったデモアプリ201 2年6月30日静岡Devel opers 勉強会Nod e. js ハンズオン岸本 誠( @ks makoto )
  2. 2. 発表概要W ebSocketとはhel l o worl d の解説デモアプリの解説(通信部分)簡単な改造( 余裕があったら) 3D表示の解説
  3. 3. WebSocketとはAjaxぽいことをやるためのA PIHTTPの( TCPの) 1 本のコネクションの中であれこれやる( cf . comet)RFC 6455 ( 201 1 Dec1 1 )JSプログラマが見るべきはW ebSocketA ( 現在W PI 3Cドラフト)
  4. 4. WebSocket A ( JavaScri pt) PI送信は送りっ放し: voi d s end ( ms g)受信はイベントハンドラ: onmes s ageストリームじゃなくてメッセージ指向
  5. 5. preparati onの内容サーバオブジェクトを作ってs erver. on( イベント名, f uncti on( arg){ // ここにハンドラを書く} というスタイルいわゆるechoサーバ
  6. 6. preparati onの内容s erver. js のほとんどの内容はHTTPサーバの実装Nod e用のW ebSocketの実装としてws を使用
  7. 7. preparati onの内容クライアント( JQuery使ってます)最初のHELOはサーバから来るサーバに hel l o, と worl d ¥n を送り帰ってきたのをハンドラで受けて表示
  8. 8. デモアプリの内容クライアント側から解説s etup_d nd _hand l erキャンバス要素中のドラッグを拾ってサーバにJSONにして送信d nd という名前はうっかり(ドロップは使ってない)
  9. 9. デモアプリの内容s etup_ms g_recei verctx = キャンバス要素の描画コンテキストサーバからJSONで[ メソッド名, 引数0, 引数1 , … ]というデータが来るのでappl yでそのメソッドを呼ぶ
  10. 10. デモアプリの内容その他最初の表示のために、ダミーの[ 0, 0] という内容のメッセージを投げているというわけで、アプリのほとんどはサーバ側にある
  11. 11. デモアプリの内容サーバHTTPサーバの実装があるのは同じquatという変数が、三次元の回転の状態を保持している(四元数)。あとで余裕があったらちょっと解説します
  12. 12. デモアプリの内容bui l d _cmd s がアプリのメインクライアントのキャンバスの描画コマンドを、cmd s _bui l d erを使ってまとめて作っているそこから後は3Dグラフィックスのライブラリ。あとで(略)
  13. 13. デモアプリの内容わかっている問題点グローバル変数を使っているサーバなのに複数のクライアントに同 時に応対できないorz元々クライアント側のみのアプリのつ もりで作ったものをそのまま流用した ため
  14. 14. デモアプリの改造超単純なお絵描きアプリを作ってみましょうbui l d _cmd s の先頭に、簡単な描画サン プルがコメントとして置いてあります
  15. 15. まとめWebSocketを使うことで、かなり通信を駆使したアプリが作れますA に癖があり、特にJSでは、ストリー PIム指向ではありません
  16. 16. まとめNod e. js と組み合わせると、分散オブジェクトっぽいことができます(now. js を使うのが楽かも)サーバをHas kel l で書いたりも分散オブジェクトについては関さんのd Ruby本とか高木浩光先生の「xORBを作ろう」(bi t誌)などを参考に
  17. 17. Quaterni on ( 四元数)三次元の回転は、座標系(XとYとZの各軸のベクトル)丸ごとでなくても表現できるロール・ピッチ・ヨーで表現するとジンバルロック(s ee. 『アポロ1 3』)が
  18. 18. Quaterni on ( 四元数)三次元の、あるベクトルV1 に対し、その回転は、その回転面にある(従属でない)ベクトルV2と、 aV1 + bV2で計算できる、というのをうまく使って、4要素の数の組で回転が計算できる、というのが四元数
  19. 19. 3Dライブラリ表示はワイヤーフレームだが、データは向き付けのあるポリゴンの集合として、多面体のデータを持っている稜線追跡法という手法で、隠線除去をおこなっているので、SVGでも図を描ける(ウェブサイトに置いてあるのはその開発途中のデモ)

×