Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Sails WorkShop (3)
立命館大学 経営学部3回生 
井口智勝
SailsWorkShop
の目的
<for All>
Watnowにリアルタイム通信技術を導入する
<for One>
取り敢えず、書けるようになること。(スピード重視)
ある程度、体系的な知識化もしていく。
Sails WorkShop
Menu
1回目:Sailsって何?CRUDappを作ろう!
2回目:Policiesの使い方 ∼sessionや認証∼
3回目:appをリアルタイム化しよう!
4回目:Sails✕Marionette
5回目:細...
今日のアウトライン
リアルタイム通信って?
Pub-sub方式って?
appをリアルタイム化しよう!(3)
感想
2014/12/1(Mon)
リアルタイム通信
クライ
アント
サーバー
クライ
アント
クライ
アント
従来の通信
クライ
アント
サーバー
クライ
アント
クライ
アント
リアルタイム通信
Pub - Sub
出版・購読型モデル
メッセージの送信者(出版側)が特定の受信者
(購読側)を想定せずにメッセージを送るよう
プログラムされたものである。
出版側と購読側の結合度が低い
MarionetteでいうCommunicatorな感じ
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb)
- created
-...
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb)
- created
-...
client / publish
io.socket.get(‘/user/subscribe’);
io.socket.post(‘/user/subscribe’);
io.socket.put(‘/user/subscribe’);
io...
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb)
- created
-...
“購読”の種類
classとinstance
Class room 「作成」を購読
-> 自動: config/blueprints/autowatch:true
-> 手動: Model.watch(req.socket)
Instance ...
Instance room
subscribe(req.socket, record, [監視する動き])
デフォルトの[監視する動き]: update, destroy,
message (for custom messages), add:...
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb)
- created
-...
server / publish
message(record, obj, 除外したいsocket)
publishCreate()
publishUpdate()
publishRemove()
publishDestroy()
ただ知らせる...
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb)
- created
-...
client / subscribe
io.socket.on(‘connect’, function(){}
io.socket.on(‘モデル名’, function(message){}
message
- data (送られたデータ)
...
その他Tips
Sails.sockets - 手動でもsocketを扱える
sails.io.js - クライアント側の便利library
ではでは、
appを
リアルタイム化しよう!(3)
環境設定
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(自分)
UserController
L94-L105
L100: publishCreateを購読する(autowatch:
trueしてるので必要ない)
購読するsocket=req.socket 購読する実体=
users
※subscribeは...
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して
ブラウザを2つ立てて確認してみよう!
感想
socketの使い方がv0.10とv0.9
全然違うやん(泣)
ドキュメント読むのが
一番速い(笑)
開発者のgitにsampleアプリが上がっ
ているので参考にしてみてください。
Prochain SlideShare
Chargement dans…5
×

Sails workshop3

1 097 vues

Publié le

This is a slide at in-house sails workshop.

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Sails workshop3

  1. 1. Sails WorkShop (3) 立命館大学 経営学部3回生  井口智勝
  2. 2. SailsWorkShop の目的 <for All> Watnowにリアルタイム通信技術を導入する <for One> 取り敢えず、書けるようになること。(スピード重視) ある程度、体系的な知識化もしていく。
  3. 3. Sails WorkShop Menu 1回目:Sailsって何?CRUDappを作ろう! 2回目:Policiesの使い方 ∼sessionや認証∼ 3回目:appをリアルタイム化しよう! 4回目:Sails✕Marionette 5回目:細かい部分の共有など...
  4. 4. 今日のアウトライン リアルタイム通信って? Pub-sub方式って? appをリアルタイム化しよう!(3) 感想 2014/12/1(Mon)
  5. 5. リアルタイム通信
  6. 6. クライ アント サーバー クライ アント クライ アント 従来の通信
  7. 7. クライ アント サーバー クライ アント クライ アント リアルタイム通信
  8. 8. Pub - Sub
  9. 9. 出版・購読型モデル メッセージの送信者(出版側)が特定の受信者 (購読側)を想定せずにメッセージを送るよう プログラムされたものである。 出版側と購読側の結合度が低い MarionetteでいうCommunicatorな感じ
  10. 10. io.socket.get() io.socekt.on(‘Model’) クライアント サーバー ‘Model’.subscribe() ‘Model’.publishCreate() switch(msg.verb) - created - addTo - message - … Pub-Sub方式 私はこういうものです。 OK!変更があったら通知するね 変更あったよ!変更の種類別で処理を変えようっと
  11. 11. io.socket.get() io.socekt.on(‘Model’) クライアント サーバー ‘Model’.subscribe() ‘Model’.publishCreate() switch(msg.verb) - created - addTo - message - … Pub-Sub方式 私はこういうものです。 OK!変更があったら通知するね 変更あったよ!変更の種類別で処理を変えようっと
  12. 12. client / publish io.socket.get(‘/user/subscribe’); io.socket.post(‘/user/subscribe’); io.socket.put(‘/user/subscribe’); io.socket.delete(‘/user/subscribe’);
  13. 13. io.socket.get() io.socekt.on(‘Model’) クライアント サーバー ‘Model’.subscribe() ‘Model’.publishCreate() switch(msg.verb) - created - addTo - message - … Pub-Sub方式 私はこういうものです。 OK!変更があったら通知するね 変更あったよ!変更の種類別で処理を変えようっと
  14. 14. “購読”の種類 classとinstance Class room 「作成」を購読 -> 自動: config/blueprints/autowatch:true -> 手動: Model.watch(req.socket) Instance room「編集」「削除」を購読 -> Model.subscribe(req.socket, 対象) 実体化される時 すでにある実体 が変更される時
  15. 15. Instance room subscribe(req.socket, record, [監視する動き]) デフォルトの[監視する動き]: update, destroy, message (for custom messages), add:* and remove:* (publishAdd and publishRemove messages for associated models). [監視する動き]のデフォルト値をmodel内の属性 autosubscribeで配列定義できる。なければ全て。 クライアント 監視する対象
  16. 16. io.socket.get() io.socekt.on(‘Model’) クライアント サーバー ‘Model’.subscribe() ‘Model’.publishCreate() switch(msg.verb) - created - addTo - message - … Pub-Sub方式 私はこういうものです。 OK!変更があったら通知するね 変更あったよ!変更の種類別で処理を変えようっと
  17. 17. server / publish message(record, obj, 除外したいsocket) publishCreate() publishUpdate() publishRemove() publishDestroy() ただ知らせるだけ。(ex: createした後に、publishCreateで知らせる) record: 送り先が持ってる値。uidならその人1人に。roomidならその roomidを持ってる(roomにいる)人へ送る。 自分に送りたくないなら、req.socketを第3引数に。
  18. 18. io.socket.get() io.socekt.on(‘Model’) クライアント サーバー ‘Model’.subscribe() ‘Model’.publishCreate() switch(msg.verb) - created - addTo - message - … Pub-Sub方式 私はこういうものです。 OK!変更があったら通知するね 変更あったよ!変更の種類別で処理を変えようっと
  19. 19. client / subscribe io.socket.on(‘connect’, function(){} io.socket.on(‘モデル名’, function(message){} message - data (送られたデータ) - id - verb (created,addedTo,updated,removedFrom,destroyed,message d)
  20. 20. その他Tips Sails.sockets - 手動でもsocketを扱える sails.io.js - クライアント側の便利library
  21. 21. ではでは、
  22. 22. appを リアルタイム化しよう!(3)
  23. 23. 環境設定 underscore.js(クライアント側に、JSTで template内のファイルをjsで扱うのに必要) online.pngとoffline.png
  24. 24. ソース https://github.com/igtm/sails-sample- app1 完成ソース https://github.com/igtm/sails-sample- app1/compare/v0.1...v0.2 前回からの変 更が見れる
  25. 25. View
  26. 26. user/index.ejs L5 L18∼L22 onlineかどうかの画像を表示
  27. 27. templates/ newColumn.ejs 新規作成 誰かが新規登録した際に、一覧画面に行をリア ルタイムで増やすためのテンプレート
  28. 28. task/pipeline.js L50 templateファイルに入ってる .ejsをjsで扱え るようにするという設定
  29. 29. Config
  30. 30. config/policies.js L38
  31. 31. config/blueprints.js L138 autoWatchをtrueにすることで、 publishCreateを実行できるようにしている (代わりにModel.watch()で手動にしてもい いが)
  32. 32. api
  33. 33. policies/ sessionAuth.js デフォルトであるやつ L14: 別に付け足さなくても問題ない。 L17: 403を返す
  34. 34. models/User.js L30∼L33 onlineかそうでないかの属性
  35. 35. 本題。socket部分!
  36. 36. サーバー側
  37. 37. UserController L46∼L51 online: trueにして再度save L51: 送るデータ=user 除外する宛先= req.socket(自分)
  38. 38. UserController L89 消されるmodelのid=req.param(‘id') 除 外する宛先=req.socket(自分)
  39. 39. UserController L94-L105 L100: publishCreateを購読する(autowatch: trueしてるので必要ない) 購読するsocket=req.socket 購読する実体= users ※subscribeはsocket.getとかでrequestされな いとつかえない。$.ajaxとかは無理
  40. 40. SessionController L56-L64 変化したmodelのid=user.id 送りたい data={loggedIn……}
  41. 41. クライアント側
  42. 42. app.js - 全体像 - sails.io.jsがまず自動でコネクトしてくれる。 connectイベント発火で、船の絵が出てくる。 L15: サーバに購読させる L12: userモデルでpublish…がされたら callbackへ
  43. 43. app.js - userInDom - userモデルでpublishCreate等が発火した callback verbで振り分け UserIndexPage: 一覧画面の操作等
  44. 44. Well Done! sails liftして ブラウザを2つ立てて確認してみよう!
  45. 45. 感想
  46. 46. socketの使い方がv0.10とv0.9 全然違うやん(泣)
  47. 47. ドキュメント読むのが 一番速い(笑)
  48. 48. 開発者のgitにsampleアプリが上がっ ているので参考にしてみてください。

×