sails workshop3
Post on 14-Jul-2015
340 Views
Preview:
TRANSCRIPT
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！変更があったら通知するね
変更あったよ！変更の種類別で処理を変えようっと
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()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK！変更があったら通知するね
変更あったよ！変更の種類別で処理を変えようっと
“購読”の種類 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()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK！変更があったら通知するね
変更あったよ！変更の種類別で処理を変えようっと
server / publishmessage(record, obj, 除外したいsocket)
publishCreate()
publishUpdate()
publishRemove()
publishDestroy()
ただ知らせるだけ。(ex: createした後に、publishCreateで知らせる)
record: 送り先が持ってる値。uidならその人１人に。roomidならその
roomidを持ってる(roomにいる)人へ送る。
自分に送りたくないなら、req.socketを第３引数に。
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK！変更があったら通知するね
変更あったよ！変更の種類別で処理を変えようっと
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 前回からの変更が見れる
View
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()で手動にしてもいいが）
api
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 全然違うやん（泣）
開発者のgitにsampleアプリが上がっているので参考にしてみてください。
top related