Sails workshop3
-
Upload
tomokatsu-iguchi -
Category
Engineering
-
view
338 -
download
2
Transcript of Sails workshop3
![Page 1: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/1.jpg)
Sails WorkShop (3)
立命館大学 経営学部3回生 井口智勝
![Page 2: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/2.jpg)
SailsWorkShop の目的
<for All>
Watnowにリアルタイム通信技術を導入する
<for One>
取り敢えず、書けるようになること。(スピード重視)
ある程度、体系的な知識化もしていく。
![Page 3: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/3.jpg)
Sails WorkShop Menu
1回目:Sailsって何?CRUDappを作ろう!
2回目:Policiesの使い方 ~sessionや認証~
3回目:appをリアルタイム化しよう!
4回目:Sails✕Marionette
5回目:細かい部分の共有など...
![Page 4: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/4.jpg)
今日のアウトライン
リアルタイム通信って?
Pub-sub方式って?
appをリアルタイム化しよう!(3)
感想
2014/12/1(Mon)
![Page 5: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/5.jpg)
リアルタイム通信
![Page 6: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/6.jpg)
クライアント サーバー
クライアント
クライアント
従来の通信
![Page 7: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/7.jpg)
クライアント サーバー
クライアント
クライアント
リアルタイム通信
![Page 8: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/8.jpg)
Pub - Sub
![Page 9: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/9.jpg)
出版・購読型モデル
メッセージの送信者(出版側)が特定の受信者(購読側)を想定せずにメッセージを送るようプログラムされたものである。
出版側と購読側の結合度が低い
MarionetteでいうCommunicatorな感じ
![Page 10: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/10.jpg)
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK!変更があったら通知するね
変更あったよ!変更の種類別で処理を変えようっと
![Page 11: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/11.jpg)
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK!変更があったら通知するね
変更あったよ!変更の種類別で処理を変えようっと
![Page 12: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/12.jpg)
client / publish
io.socket.get(‘/user/subscribe’);
io.socket.post(‘/user/subscribe’);
io.socket.put(‘/user/subscribe’);
io.socket.delete(‘/user/subscribe’);
![Page 13: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/13.jpg)
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK!変更があったら通知するね
変更あったよ!変更の種類別で処理を変えようっと
![Page 14: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/14.jpg)
“購読”の種類 classとinstance
Class room 「作成」を購読
-> 自動: config/blueprints/autowatch:true
-> 手動: Model.watch(req.socket)
Instance room「編集」「削除」を購読
-> Model.subscribe(req.socket, 対象)
実体化される時
すでにある実体
が変更される時
![Page 15: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/15.jpg)
Instance roomsubscribe(req.socket, record, [監視する動き])
デフォルトの[監視する動き]: update, destroy,
message (for custom messages), add:* and remove:* (publishAdd and publishRemove messages for associated models).
[監視する動き]のデフォルト値をmodel内の属性
autosubscribeで配列定義できる。なければ全て。
クライアント 監視する対象
![Page 16: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/16.jpg)
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK!変更があったら通知するね
変更あったよ!変更の種類別で処理を変えようっと
![Page 17: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/17.jpg)
server / publishmessage(record, obj, 除外したいsocket)
publishCreate()
publishUpdate()
publishRemove()
publishDestroy()
ただ知らせるだけ。(ex: createした後に、publishCreateで知らせる)
record: 送り先が持ってる値。uidならその人1人に。roomidならその
roomidを持ってる(roomにいる)人へ送る。
自分に送りたくないなら、req.socketを第3引数に。
![Page 18: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/18.jpg)
io.socket.get()
io.socekt.on(‘Model’)
クライアント サーバー
‘Model’.subscribe()
‘Model’.publishCreate()
switch(msg.verb) - created - addTo - message - …
Pub-Sub方式
私はこういうものです。 OK!変更があったら通知するね
変更あったよ!変更の種類別で処理を変えようっと
![Page 19: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/19.jpg)
client / subscribeio.socket.on(‘connect’, function(){}
io.socket.on(‘モデル名’, function(message){}
message
- data (送られたデータ)
- id
- verb (created,addedTo,updated,removedFrom,destroyed,messaged)
![Page 20: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/20.jpg)
その他Tips
Sails.sockets - 手動でもsocketを扱える
sails.io.js - クライアント側の便利library
![Page 21: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/21.jpg)
ではでは、
![Page 22: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/22.jpg)
appを リアルタイム化しよう!(3)
![Page 23: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/23.jpg)
環境設定
underscore.js(クライアント側に、JSTで
template内のファイルをjsで扱うのに必要)
online.pngとoffline.png
![Page 24: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/24.jpg)
ソース
https://github.com/igtm/sails-sample-app1 完成ソース
https://github.com/igtm/sails-sample-app1/compare/v0.1...v0.2 前回からの変更が見れる
![Page 25: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/25.jpg)
View
![Page 26: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/26.jpg)
user/index.ejs
L5
L18~L22
onlineかどうかの画像を表示
![Page 27: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/27.jpg)
templates/newColumn.ejs
新規作成
誰かが新規登録した際に、一覧画面に行をリアルタイムで増やすためのテンプレート
![Page 28: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/28.jpg)
task/pipeline.js
L50
templateファイルに入ってる .ejsをjsで扱えるようにするという設定
![Page 29: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/29.jpg)
Config
![Page 30: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/30.jpg)
config/policies.js
L38
![Page 31: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/31.jpg)
config/blueprints.js
L138
autoWatchをtrueにすることで、
publishCreateを実行できるようにしている
(代わりにModel.watch()で手動にしてもいいが)
![Page 32: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/32.jpg)
api
![Page 33: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/33.jpg)
policies/sessionAuth.js
デフォルトであるやつ
L14: 別に付け足さなくても問題ない。
L17: 403を返す
![Page 34: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/34.jpg)
models/User.js
L30~L33
onlineかそうでないかの属性
![Page 35: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/35.jpg)
本題。socket部分!
![Page 36: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/36.jpg)
サーバー側
![Page 37: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/37.jpg)
UserController
L46~L51
online: trueにして再度save
L51: 送るデータ=user 除外する宛先=
req.socket(自分)
![Page 38: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/38.jpg)
UserController
L89
消されるmodelのid=req.param(‘id') 除
外する宛先=req.socket(自分)
![Page 39: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/39.jpg)
UserControllerL94-L105
L100: publishCreateを購読する(autowatch:
trueしてるので必要ない)
購読するsocket=req.socket 購読する実体=
users
※subscribeはsocket.getとかでrequestされな
いとつかえない。$.ajaxとかは無理
![Page 40: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/40.jpg)
SessionController
L56-L64
変化したmodelのid=user.id 送りたい
data={loggedIn……}
![Page 41: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/41.jpg)
クライアント側
![Page 42: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/42.jpg)
app.js - 全体像 -sails.io.jsがまず自動でコネクトしてくれる。
connectイベント発火で、船の絵が出てくる。
L15: サーバに購読させる
L12: userモデルでpublish…がされたら
callbackへ
![Page 43: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/43.jpg)
app.js - userInDom -
userモデルでpublishCreate等が発火した
callback
verbで振り分け
UserIndexPage: 一覧画面の操作等
![Page 44: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/44.jpg)
Well Done!
sails liftして ブラウザを2つ立てて確認してみよう!
![Page 45: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/45.jpg)
感想
![Page 46: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/46.jpg)
socketの使い方がv0.10とv0.9 全然違うやん(泣)
![Page 48: Sails workshop3](https://reader035.fdocument.pub/reader035/viewer/2022062216/55a4254f1a28ab536a8b4678/html5/thumbnails/48.jpg)
開発者のgitにsampleアプリが上がっているので参考にしてみてください。