塩焼きブログ

塩焼きに関しての研究内容を公開しています

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. -