Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node handson

1,966 views

Published on

Shizuoka Developper

  • 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

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でも図を描ける(ウェブサイトに置いてあるのはその開発途中のデモ)

×