厂辞肠办别迟厂迟谤别补尘入门
10 likes2,802 views
2011年9月24日に大阪にて開催された「第2回 HTML5など勉強会（仮）」で発表したときに使ったプレゼン資料です。
厂辞肠办别迟厂迟谤别补尘入门
- 1. SocketStream?入?門 2011/9/24 ?第2回 ?HTML5など勉強会（仮） kadoppe 1
- 2. ?自?己紹介 ! ?名前：kadoppe ! ?Twitter ?twitter.com/kadoppe ! ?Blog ?www.kadoppe.net ! ?職業：フリーランスエンジニア ! iOS, ?Web（Rails, ?CakePHP, ?Node.js） ! ?HTML5-‐??West.jp ?コアメンバー ! about.me/kadoppe 2
- 3. 今?日のアジェンダ ! SocketStreamって知ってます？ ! SocketStreamとは？ ! SocketStreamの得意分野?不不得意分野 ! ?動作環境、インストール、起動まで ! SocketStreamの特徴 ! SocketStreamのこれから 3
- 4. 質問 4
- 5. SocketStream知ってる？ 1.? 知らない 2.? 名前だけなら 3.? サンプルアプリ動かしてみた 4.? ドキュメントにひと通り?目を通した 5.? アプリつくって公開してみた 5
- 6. 僕はというと 1.? 知らない 2.? 名前だけなら ?← ??一昨?日まで 3.? サンプルアプリ動かしてみた 4.? ドキュメントにひと通り?目を通した ?← ? イマココ 5.? アプリつくって公開してみた 6
- 7. SocketStreamとは？ ! ?フルスタックWebアプリフレームワーク ! Node.jsの上で動作 ! ??高性能なSPA ?(Single-‐??page ?application) を効率率率よく開発すること?目的 ! ?様々な技術の上になりたっている ! WebSocket, ?Socket.IO, ?Redis, ? Co?eeScript ?など 7
- 8. SPA（Single-‐??page ?application） ! ?単?一のWebページのみで構成される Webアプリケーション ! ?ページ遷移なし ! ?Webのアプリケーションプラット フォーム化に伴い増加傾向？ 8
- 9. SPAの例例 ! ?Sudoku http://www.thomasweibel.ch/sudoku/ 9
- 10. SPAの?一般的なしくみ 1.? 最初のアクセス時に静的なコードをす べてサーバから取得 ?? HTML, ?JavaScript, ?CSSなど 2.? 必要に応じてXHRによりサーバ/ブラ ウザ間でデータを送受信(双?方向通信) 3.? ページを部分的に更更新 10
- 11. XHRによる双?方向通信の問題点 ! ?接続確?立立時の遅延 ! ?ブラウザ/サーバ間で通信が発?生する たびに接続を確?立立する必要 → ?遅延が発?生 ! ?HTTPヘッダのオーバーヘッド ! ?本当に送りたいデータと?比べてヘッ ダサイズが?大きい → ?通信効率率率が悪い 11
- 12. そこでSocketStream ! ?サーバ/ブラウザ間のデータのやり取り にWebSocketを利利?用 ! ?サーバ/ブラウザ間で双?方向通信を?行行う ためのプロトコル ! ?特徴 ! ? 接続を確?立立するのは最初だけ ! ? HTTPと?比べて軽量量なヘッダ より?高性能、リアルタイムな Webアプリを実装可能 12
- 13. SocketStreamの得意分野 ! ?サーバ/ブラウザ間でリアルタイムに データをやりとりする必要があるWeb アプリ ! ?チャット ! ?株取引 ! ?位置情報モニタリング ! ?オンライン格闘ゲームなど 13
- 14. SocketStreamの苦?手分野 ! ?各コンテンツにユニークなURLが必要 なWebアプリ ! ?ブログなど、コンテンツリッチなサ イト ! ?CRUD操作が多数発?生するWebアプリ ! ?業務系Webアプリなど 14
- 15. 対応ブラウザ ! ?Chrome, ?Safari, ?Firefox ?6 ! WebSocketに対応しているので問題 なく動作 ! ?IE、古いバージョンのFirefox ! WebSocketに対応していないが Socket.IOにより問題なく動作 15
- 16. Demo ! SocketRacer https://github.com/alz/socketracer 16
- 17. 動作に必要なもの ! Node.js ?0.4.x ! ?サーバサイドJSの実装の?一つ ! ?NPM ?1.0 ?or ?above ! Node.jsのモジュール管理理ツール ! Redis ?2.2 ?or ?above ! ?KVS（Key-‐??value ?store）のひとつ 17
- 18. インストールからアプリ起動まで ! ?インストール $ npm install socketstream -g! ! ?アプリひな形作成 $ socketstream new sample_app! ! ?起動 $ cd sample_app! $ socketstream start! 18
- 20. SocketStreamの特徴 ! Co?eeScript, ?Jade, ?Stylusをデフォル ト採?用 ! ?シンプルなディレクトリ構造 ! ?サーバ/ブラウザ間でのRPCを容易易に実装 可能 ! ?シンプルなPub/Subメッセージング機構 ! ??高いスケーラビリティ 20
- 21. 開発に使う?言語 ! ?ロジック ! Co?eeScript ?(or ?JavaScript) ! ?ビュー ! ?Jade ?(or ?HTML) ! Node.js?用テンプレートエンジン ! ?Stylus ?(or ?CSS) ! Node.jsでCSSを簡潔に記述するための モジュール 21
- 22. Co?eeScript ! ? コンパイルするとJavaScriptを?生成してくれる便便 利利な?言語 ! ? RubyやPythonの構?文の影響を受けている ! ? 利利点 ! ? たくさん書かなくて良良い ! ? JavaScriptのBad ?Partsを隠してくれる ! ? 参考 ! ? 「ちっちゃいCo?eeScriptの本」 ? http://mnmly.github.com/library/co?eescript/ 22
- 23. Co?eeScript ?→ ?JavaScript Co?eeScript func = ->! alert "Hello CoffeeScript!"! JavaScript var func; ! func = function() { ! return alert("Hello CoffeeScript!");! };! 23
- 24. Jade ?→ ?HTML Jade HTML !!! 5! <!DOCTYPE html>! html(lang="en")! <html lang="en">! head! <head>! title= pageTitle! <title>Jade</ body! title>! h1 Jade ! </head>! #container! <body>! - if (UsingJade)! <h1>Jade</h1>! p Thanks!! <div - else! id="container">! p Get on it!! <p>Thanks!</p>! ! ! ! ! !! </div>! ! ! ! !! </body>! </html> ! !! 24
- 25. Stylus ?→ ?CSS Stylus border-radius() ! -webkit-border-radius arguments ! -moz-border-radius arguments ! border-radius arguments ! ! a.button ! border-radius 5px! CSS a.button { ! -webkit-border-radius: 5px; ! -moz-border-radius: 5px;! border-radius: 5px; ! } ! ! ! ! !! ! ! ! !! 25
- 26. シンプルなディレクトリ構造 /app! /client … ?ブラウザで実?行行されるコード /server … ?サーバで実?行行されるコード /shared … ?ブラウザ/サーバ双?方から ? ? ? ? ? ? ? ?参照されるコード /css … ?Stylus ?(or ?CSSファイル） /lib … ?外部ライブラリ /public … ?静的なファイル（画像など） 26
- 27. サーバ/ブラウザ間でのRPC ! ?RPC（Remote ?Procedure ?Call） ! ?リモートの関数呼び出し ! ?通信はWebSocket上で?行行われる ! ?例例） ! ?引数として与えられた数を2乗して返す 関数をサーバ側に実装 ! ?サーバ側に実装された関数をブラウザか ら呼び出し 27
- 28. サーバ側実装 /app/server/app.co?ee exports.actions = # ブラウザに公開する関数の登録! square: (number, cb) -> # ２乗する関数の実装! cb(number * number)! ! ! SS.server.app.square ?でブラウザ/サーバ 両?方から関数を呼び出せるようになる ! ? SS ?変数 ! ? ブラウザ/サーバから参照可能なグローバル 変数 ! ? 各種API、ユーザ定義の関数、オブジェクト への参照を提供 28
- 29. ブラウザ側実装 /app/client/app.co?ee SS.server.app.square 20, (response) ->! console.log ”20 squared is #{response}” # callback! ! ! ?SS ?変数を介してサーバ側に実装された 関数を呼び出している 29
- 30. Pub/Subメッセージング ! ?特定のユーザにメッセージをリアルタ イム配信をするために必要な機能 ! WebSocketを使ってメッセージ配信 ! ?例例） ! ?シンプルなチャットアプリを実装 ! ?あるユーザーの発?言を全ユーザーに ブロードキャスト 30
- 31. ブラウザ側実装 /app/client/app.co?ee export.init = -> # サーバとの接続確?立立時に呼び出される! SS.event.on(‘message’, (message) -> alert(message))! ! SS.event.on ?メソッドを介して ? ”message” イベントにイベントハン ドラを登録 31
- 32. サーバ側実装 /app/server/app.co?ee SS.publish.broadcast ’message’, ‘Hello World’! ! SS.publish.broadcast ?メソッドを 呼び出して、message ?イベントを発?行行 ! ?接続している全ブラウザに ?”Hello World”という ?ダイアログが表?示 32
- 33. ?高スケーラビリティ ! ?複数のCPUコアで複数のSocketStream インスタンスを起動可能 redis redisを介したSession情報の共有 メッセージのルーティングが可能 Socket Socket Socket Socket Stream Stream Stream Stream 33
- 34. その他の特徴 ! WebSocket接続切切断時に?自動で再接続 ! ?モバイル環境などで有?用 ! ?ディレクトリ階層を?自動的にネームス ペースに展開 /app/server/modules/module_?a.co?ee ↓ SS.server.modules.module_a.func! 34
- 35. SocketStreamのこれから ! ?現在 ?v0.2.2 ?がリリースされている ! ?v0.3で追加される予定の機能 ! ?モデルのサポート ! ? 現在サポートされていないためCRUD操作が 多いアプリケーションには向かない ! ? Real ?Time ?Models ?という機能が追加予定 ! backbone.jsのサポート ! ? ブラウザサイドのMVCフレームワーク 35
- 36. まとめ ! SocketStream ! ? SPAを開発するためのNode.js?用Webフレーム ワーク ! ? ?高性能なリアルタイムWebアプリケーションを 効率率率的に開発 ! ? 様々な新しい技術を採?用 ! Node.js, ?WebSocket, ?Socket.IO, ?redis, ? Co?eeScript, ?Jade, ?Stylus, ?backbone.js ! ? 勉強していると楽しくなるのでぜひトライして みてください 36
- 37. 参考URL ! SocketStream ! ? https://github.com/socketstream/socketstream ! 奥别产厂辞肠办别迟ことはじめ ! ? http://www.slideshare.net/kadoppe/websocket-‐??8735698 ! Socket.IO ! ? http://socket.io/ ! Co?eeScript ! ? http://jashkenas.github.com/co?ee-‐??script/ ! ? Jade ! ? http://jade-‐??lang.com/ ! ? Stylus ! ? http://learnboost.github.com/stylus/ ! Redis ! ? http://redis.io/ 37
- 38. ご清聴ありがとうございました。 38