SocketStream⼊入⾨門 2011/9/24  第2回  HTML5など勉強会(仮)               kadoppe               1
⾃自⼰己紹介!  名前:kadoppe   !  Twitter  twitter.com/kadoppe   !  Blog  www.kadoppe.net!  職業:フリーランスエンジニア   ! iOS,  Web(Rails,  Ca...
今⽇日のアジェンダ! SocketStreamって知ってます?! SocketStreamとは?! SocketStreamの得意分野・不不得意分野!  動作環境、インストール、起動まで! SocketStreamの特徴! SocketStre...
質問4
SocketStream知ってる?1.  知らない2.  名前だけなら3.  サンプルアプリ動かしてみた4.  ドキュメントにひと通り⽬目を通した5.  アプリつくって公開してみた             5
僕はというと1.  知らない2.  名前だけなら  ←  ⼀一昨⽇日まで3.  サンプルアプリ動かしてみた4.  ドキュメントにひと通り⽬目を通した  ←    イマココ5.  アプリつくって公開してみた                 6
SocketStreamとは?!  フルスタックWebアプリフレームワーク   ! Node.jsの上で動作!  ⾼高性能なSPA  (Single-‐‑‒page  application)   を効率率率よく開発すること⽬目的!  様々な技...
SPA(Single-‐‑‒page  application)!  単⼀一のWebページのみで構成される   Webアプリケーション   !  ページ遷移なし!  Webのアプリケーションプラット   フォーム化に伴い増加傾向?       ...
SPAの例例!  Sudoku            http://www.thomasweibel.ch/sudoku/                  9
SPAの⼀一般的なしくみ1.  最初のアクセス時に静的なコードをす    べてサーバから取得  •  HTML,  JavaScript,  CSSなど2.  必要に応じてXHRによりサーバ/ブラ    ウザ間でデータを送受信(双⽅方向通信)3...
XHRによる双⽅方向通信の問題点!  接続確⽴立立時の遅延   !  ブラウザ/サーバ間で通信が発⽣生する      たびに接続を確⽴立立する必要  →  遅延が発⽣生!  HTTPヘッダのオーバーヘッド   !  本当に送りたいデータと⽐比べ...
そこでSocketStream!  サーバ/ブラウザ間のデータのやり取り   にWebSocketを利利⽤用!  サーバ/ブラウザ間で双⽅方向通信を⾏行行う   ためのプロトコル   !  特徴  !   接続を確⽴立立するのは最初だけ  ! ...
SocketStreamの得意分野!  サーバ/ブラウザ間でリアルタイムに   データをやりとりする必要があるWeb   アプリ   !  チャット   !  株取引   !  位置情報モニタリング   !  オンライン格闘ゲームなど     ...
SocketStreamの苦⼿手分野!  各コンテンツにユニークなURLが必要   なWebアプリ   !  ブログなど、コンテンツリッチなサ      イト!  CRUD操作が多数発⽣生するWebアプリ   !  業務系Webアプリなど   ...
対応ブラウザ!  Chrome,  Safari,  Firefox  6   ! WebSocketに対応しているので問題     なく動作!  IE、古いバージョンのFirefox   ! WebSocketに対応していないが     So...
Demo! SocketRacer                 https://github.com/alz/socketracer                   16
動作に必要なもの! Node.js  0.4.x  !  サーバサイドJSの実装の⼀一つ!  NPM  1.0  or  above   ! Node.jsのモジュール管理理ツール! Redis  2.2  or  above  !  KVS(...
インストールからアプリ起動まで!  インストール$ npm install socketstream -g!!  アプリひな形作成$ socketstream new sample_app!!  起動$ cd sample_app!$ sock...
ブラウザからアクセス!   http://localhost:3000                            19
SocketStreamの特徴! CoffeeScript,  Jade,  Stylusをデフォル  ト採⽤用!  シンプルなディレクトリ構造!  サーバ/ブラウザ間でのRPCを容易易に実装   可能!  シンプルなPub/Subメッセージング...
開発に使う⾔言語!  ロジック   ! CoffeeScript  (or  JavaScript)!  ビュー   !  Jade  (or  HTML)   ! Node.js⽤用テンプレートエンジン !  Stylus  (or  CSS)...
CoffeeScript!   コンパイルするとJavaScriptを⽣生成してくれる便便    利利な⾔言語!   RubyやPythonの構⽂文の影響を受けている!   利利点    !   たくさん書かなくて良良い    !   JavaS...
CoffeeScript  →  JavaScriptCoffeeScriptfunc = ->!  alert "Hello CoffeeScript!"!JavaScriptvar func; !func = function() { !  r...
Jade  →  HTMLJade                            HTML!!! 5!                          <!DOCTYPE html>!html(lang="en")!         ...
Stylus  →  CSSStylusborder-radius() !  -webkit-border-radius arguments !  -moz-border-radius arguments !  border-radius ar...
シンプルなディレクトリ構造/app!   /client …  ブラウザで実⾏行行されるコード   /server …  サーバで実⾏行行されるコード   /shared …  ブラウザ/サーバ双⽅方から                  参照...
サーバ/ブラウザ間でのRPC!  RPC(Remote  Procedure  Call)   !  リモートの関数呼び出し   !  通信はWebSocket上で⾏行行われる!  例例)   !  引数として与えられた数を2乗して返す    ...
サーバ側実装/app/server/app.coffeeexports.actions =            # ブラウザに公開する関数の登録!  square: (number, cb) ->    # 2乗する関数の実装!    cb(n...
ブラウザ側実装/app/client/app.coffeeSS.server.app.square 20, (response) ->!    console.log ”20 squared is #{response}” # callback!...
Pub/Subメッセージング!  特定のユーザにメッセージをリアルタ   イム配信をするために必要な機能   ! WebSocketを使ってメッセージ配信!  例例)   !  シンプルなチャットアプリを実装   !  あるユーザーの発⾔言を全...
ブラウザ側実装/app/client/app.coffeeexport.init = -> # サーバとの接続確⽴立立時に呼び出される!  SS.event.on(‘message’, (message) -> alert(message))!!...
サーバ側実装/app/server/app.coffeeSS.publish.broadcast ’message’, ‘Hello World’!! SS.publish.broadcast  メソッドを  呼び出して、message  イベン...
⾼高スケーラビリティ!  複数のCPUコアで複数のSocketStream   インスタンスを起動可能                    redis     redisを介したSession情報の共有     メッセージのルーティングが可能...
その他の特徴! WebSocket接続切切断時に⾃自動で再接続  !  モバイル環境などで有⽤用!  ディレクトリ階層を⾃自動的にネームス   ペースに展開 /app/server/modules/module_̲a.coffee        ...
SocketStreamのこれから!  現在  v0.2.2  がリリースされている!  v0.3で追加される予定の機能   !  モデルのサポート  !   現在サポートされていないためCRUD操作が      多いアプリケーションには向かな...
まとめ! SocketStream  !   SPAを開発するためのNode.js⽤用Webフレーム      ワーク  !   ⾼高性能なリアルタイムWebアプリケーションを      効率率率的に開発!   様々な新しい技術を採⽤用    ...
参考URL!   SocketStream    !   https://github.com/socketstream/socketstream!   WebSocketことはじめ    !   http://www.slideshare.n...
ご清聴ありがとうございました。      38
Upcoming SlideShare
Loading in …5
×

SocketStream入門

6,339 views

Published on

2011年9月24日に大阪にて開催された「第2回 HTML5など勉強会(仮)」で発表したときに使ったプレゼン資料です。

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,339
On SlideShare
0
From Embeds
0
Number of Embeds
1,098
Actions
Shares
0
Downloads
40
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

SocketStream入門

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

×