読者です 読者をやめる 読者になる 読者になる

Sails.js+Vue.jsでPubSubな俳句投稿サービスを作ったよ #俳句プログラミング @pronama

Sails.js Vue.js サーバ プログラミング 開発

一応サーバサイドはSails.js、フロントサイドはVue.js、jQueryを使ってます

フロント側

まずVueのViewModelの初期化(あとからSocketでいろいろするときにアクセスしたいのでグローバルで定義します)

haikuVM = new Vue({
  el: "#haiku",
  replace: false,
  data: { 
    haikus: []
  }
});

次にSocketのいろいろを弄ります。(この辺は弄られたくないので即時実行関数で)

(
function (io) {
  var socket = io.socket;
  socket.on("connect",function socketConnected() {
    socket.on("haikus", function (res) {
      var haiku = res.data;
      addHaikus(haiku);
    });  
    socket.get("/haikus?limit=100&sort=createdAt%20DESC",{}, function(res) {
      addHaikus(res);
    });
    $("#send").click(function (){
      if(!$("#kamigo").val() || !$("#nakashichi").val() || !$("#shimogo").val()) {
        alert("自由律はだめです");
      } else {
        if($('#creator').val() == "") {
          $('#creator').val("unknown");
        }
        var newHaiku = {
          creator: $('#creator').val(),
          kamigo: $('#kamigo').val(),
          nakashichi: $('#nakashichi').val(),
          shimogo: $('#shimogo').val()
        };
        socket.post('/haikus', newHaiku, function(res){});
        addHaikus(newHaiku);
        $('#creator').val("");
        $('#kamigo').val("");
        $('#nakashichi').val("");
        $('#shimogo').val("");
      }
    });
  });
  function addHaikus(haikus) { 
    haikuVM.$data.haikus = [].concat(haikus).concat(haikuVM.$data.haikus);
  }
})(
  window.io
);

サーバ側

俳句を扱うモデルを書きます。基本的に全部必須項目(required: true)にします。

module.exports = {

  attributes: {
    creator: {
      type: 'STRING',
      required: true
    },
    kamigo: {
      type: 'STRING',
      required: true
    },
    nakashichi: {
      type: 'STRING',
      required: true
    },
    shimogo: {
      type: 'STRING',
      required: true
    }
  }
};

やってること

・フロント側

  • とりあえず表示は全部Vue.js任せ(勝手に表示してくれるので便利)
  • Socket通信とかはいつも通りSails.jsのSocket通信です。socket.onでHaikusのモデルの変更に対してリアルタイム反映するとか、socket.getでいままでのをとってくるとかその辺です。
  • 今のところ100件まで表示するようにしています。過去のを表示するためにページ切り替えとかは実装したくないけど、公開した時に必要になったらつくるかもしれないです。

サーバ側

  • 基本的にModel定義してconfig/route.js書いてるだけです。
  • あまりサーバを意識せず、大体の実装をクライアントサイド側だけに出来るのがSails.jsのいいところですね。

まだ公開はしませんがスクリーンショットは大体今のところこんな感じです。

今回もSails.jsを利用しましたが、バイトで知ったVue.jsはかなり相性がいいです。 理由はいろいろあるのですが、blueprintAPIのレスポンスがArrayで返ってくるのと、リアルタイムなモデルのやりとりをDOM操作を意識せずにできるため、そのあたりの面倒をすべてVueが背負ってくれる。 もともとSails.jsはかなりPubSubなアプリケーションの開発が楽なので、フロントエンドがさらに楽になることでかなり負担が減りますね。

いつの間にかあのタコ(sailsjs.org参照)がv0.11になっていましたし来年ぐらいにはv1.0が出るんでしょうかね~?