Sails workshop4

Sails WorkShop (4)

立命館大学 経営学部３回生　 井口智勝

SailsWorkShop の目的

＜for All＞

Watnowにリアルタイム通信技術を導入する

＜for One＞

取り敢えず、書けるようになること。(スピード重視)

ある程度、体系的な知識化もしていく。

Sails WorkShop Menu

１回目：Sailsって何？CRUDappを作ろう！

２回目：Policiesの使い方 ～sessionや認証～

３回目：appをリアルタイム化しよう！

４回目：Sails✕Marionette

５回目：細かい部分の共有など．．．

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

今日のアウトライン

Sails✕Marionetteでどう変わるか？

今回使うMarionetteアプリの説明

Sails✕Marionetteアプリを作ろう！

４回のWorkShopで触れなかった重要部分

2014/12/1(Mon)

Sails✕Marionetteで どう変わるか？

Sails サーバー ブラウザ

httpリクエスト

htmlとか全て送信

役割重い

Sails✕Marionetteで どう変わるか？

Sails サーバー Marionette

ブラウザ

非同期通信

JSON

役割軽い！Json返すだけのサーバー

{ user: ‘iguchi’, age: ’21'}

Sailsサーバーは常にres.jsonでOK！

viewフォルダ必要なくなる。

assetsフォルダもいらない。

リクエストされるURLは決まっているので、blueprintsは全

てfalseでよい。（というかセキュリティ上切るべき。仕組みがわかっているなら、利用することでコード量を減らせる。今回はrestだけ使います。）

Sails✕Marionetteで どう変わるか？

今日のアウトライン

Sails✕Marionetteでどう変わるか？

今回使うSailsChatアプリの説明

Sails✕Marionetteアプリを作ろう！

４回のWorkShopで触れなかった重要部分

2014/12/15(Mon)

今回使う SailsChatアプリの説明https://github.com/igtm/SailsChatFront

https://github.com/igtm/SailsChatBack

両者をgrunt sailsliftで立ち上げてみると、、、？

オリジナルアプリです！！

今日のアウトライン

Sails✕Marionetteでどう変わるか？

今回使うMarionetteアプリの説明

Sails✕Marionetteアプリを作ろう！

４回のWorkShopで触れなかった重要部分

2014/12/15(Mon)

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

User

Marionette Sails

Chat

User

Chat (永続化するなら必要)

User Controller

Chat Controller

Room Controller

多

多

Room

１多

Room (roomを作成削除するようなら

必要)

Controllerの役割

User Controller

Chat Controller

Room Controller

Userの作成、ログイン

Chatの送信

Roomの入室、退室管理

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

UserModel

io.socket.get()

io.socekt.on(‘user’)

marionette Sails

User.subscribe()

User.publishCreate()

switch(msg.verb) - created - destroyed

subscribe

UserModel

私はこういうものです。

新しいユーザーが ログインしたよ！

了解！通知出します！

User.publishDestroy()

ユーザーが ログアウトしたよ！

OK！変更があったら通知するね [create,destroy]

左上(フロント側)

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ごとに処理を分岐

UserModel

RoomModel

io.socket.post()

io.socekt.on(‘room’)

クライアント サーバー

Room.subscribe()

Room.publishAdd()

switch(msg.verb) - addedTo - removedFrom - messaged

enter

RoomModel

私はこういうものです。 OK！変更があったら通知するね [add:users, remove:users,message]

新しいユーザーが 入室したよ！

了解！通知出します！

Room.message()

ユーザーが 投稿したよ！

左上(フロント側)

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ごとに処理を分岐

RoomModel

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

細かい説明

ModelのAssociations

難易度：★★★★★★★★★★★★★

大袈裟（笑）

ModelのAssociations

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

ModelのAssociations

仮想属性を設定

相手が１ならmodel: ‘Model名’

相手が多ならcollection: ‘Model名’ via: ‘相手の仮想属性名’

多対多なら片方に優先設定 dominant: true

modelを結合してデータを得るには？

populate(‘仮想属性’)でmodelを引っ張ってきてくれる。

ModelのAssociations

Blueprintsの addとremove

難易度：★★★★★

Blueprintsの add toとremove frompost /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

今回は特に無しcreate destroy

add:users remove:users

message

UserModel

ログイン時 room入室時

ChatModel

Chat投稿時

RoomModel

共有化できるモジュール

Socekt_manager

Socketの変更を受信して、各種命令を出すオ

リジナルmodule

msg.verbで振り分けて、処理。

Page_managerは現在どのページにいるかなどを取得するオリジナルプラグイン

Finished!!

お疲れ様でした！

今日のアウトライン

Sails✕Marionetteでどう変わるか？

今回使うMarionetteアプリの説明

Sails✕Marionetteアプリを作ろう！

４回のWorkShopで触れなかった重要部分

2014/12/15(Mon)

非同期I/O処理

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

非同期I/O通信a()

b()

c()

I/O処理に関して上記関数が順番に実行される保証はない。

非同期I/O通信

a(b(c()))

コールバックとして書くことで順番が担保される。

⇒コールバック地獄にならないように注意。

URL一覧

https://github.com/igtm/SailsChatFront

https://github.com/igtm/SailsChatBack

https://github.com/balderdashy/sailsChat