カテゴリー
未分類

Node.jsのフレームワークSails.jsを使ったメッセージ送受信の基礎構築

SailsはRailsライクのNode.jsのMVCフレームワークである。本記事ではSails.jsを利用してメッセージの送受信の検証を行う。開発環境でのテスト用に各コードをシンプルかつ短く記述している。

本記事ではNode.jsとnpmを利用する。まだ導入を行っていなければNode.js入門の記事を参照のこと。Node.js v0.11.11、npm 1.3.25を使ってテストを行う。

Sails.jsの環境構築

Sails.jsをインストールする

npm install -g sails

今回はSails.js 0.10.5を使って検証をする

sails -v
0.10.5

Sails.jsのプロジェクト作成

sails newでSailsのプロジェクトが自動的に現在のディレクトリ以下に作成される

sails new my-project

チャットルームのビューを作成

sails generate controllerでコントローラーを作成できる

sails generate controller chat

作成されたファイルが表示される

# info: Created a new controller ("chat") at api/controllers/ChatController.js!

コントローラーにチャットルームのビューを作成する

// api/controllers/ChatController.js
module.exports = {
home: function (req, res) {
res.view();
},
room: function (req, res) {
res.view();
}
};

ビューを作成する。メッセージ一覧をul#message_listへ追加し、メッセージ送信は#message_formから行う事にする。

// views/chat/room.ejs
<div id="messages">
<ul id="message_list">
</ul>
</div>
<div>
<form id="message_form">
<input type="text" id="message"></input>
<input type="submit" value="送信"></input>
</form>
</div>

ルーティングを設定する

// config/routes.js
module.exports.routes = {
'/': {
controller: "chat",
action: "home"
},
'/room': {
controller: "chat",
action: "room"
},
};

API blueprintsでメッセージの送受信を行う

Sailsに組み込まれているAPI blueprintsによって自動生成されるRESTによるCRUDを利用して簡単にメッセージの送受信を構築できる。

sails generate controller message
sails generate model message

MessageController.jsとMessage.jsが生成される

info: Created a new controller ("message") at api/controllers/MessageController.js!
info: Created a new model ("Message") at api/models/Message.js!

MessageController.jsには変更は不要である

// api/controllers/MessageController.js
module.exports = {
};

Message.jsでmessageを許可する

// api/models/Message.js
module.exports = {
attributes: {
message: "string"
}
};

これでGET /messageで送信されたメッセージの一覧を確認でき、POST /messageでメッセージを作成できるようになる。GET /messageはデフォルトで30件のデータを表示するが、limitパラメータを利用して表示件数を変更できる。POSTについては/message/create?message=valueと書くこともできるのでテスト時に活用したい。

Socket.ioを利用してメッセージの送受信を行う

メッセージの送受信を行うchat.jsをassetsディレクトリに作成する。DOMの操作にはjQueryを利用する。

(function (io) {
var socket = io.connect();
socket.on("connect", function socketConnected() {
// 新規メッセージ受信
socket.on("message", function messageReceived(message) {
addMessage(message.data.message);
});
// メッセージ送信
$("#message_form").submit(function() {
var new_message = $("#message").val();
addMessage(new_message);
socket.post("/message", {"message": new_message}, function(res) {});
$("#message").val("");
return false;
});
// 入室時のログ取得
socket.get("/message", {}, function(res) {
$.each(res,function(){
addMessage(this.message);
});
});
});
function addMessage(message) {
var chatMsg = "<li>" + $("<div />").text(message).html() + "</li>";
$("#message_list").append(chatMsg);
}
})(
window.io
);

ビューで必要なライブラリとJavaScriptを読み込む

<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/chat.js"></script>

以上でリアルタイムにメッセージを送受信できる機能が完成する。

動作確認

sails liftでサーバーが起動する

sails lift

正常に起動すればこのようなメッセージが表示される

info: Starting app...
info:
info:
info:    Sails              <|
info:    v0.10.5             |\
info:                       /|.\
info:                      / || \
info:                    ,'  |'  \
info:                 .-'.-==|/_--'
info:                 `--'-------'
info:    __---___--___---___--___---___--___
info:  ____---___--___---___--___---___--___-__
info:
info: Server lifted in `/path/to...`
info: To see your app, visit http://localhost:1337
info: To shut down Sails, press <CTRL> + C at any time.
debug: --------------------------------------------------------
debug: :: Sat Oct 18 2014 15:23:17 GMT+0900 (JST)
debug: Environment : development
debug: Port        : 1337
debug: --------------------------------------------------------

ブラウザのタブを複数開き、http://localhost:1337/roomにアクセスすれば動作するはずである

Thanks

sailsは、API blueprintsという仕組みが組み込まれています。modelとcontrollerが用意されている場合、デフォルトでRESTによるCRUD が出来るようになります。本家の記事から

After a controller has been defined, Sails will automatically map out routes to give you easy access.
For the controller above, the routes would be the following:
http://localhost:1337/comment/create
http://localhost:1337/comment/destroy
http://localhost:1337/comment/tag
http://localhost:1337/comment/like
Additionally, thanks to blueprints, you also get these methods by default:
get /:controller/:id?
post /:controller
put /:controller/:id
delete /:controller/:id
/:controller/find/:id?
/:controller/create
/:controller/update/:id
/:controller/destroy/:id
Sails pub/sub application | TECH NOTE - Elementary, My Dear Watson. -

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA