SocketStream入門

SocketStream⼊入⾨門
2011/9/24 第2回 HTML5など勉強会（仮）
kadoppe

1

⾃自⼰己紹介

!  名前：kadoppe
!  Twitter twitter.com/kadoppe
!  Blog www.kadoppe.net
!  職業：フリーランスエンジニア
! iOS, Web（Rails, CakePHP, Node.js）
!  HTML5-‐‑‒West.jp コアメンバー
! about.me/kadoppe

2

今⽇日のアジェンダ

! SocketStreamって知ってます？
! SocketStreamとは？
! SocketStreamの得意分野・不不得意分野
!  動作環境、インストール、起動まで
! SocketStreamの特徴
! SocketStreamのこれから

3

SocketStream知ってる？

1.  知らない
2.  名前だけなら
3.  サンプルアプリ動かしてみた
4.  ドキュメントにひと通り⽬目を通した
5.  アプリつくって公開してみた

5

僕はというと

1.  知らない
2.  名前だけなら ← ⼀一昨⽇日まで
3.  サンプルアプリ動かしてみた
4.  ドキュメントにひと通り⽬目を通した ←
イマココ

5.  アプリつくって公開してみた

6

SocketStreamとは？

!  フルスタックWebアプリフレームワーク
! Node.jsの上で動作
!  ⾼高性能なSPA (Single-‐‑‒page application)
を効率率率よく開発すること⽬目的
!  様々な技術の上になりたっている
! WebSocket, Socket.IO, Redis,
CoﬀeeScript など

7

SPA（Single-‐‑‒page application）

!  単⼀一のWebページのみで構成される
Webアプリケーション
!  ページ遷移なし
!  Webのアプリケーションプラット
フォーム化に伴い増加傾向？

8

SPAの例例
!  Sudoku

http://www.thomasweibel.ch/sudoku/

9

SPAの⼀一般的なしくみ

1.  最初のアクセス時に静的なコードをす
べてサーバから取得
•  HTML, JavaScript, CSSなど
2.  必要に応じてXHRによりサーバ/ブラ
ウザ間でデータを送受信(双⽅方向通信)
3.  ページを部分的に更更新

10

XHRによる双⽅方向通信の問題点

!  接続確⽴立立時の遅延
!  ブラウザ/サーバ間で通信が発⽣生する
たびに接続を確⽴立立する必要
→ 遅延が発⽣生
!  HTTPヘッダのオーバーヘッド
!  本当に送りたいデータと⽐比べてヘッ
ダサイズが⼤大きい
→ 通信効率率率が悪い

11

そこでSocketStream
!  サーバ/ブラウザ間のデータのやり取り
にWebSocketを利利⽤用
!  サーバ/ブラウザ間で双⽅方向通信を⾏行行う
ためのプロトコル
!  特徴
!   接続を確⽴立立するのは最初だけ
!   HTTPと⽐比べて軽量量なヘッダ
より⾼高性能、リアルタイムな
Webアプリを実装可能
12

SocketStreamの得意分野

!  サーバ/ブラウザ間でリアルタイムに
データをやりとりする必要があるWeb
アプリ
!  チャット
!  株取引
!  位置情報モニタリング
!  オンライン格闘ゲームなど

13

SocketStreamの苦⼿手分野

!  各コンテンツにユニークなURLが必要
なWebアプリ
!  ブログなど、コンテンツリッチなサ
イト
!  CRUD操作が多数発⽣生するWebアプリ
!  業務系Webアプリなど

14

対応ブラウザ

!  Chrome, Safari, Firefox 6
! WebSocketに対応しているので問題
なく動作
!  IE、古いバージョンのFirefox
! WebSocketに対応していないが
Socket.IOにより問題なく動作

15

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（Key-‐‑‒value store）のひとつ

17

インストールからアプリ起動まで

!  インストール
$ npm install socketstream -g!

!  アプリひな形作成
$ socketstream new sample_app!

!  起動
$ cd sample_app!
$ socketstream start!

18

ブラウザからアクセス
!   http://localhost:3000

19

SocketStreamの特徴

! CoﬀeeScript, Jade, Stylusをデフォル
ト採⽤用
!  シンプルなディレクトリ構造
!  サーバ/ブラウザ間でのRPCを容易易に実装
可能
!  シンプルなPub/Subメッセージング機構
!  ⾼高いスケーラビリティ

20

開発に使う⾔言語

!  ロジック
! CoﬀeeScript (or JavaScript)
!  ビュー
!  Jade (or HTML)
! Node.js⽤用テンプレートエンジン
!  Stylus (or CSS)
! Node.jsでCSSを簡潔に記述するための
モジュール

