Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sails workshop3

1,091 views

Published on

This is a slide at in-house sails workshop.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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アプリが上がっ ているので参考にしてみてください。

×