Node handson
Upcoming SlideShare
Loading in...5
×
 

Node handson

on

  • 816 views

Shizuoka Developper

Shizuoka Developper

Statistics

Views

Total Views
816
Views on SlideShare
816
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • seealso http://metanest.jp/shizudev/nodejs-handson/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Node handson Node handson Presentation Transcript

  • WebSocketを使ったデモアプリ201 2年6月30日静岡Devel opers 勉強会Nod e. js ハンズオン岸本 誠( @ks makoto )
  • 発表概要W ebSocketとはhel l o worl d の解説デモアプリの解説(通信部分)簡単な改造( 余裕があったら) 3D表示の解説
  • WebSocketとはAjaxぽいことをやるためのA PIHTTPの( TCPの) 1 本のコネクションの中であれこれやる( cf . comet)RFC 6455 ( 201 1 Dec1 1 )JSプログラマが見るべきはW ebSocketA ( 現在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サーバ
  • preparati onの内容s erver. js のほとんどの内容はHTTPサーバの実装Nod e用のW ebSocketの実装としてws を使用
  • preparati onの内容クライアント( JQuery使ってます)最初のHELOはサーバから来るサーバに hel l o, と worl d ¥n を送り帰ってきたのをハンドラで受けて表示
  • デモアプリの内容クライアント側から解説s etup_d nd _hand l erキャンバス要素中のドラッグを拾ってサーバにJSONにして送信d nd という名前はうっかり(ドロップは使ってない)
  • デモアプリの内容s etup_ms g_recei verctx = キャンバス要素の描画コンテキストサーバから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でも図を描ける(ウェブサイトに置いてあるのはその開発途中のデモ)