21

CoffeeScript
!   コンパイルするとJavaScriptを⽣生成してくれる便便
利利な⾔言語
!   RubyやPythonの構⽂文の影響を受けている
!   利利点
!   たくさん書かなくて良良い
!   JavaScriptのBad Partsを隠してくれる
!   参考
!   「ちっちゃいCoffeeScriptの本」
http://mnmly.github.com/library/coffeescript/

22

CoﬀeeScript → JavaScript

CoﬀeeScript
func = ->!
alert "Hello CoffeeScript!"!

JavaScript
var func; !
func = function() { !
return alert("Hello CoffeeScript!");!
};!

23

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

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

シンプルなディレクトリ構造
/app!
/client … ブラウザで実⾏行行されるコード
/server … サーバで実⾏行行されるコード
/shared … ブラウザ/サーバ双⽅方から
　　　　　　参照されるコード
/css … Stylus (or CSSファイル）
/lib … 外部ライブラリ
/public … 静的なファイル（画像など）

26

サーバ/ブラウザ間でのRPC

!  RPC（Remote Procedure Call）
!  リモートの関数呼び出し
!  通信はWebSocket上で⾏行行われる
!  例例）
!  引数として与えられた数を2乗して返す
関数をサーバ側に実装
!  サーバ側に実装された関数をブラウザか
ら呼び出し

27

サーバ側実装
/app/server/app.coﬀee
exports.actions = # ブラウザに公開する関数の登録!
square: (number, cb) -> # ２乗する関数の実装!
cb(number * number)!
!
! SS.server.app.square でブラウザ/サーバ
両⽅方から関数を呼び出せるようになる
!   SS 変数
!   ブラウザ/サーバから参照可能なグローバル
変数
!   各種API、ユーザ定義の関数、オブジェクト
への参照を提供

28

ブラウザ側実装

/app/client/app.coﬀee
SS.server.app.square 20, (response) ->!
console.log ”20 squared is #{response}” # callback!
!

!  SS 変数を介してサーバ側に実装された
関数を呼び出している

29

Pub/Subメッセージング

!  特定のユーザにメッセージをリアルタ
イム配信をするために必要な機能
! WebSocketを使ってメッセージ配信
!  例例）
!  シンプルなチャットアプリを実装
!  あるユーザーの発⾔言を全ユーザーに
ブロードキャスト

30

ブラウザ側実装
/app/client/app.coﬀee
export.init = -> # サーバとの接続確⽴立立時に呼び出される!
SS.event.on(‘message’, (message) -> alert(message))!

! SS.event.on メソッドを介して
”message” イベントにイベントハン
ドラを登録

31

サーバ側実装

/app/server/app.coﬀee
SS.publish.broadcast ’message’, ‘Hello World’!

! SS.publish.broadcast メソッドを
呼び出して、message イベントを発⾏行行
!  接続している全ブラウザに ”Hello
World”というダイアログが表⽰示

32

⾼高スケーラビリティ

!  複数のCPUコアで複数のSocketStream
インスタンスを起動可能
redis

redisを介したSession情報の共有
メッセージのルーティングが可能
Socket Socket Socket Socket
Stream Stream Stream Stream

33

その他の特徴

! WebSocket接続切切断時に⾃自動で再接続
!  モバイル環境などで有⽤用
!  ディレクトリ階層を⾃自動的にネームス
ペースに展開
/app/server/modules/module_̲a.coﬀee
↓
SS.server.modules.module_a.func!

34

SocketStreamのこれから

!  現在 v0.2.2 がリリースされている
!  v0.3で追加される予定の機能
!  モデルのサポート
!   現在サポートされていないためCRUD操作が
多いアプリケーションには向かない
!   Real Time Models という機能が追加予定
! backbone.jsのサポート
!   ブラウザサイドのMVCフレームワーク

35

まとめ
! SocketStream
!   SPAを開発するためのNode.js⽤用Webフレーム
ワーク
!   ⾼高性能なリアルタイムWebアプリケーションを
効率率率的に開発
!   様々な新しい技術を採⽤用
! Node.js, WebSocket, Socket.IO, redis,
CoﬀeeScript, Jade, Stylus, backbone.js
!   勉強していると楽しくなるのでぜひトライして
みてください

36

参考URL
! SocketStream
!   https://github.com/socketstream/socketstream

! WebSocketことはじめ
!   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

SocketStream入門

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à SocketStream入門

Similaire à SocketStream入門 (20)

Plus de Kohei Kadowaki

Plus de Kohei Kadowaki (14)

Dernier

Dernier (10)

SocketStream入門