SocketStream入門
•
10 likes•2,791 views
2011年9月24日に大阪にて開催された「第2回 HTML5など勉強会（仮）」で発表したときに使ったプレゼン資料です。
Report
Share
SocketStream入門
- 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, CoffeeScript など 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の特徴 ! CoffeeScript, Jade, Stylusをデフォル ト採⽤用 ! シンプルなディレクトリ構造 ! サーバ/ブラウザ間でのRPCを容易易に実装 可能 ! シンプルなPub/Subメッセージング機構 ! ⾼高いスケーラビリティ 20
- 21. 開発に使う⾔言語 ! ロジック ! CoffeeScript (or JavaScript) ! ビュー ! Jade (or HTML) ! Node.js⽤用テンプレートエンジン ! Stylus (or CSS) ! Node.jsでCSSを簡潔に記述するための モジュール 21
- 22. CoffeeScript ! コンパイルするとJavaScriptを⽣生成してくれる便便 利利な⾔言語 ! RubyやPythonの構⽂文の影響を受けている ! 利利点 ! たくさん書かなくて良良い ! JavaScriptのBad Partsを隠してくれる ! 参考 ! 「ちっちゃいCoffeeScriptの本」 http://mnmly.github.com/library/coffeescript/ 22
- 23. CoffeeScript → JavaScript CoffeeScript 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.coffee exports.actions = # ブラウザに公開する関数の登録! square: (number, cb) -> # ２乗する関数の実装! cb(number * number)! ! ! SS.server.app.square でブラウザ/サーバ 両⽅方から関数を呼び出せるようになる ! SS 変数 ! ブラウザ/サーバから参照可能なグローバル 変数 ! 各種API、ユーザ定義の関数、オブジェクト への参照を提供 28
- 29. ブラウザ側実装 /app/client/app.coffee SS.server.app.square 20, (response) ->! console.log ”20 squared is #{response}” # callback! ! ! SS 変数を介してサーバ側に実装された 関数を呼び出している 29
- 30. Pub/Subメッセージング ! 特定のユーザにメッセージをリアルタ イム配信をするために必要な機能 ! WebSocketを使ってメッセージ配信 ! 例例） ! シンプルなチャットアプリを実装 ! あるユーザーの発⾔言を全ユーザーに ブロードキャスト 30
- 31. ブラウザ側実装 /app/client/app.coffee export.init = -> # サーバとの接続確⽴立立時に呼び出される! SS.event.on(‘message’, (message) -> alert(message))! ! SS.event.on メソッドを介して ”message” イベントにイベントハン ドラを登録 31
- 32. サーバ側実装 /app/server/app.coffee 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.coffee ↓ 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, CoffeeScript, Jade, Stylus, backbone.js ! 勉強していると楽しくなるのでぜひトライして みてください 36
- 37. 参考URL ! SocketStream ! https://github.com/socketstream/socketstream ! WebSocketことはじめ ! http://www.slideshare.net/kadoppe/websocket-‐‑‒8735698 ! Socket.IO ! http://socket.io/ ! CoffeeScript ! http://jashkenas.github.com/coffee-‐‑‒script/ ! Jade ! http://jade-‐‑‒lang.com/ ! Stylus ! http://learnboost.github.com/stylus/ ! Redis ! http://redis.io/ 37
- 38. ご清聴ありがとうございました。 38