Sails workshop3

Sails WorkShop (3)

立命館大学経営学部３回生　井口智勝

SailsWorkShop の目的

＜for All＞

Watnowにリアルタイム通信技術を導入する

＜for One＞

取り敢えず、書けるようになること。(スピード重視)

ある程度、体系的な知識化もしていく。

Sails WorkShop Menu

１回目：Sailsって何？CRUDappを作ろう！

２回目：Policiesの使い方～sessionや認証～

３回目：appをリアルタイム化しよう！

４回目：Sails✕Marionette

５回目：細かい部分の共有など．．．

今日のアウトライン

リアルタイム通信って？

Pub-sub方式って？

appをリアルタイム化しよう！（３）

感想

2014/12/1(Mon)

リアルタイム通信

クライアントサーバー

クライアント

クライアント

従来の通信


クライアント

クライアント

リアルタイム通信

Pub - Sub

出版・購読型モデル

メッセージの送信者（出版側）が特定の受信者（購読側）を想定せずにメッセージを送るようプログラムされたものである。

出版側と購読側の結合度が低い

MarionetteでいうCommunicatorな感じ

io.socket.get()

io.socekt.on(‘Model’)


‘Model’.subscribe()

‘Model’.publishCreate()

switch(msg.verb) - created - addTo - message - …

Pub-Sub方式

私はこういうものです。 OK！変更があったら通知するね

変更あったよ！変更の種類別で処理を変えようっと

client / publish

io.socket.get(‘/user/subscribe’);

io.socket.post(‘/user/subscribe’);

io.socket.put(‘/user/subscribe’);

io.socket.delete(‘/user/subscribe’);

io.socket.get()






Pub-Sub方式



“購読”の種類 classとinstance

Class room 「作成」を購読

-> 自動: config/blueprints/autowatch:true

-> 手動: Model.watch(req.socket)

Instance room「編集」「削除」を購読

-> Model.subscribe(req.socket, 対象)

実体化される時

すでにある実体

が変更される時

Instance roomsubscribe(req.socket, record, [監視する動き])

デフォルトの[監視する動き]: update, destroy,

message (for custom messages), add:* and remove:* (publishAdd and publishRemove messages for associated models).

[監視する動き]のデフォルト値をmodel内の属性

autosubscribeで配列定義できる。なければ全て。

クライアント監視する対象

io.socket.get()






Pub-Sub方式



server / publishmessage(record, obj, 除外したいsocket)

publishCreate()

publishUpdate()

publishRemove()

publishDestroy()

ただ知らせるだけ。(ex: createした後に、publishCreateで知らせる)

record: 送り先が持ってる値。uidならその人１人に。roomidならその

roomidを持ってる(roomにいる)人へ送る。

自分に送りたくないなら、req.socketを第３引数に。

io.socket.get()






Pub-Sub方式



client / subscribeio.socket.on(‘connect’, function(){}

io.socket.on(‘モデル名’, function(message){}

message

- data (送られたデータ)

- id

- verb (created,addedTo,updated,removedFrom,destroyed,messaged)

その他Tips

Sails.sockets - 手動でもsocketを扱える

sails.io.js - クライアント側の便利library

ではでは、

appをリアルタイム化しよう！（３）

環境設定

underscore.js(クライアント側に、JSTで

template内のファイルをjsで扱うのに必要)

online.pngとoffline.png

ソース

https://github.com/igtm/sails-sample-app1　完成ソース

https://github.com/igtm/sails-sample-app1/compare/v0.1...v0.2　前回からの変更が見れる

https://github.com/igtm/sails-sample-app1

https://github.com/igtm/sails-sample-app1/compare/v0.1...v0.2

user/index.ejs

L5

L18～L22

onlineかどうかの画像を表示

templates/newColumn.ejs

新規作成

誰かが新規登録した際に、一覧画面に行をリアルタイムで増やすためのテンプレート

task/pipeline.js

L50

templateファイルに入ってる .ejsをjsで扱えるようにするという設定

Config

config/policies.js

L38

config/blueprints.js

L138

autoWatchをtrueにすることで、

publishCreateを実行できるようにしている

（代わりにModel.watch()で手動にしてもいいが）

policies/sessionAuth.js

デフォルトであるやつ

L14: 別に付け足さなくても問題ない。

L17: 403を返す

models/User.js

L30～L33

onlineかそうでないかの属性

本題。socket部分！

サーバー側

UserController

L46～L51

online: trueにして再度save

L51: 送るデータ＝user　除外する宛先＝

req.socket(自分)

UserController

L89

消されるmodelのid=req.param(‘id')　除

外する宛先＝req.socket(自分)

UserControllerL94-L105

L100: publishCreateを購読する（autowatch:

trueしてるので必要ない）

購読するsocket=req.socket 購読する実体=

users

※subscribeはsocket.getとかでrequestされな

いとつかえない。$.ajaxとかは無理

SessionController

L56-L64

変化したmodelのid=user.id 送りたい

data={loggedIn……}

クライアント側

app.js - 全体像 -sails.io.jsがまず自動でコネクトしてくれる。

connectイベント発火で、船の絵が出てくる。

L15: サーバに購読させる

L12: userモデルでpublish…がされたら

callbackへ

app.js - userInDom -

userモデルでpublishCreate等が発火した

callback

verbで振り分け

UserIndexPage: 一覧画面の操作等

Well Done!

sails liftしてブラウザを２つ立てて確認してみよう！

感想

socketの使い方がv0.10とv0.9 全然違うやん（泣）

ドキュメント読むのが一番速い（笑）

http://sailsjs.org/#/documentation/reference/websockets

開発者のgitにsampleアプリが上がっているので参考にしてみてください。

Sails workshop3

Engineering

Transcript of Sails workshop3