また、加えてCSRF対策も有効にしてみます。config/csrf.jsのmodule.exports.csrfの値をtrueに変更し、メッセージ送付時にトークンを付けて送るようにします。トークンはajaxやsocket用にトークンを発行してくれるエンドポイントがデフォルトで準備されているので、そちらにgetして取得します。エンドポイントは/csrfTokenです。トークンはJSONで{_csrf:'xxxxx'}と返されてきますので、_csrfの値を取出し保持しておきます。メッセージ送信時にはパラメータ値'_csrf'にこちらのトークンを含めて送信します。
//ChatRoomController
/**
* Action blueprints:
* `/chatroom/room`
*/
room: function (req, res) {
//とりあえずユーザのlastnameをビューに表示追加
res.view({'chatterName':req.session.passport.user.lastName});
},
//room.ejs
<div id='messages'>
<ul id='message_list'>
</ul>
</div>
<div>
<span>ChatterName: </span><span id="chattername"><%= chatterName %></span>
</div>
・
・
・
//app.js
(function (io) {
// as soon as this file is loaded, connect automatically,
var socket = io.connect();
var csrfToken = "";
socket.get('/scrfToken',function(res){csrfToken = res._csrf;});
・
・
・
socket.on('message', function messageReceived(message) {
//メッセージ送信者の名前を追加
addMessage(message.data.chatterName,message.data.message);
・
・
・
$('#send').click(function(){
//送信者名を画面の表示から取って追加してメッセージを送信
socket.post('/message',
{'chatterName':$('#chattername').text(),'message':$('#message').val(),'_csrf':csrfToken},
function(res){});
$('#message').val('');
});
・
・
・
//引数にメッセージの送信者名を追加
function addMessage(chatterName,message){
var chatMsg = '<li>'+escapeMessage(chatterName)+': '+escapeMessage(message)+'</li>';
$('#message_list').append(chatMsg);
}
function escapeMessage(msg){
return $('<div/>').text(msg).html();
}
ビューの追加を行ったら、アプリを起動し、実際にログインから投稿、投稿時の投稿ユーザ名の表示までできるか確認してみます。ログインボタンを押下後はGoogleの認証画面に遷移して、認証後にチャットルームが表示されます。
見た目を整える
最後におまけ的ですが、見た目を整えておきます。こちらはおなじみのBootstrapを組込んでみます。使用するBootstrapのバージョンは3.1.1です。組込むといっても、特別なことをするわけではありません。すでにアセットについては説明したとおりなので、linkerディレクトリ下の対応するディレクトリにダウンロードしてきたBootstrapのcssとjsをそれぞれコピーします。linker以下へのコピーは、Bootstrapのディレクトリ構成を保ったままディレクトリごと（例えばcssディレクトリごと）行います。ディレクトリの中身に含まれるものはミニファイされたものだけでよいです。またJavaScriptの読み込み順は、先ほど説明したGruntfile.jsの設定で、jQueryが先になるようにしておきます。
コピーが済んだら、ビューそれぞれにテンプレートを当てはめていきます。
テンプレートの適用ができたら、再びアプリを立上げ確認してみます。どうでしょう？ 多少はそれらしくなってきたでしょうか？
まとめ
今回は、Sails組み込みのpub/sub機能を利用した簡単なチャットアプリの実装を説明しました。リアルタイム系のアプリを割と簡単に実装できそうな感じをつかんでいただけましたでしょうか？ 今回は紹介しきれませんでしたが、SailsにはWebアプリを作成するのに必要なさまざまな機能が用意されています。また、最近よく用いられるBackboneやAngularといったクライアントサイドのフレームワークも比較的容易に採用できるようになっています。Sails自体日々改良が加えられ続けていて、機能強化も進んでいますので、もし今回の記事で興味をもたれた読者の方がいらっしゃれば、ぜひ手元でいろいろと試してみてください。
Tech-Sketch出張所の次の記事は、年度明け公開に向け企画中です。次回もお楽しみに！
