Upload
tomokatsu-iguchi
View
406
Download
2
Embed Size (px)
Citation preview
Sails WorkShop (4)
立命館大学 経営学部3回生 井口智勝
SailsWorkShop の目的
<for All>
Watnowにリアルタイム通信技術を導入する
<for One>
取り敢えず、書けるようになること。(スピード重視)
ある程度、体系的な知識化もしていく。
Sails WorkShop Menu
1回目:Sailsって何?CRUDappを作ろう!
2回目:Policiesの使い方 ~sessionや認証~
3回目:appをリアルタイム化しよう!
4回目:Sails✕Marionette
5回目:細かい部分の共有など...
※今日は結構 コアにせまります。
今日のアウトライン
Sails✕Marionetteでどう変わるか?
今回使うMarionetteアプリの説明
Sails✕Marionetteアプリを作ろう!
4回の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アプリを作ろう!
4回のWorkShopで触れなかった重要部分
2014/12/15(Mon)
今回使う SailsChatアプリの説明https://github.com/igtm/SailsChatFront
https://github.com/igtm/SailsChatBack
両者をgrunt sailsliftで立ち上げてみると、、、?
オリジナルアプリです!!
今日のアウトライン
Sails✕Marionetteでどう変わるか?
今回使うMarionetteアプリの説明
Sails✕Marionetteアプリを作ろう!
4回の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
1多
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
仮想属性を設定
相手が1なら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アプリを作ろう!
4回の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