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 workshop4

1,247 views

Published on

This is an slide at in-house sails workshop.

Published in: Engineering
  • Be the first to comment

Sails workshop4

  1. 1. Sails WorkShop (4) 立命館大学 経営学部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. ※今日は結構 コアにせまります。
  5. 5. 2014/12/1(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うMarionetteアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  6. 6. Sails✕Marionetteで どう変わるか? httpリクエスト Sails サーバーブラウザ htmlとか全て送信 役割重い
  7. 7. Sails✕Marionetteで どう変わるか? Sails サーバーMarionette ブラウザ 非同期通信 JSON { user: ‘iguchi’, age: ’21'} 役割軽い!Json返すだけのサーバー
  8. 8. Sails✕Marionetteで どう変わるか? Sailsサーバーは常にres.jsonでOK! viewフォルダ必要なくなる。 assetsフォルダもいらない。 リクエストされるURLは決まっているので、blueprintsは全 てfalseでよい。(というかセキュリティ上切るべき。仕組み がわかっているなら、利用することでコード量を減らせる。今 回はrestだけ使います。)
  9. 9. 2014/12/15(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うSailsChatアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  10. 10. 今回使う SailsChatアプリの説明 https://github.com/igtm/ SailsChatFront https://github.com/igtm/SailsChatBack 両者をgrunt sailsliftで立ち上げてみる と、、、? オリジナルアプリです!!
  11. 11. 2014/12/15(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うMarionetteアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  12. 12. Sails✕Marionette でappを作ろう! https://github.com/igtm/SailsChatFront https://github.com/igtm/SailsChatBack
  13. 13. 環境設定
  14. 14. front-backの分離に 必要な環境設定 sails.io.jsをmarionetteのvenderに入 れ,init.jsで定義。使うときは、各ファイルで定 義する sails.io.jsのL615を、sailsがある場所に変 更。 config/cors.js allRoutes: true
  15. 15. アプリの大枠説明
  16. 16. ページ遷移 LoginPage TopPage Room1 Room2 Room3
  17. 17. ModelとController Marionette Sails User Chat User Chat (永続化する なら必要) User Controller Chat Controller Room Controller 多 多 Room 多1 Room (roomを作成削 除するようなら 必要)
  18. 18. Controllerの役割 User Controller Chat Controller Room Controller Userの作成、ログイン Chatの送信 Roomの入室、退室管理
  19. 19. Socketによる、データの リアルタイム受け渡し部分
  20. 20. UserModel
  21. 21. UserModel marionette Sails io.socket.get() io.socekt.on(‘user’) User.subscribe() OK!変更があったら通知するね [create,destroy] User.publishCreate() switch(msg.verb) - created - destroyed subscribe 私はこういうものです。 新しいユーザーが ログインしたよ! 了解!通知出します! User.publishDestroy() ユーザーが ログアウトしたよ!
  22. 22. UserModel 左上(フロント側) views/page/LoginItemV.js: L40 modelのsubscribeメソッド(自作)で io.socket.postしてサーバーに購読させる。
  23. 23. UserModel 右上(サーバー側) UserController.jsのsubscribe L17: 他人のpublishCreateを購読するwatch L18: 他人の変更(UserModelの autosubscribeに記載)を購読する。
  24. 24. UserModel 右下(サーバー側) UserController.jsのsubscribe L20: createしたと発行
  25. 25. UserModel 左下(フロント側) modules/socket_manager.js L16: userに変更があったら呼び出し L19: verbごとに処理を分岐
  26. 26. RoomModel
  27. 27. RoomModel クライアントサーバー io.socket.post() io.socekt.on(‘room’) Room.subscribe() Room.publishAdd() switch(msg.verb) - addedTo - removedFrom - messaged enter 私はこういうものです。OK!変更があったら通知するね [add:users, remove:users,message] 新しいユーザーが 入室したよ! 了解!通知出します! Room.message() ユーザーが 投稿したよ!
  28. 28. RoomModel 左上(フロント側) TopItemV.js L43 room/:room_id/users/:idにpost
  29. 29. RoomModel 右上(サーバー側) RoomController.js L10 enter L13: room_idで購読。購読する動作は RoomModelのautosubscribeに記載
  30. 30. RoomModel 右下(サーバー側) addToとremoveFromは後で説明 messageは ChatController: L15
  31. 31. RoomModel 左下(フロント側) modules.socket_manager L17: roomに変更があったら呼び出し L28: verbごとに処理を分岐
  32. 32. 取り敢えずここまで理解し ていればOK!
  33. 33. 細かい説明
  34. 34. ModelのAssociations 難易度:★★★★★★★★★★★★★ 大袈裟(笑)
  35. 35. ModelのAssociations リレーショナル・データベースのジョイントテー ブルのようなものを作る機能
  36. 36. ModelのAssociations 仮想属性を設定 相手が1ならmodel: ‘Model名’ 相手が多ならcollection: ‘Model名’ via: ‘相手の仮想属性名’ 多対多なら片方に優先設定 dominant: true
  37. 37. ModelのAssociations modelを結合してデータを得るには? populate(‘仮想属性’)でmodelを引っ張って きてくれる。
  38. 38. Blueprintsの addとremove 難易度:★★★★★
  39. 39. Blueprintsの add toとremove from post /model/:id/collection名 で指定実体modelのcollectionにidを追加 delete /model/:id/collection名 で指定実体modelのcollectionにidを削除
  40. 40. post /model/:id/collection名/:id 勝手に:idを追加してくれて、 publishAddまでしてくれる
  41. 41. 豆知識
  42. 42. 購読の階層 Subsequent calls to subscribe are cumulative add:users 今回は特に無しcreate remove:users destroy message UserModel ログイン時room入室時 ChatModel Chat投稿時 RoomModel
  43. 43. 共有化できるモジュール
  44. 44. Socekt_manager Socketの変更を受信して、各種命令を出すオ リジナルmodule msg.verbで振り分けて、処理。 Page_managerは現在どのページにいるかな どを取得するオリジナルプラグイン
  45. 45. Finished!! お疲れ様でした!
  46. 46. 2014/12/15(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うMarionetteアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  47. 47. 非同期I/O処理 出典:使いたくなる理由2:非同期I/O処理のnode.jsがサーバーリソースを抑える
  48. 48. 非同期I/O通信 a() b() c() I/O処理に関して上記関数が順番に実行される保証は ない。
  49. 49. 非同期I/O通信 a(b(c())) コールバックとして書くことで順番が担保される。 ⇒コールバック地獄にならないように注意。
  50. 50. URL一覧 https://github.com/igtm/ SailsChatFront https://github.com/igtm/ SailsChatBack https://github.com/balderdashy/ sailsChat

×