Sails workshop4

Sails WorkShop (4)
立命館大学経営学部３回生　
井口智勝

SailsWorkShop
の目的
＜for All＞
Watnowにリアルタイム通信技術を導入する
＜for One＞
取り敢えず、書けるようになること。(スピード重視)
ある程度、体系的な知識化もしていく。

Sails WorkShop
Menu
１回目：Sailsって何？CRUDappを作ろう！
２回目：Policiesの使い方～sessionや認証～
３回目：appをリアルタイム化しよう！
４回目：Sails✕Marionette
５回目：細かい部分の共有など．．．

※今日は結構
コアにせまります。

2014/12/1(Mon)
今日のアウトライン
Sails✕Marionetteでどう変わるか？
今回使うMarionetteアプリの説明
Sails✕Marionetteアプリを作ろう！
４回のWorkShopで触れなかった重要部分

Sails✕Marionetteで
どう変わるか？
httpリクエスト
Sails
サーバーブラウザ
htmlとか全て送信
役割重い

Sails
サーバーMarionette
ブラウザ
非同期通信
JSON
{ user: ‘iguchi’, age: ’21'}
役割軽い！Json返すだけのサーバー

Sailsサーバーは常にres.jsonでOK！
viewフォルダ必要なくなる。
assetsフォルダもいらない。
リクエストされるURLは決まっているので、blueprintsは全
てfalseでよい。（というかセキュリティ上切るべき。仕組み
がわかっているなら、利用することでコード量を減らせる。今
回はrestだけ使います。）

2014/12/15(Mon)
今回使うSailsChatアプリの説明

今回使う
SailsChatアプリの説明
https://github.com/igtm/
SailsChatFront
https://github.com/igtm/SailsChatBack
両者をgrunt sailsliftで立ち上げてみる
と、、、？
オリジナルアプリです！！

2014/12/15(Mon)
今回使うMarionetteアプリの説明

Sails✕Marionette
でappを作ろう！
https://github.com/igtm/SailsChatFront
https://github.com/igtm/SailsChatBack

front-backの分離に
必要な環境設定
sails.io.jsをmarionetteのvenderに入
れ,init.jsで定義。使うときは、各ファイルで定
義する
sails.io.jsのL615を、sailsがある場所に変
更。
config/cors.js allRoutes: true

ページ遷移
LoginPage TopPage
Room1
Room2
Room3

ModelとController
Marionette Sails
User
Chat
User
Chat
(永続化する
なら必要)
User
Controller
Chat
Controller
Room
Controller
多
多
Room
多１
Room
(roomを作成削
除するようなら
必要)

Controllerの役割
User
Controller
Chat
Controller
Room
Controller
Userの作成、ログイン
Chatの送信
Roomの入室、退室管理

Socketによる、データの
リアルタイム受け渡し部分

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()
ユーザーが
ログアウトしたよ！

UserModel
左上(フロント側)
views/page/LoginItemV.js: L40
modelのsubscribeメソッド(自作)で
io.socket.postしてサーバーに購読させる。

UserModel
右上(サーバー側)
UserController.jsのsubscribe
L17: 他人のpublishCreateを購読するwatch
L18: 他人の変更(UserModelの
autosubscribeに記載)を購読する。

UserModel
右下(サーバー側)
UserController.jsのsubscribe
L20: createしたと発行

UserModel
左下(フロント側)
modules/socket_manager.js
L16: userに変更があったら呼び出し
L19: verbごとに処理を分岐

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()
ユーザーが
投稿したよ！

RoomModel
左上(フロント側)
TopItemV.js L43
room/:room_id/users/:idにpost

RoomModel
右上(サーバー側)
RoomController.js L10 enter
L13: room_idで購読。購読する動作は
RoomModelのautosubscribeに記載

RoomModel
右下(サーバー側)
addToとremoveFromは後で説明
messageは ChatController: L15

RoomModel
左下(フロント側)
modules.socket_manager
L17: roomに変更があったら呼び出し
L28: verbごとに処理を分岐

取り敢えずここまで理解し
ていればOK！

ModelのAssociations
難易度：★★★★★★★★★★★★★
大袈裟（笑）

リレーショナル・データベースのジョイントテー
ブルのようなものを作る機能

仮想属性を設定
相手が１ならmodel: ‘Model名’
相手が多ならcollection: ‘Model名’
via: ‘相手の仮想属性名’
多対多なら片方に優先設定 dominant: true

modelを結合してデータを得るには？
populate(‘仮想属性’)でmodelを引っ張って
きてくれる。

Blueprintsの
addとremove
難易度：★★★★★

Blueprintsの
add toとremove from
post /model/:id/collection名
で指定実体modelのcollectionにidを追加
delete /model/:id/collection名
で指定実体modelのcollectionにidを削除

post /model/:id/collection名/:id
勝手に:idを追加してくれて、
publishAddまでしてくれる

購読の階層
Subsequent calls to
subscribe are
cumulative
add:users
今回は特に無しcreate
remove:users
destroy
message
UserModel
ログイン時room入室時
ChatModel
Chat投稿時
RoomModel

共有化できるモジュール

Socekt_manager
Socketの変更を受信して、各種命令を出すオ
リジナルmodule
msg.verbで振り分けて、処理。
Page_managerは現在どのページにいるかな
どを取得するオリジナルプラグイン

Finished!!
お疲れ様でした！

非同期I/O処理
出典：使いたくなる理由2：非同期I/O処理のnode.jsがサーバーリソースを抑える

非同期I/O通信
a()
b()
c()
I/O処理に関して上記関数が順番に実行される保証は
ない。

非同期I/O通信
a(b(c()))
コールバックとして書くことで順番が担保される。
⇒コールバック地獄にならないように注意。

URL一覧
SailsChatFront
SailsChatBack
https://github.com/balderdashy/
sailsChat

Sails workshop4

Recommended

Recommended

More Related Content

Similar to Sails workshop4

Similar to Sails workshop4 (20)

Sails workshop4