node.js + express + jade + Stylus + socket.io + Bootstrap でリアルタイムチャットシステムを作ってみたのでそのメモ。
※間違っていたらすみませんがご指摘お願いしますm(__)m
まず使ったフレームワークの紹介。
node.js
JavaScriptをサーバーサイドアプリケーションの実装言語として使うための技術。
いわゆるサーバーサイドJavaScript。
特徴として、以下があげられる。
・グーグルが開発したV8エンジン上で動作する(そのため高速)
・Apacheのようにマルチスレッドで動作するのではなく、シングルスレッドでかつNon-blocking I/Oで動作する
そのため、同時接続数が多くなってもパフォーマンスが良い(いわゆるC10K問題の解決)
socket.io
クライアントサーバ間で非同期双方向通信が行えるWebSocketを簡単に扱えるライブラリ。
このライブラリの良いところは、WebSocketが使えないブラウザに対しては、自動的にAjax等の代替手段を使って、
双方向通信をしてくれるところ。
なのでプログラマがWebSocket対応していないブラウザ向け用に実装を用意しなくてもよい。
Bootstrap
Twitterが作ったCSSフレームワーク。
このCSSを読み込むだけで、非常に良い感じのデザインが施される。
デザインが苦手なエンジニアには女神のような存在。
といった感じで、せっかくなので、色々と贅沢に使ってみました。
それではこれらをインストールしていきましょう。
ちなみに私のPCは、Mac OS X Lion 10.7.2 です。
まず、nvmというものをインストールします。
nvm(Node Version Manager)とは、複数のnodeのバージョンをインストール及び管理をすることができるツールです。
nodeは頻繁にアップデートされているので、このツールがあると便利です。また下記のnpmもこれを入れると一緒に入っているので、ぜひ入れましょう。
nmvディレクトリは好きな場所に作ってOKです。
$ brew install git $ mkdir nvm $ cd nvm $ git clone git://github.com/creationix/nvm.git . $ . ./nvm.sh $ nvm install v0.6.1 $ nvm use v0.6.1 $ node --version v0.6.1 $nvm alias default v0.6.1 default -> v0.6.1
これで、nvmがインストールされ、使うバージョンはv0.6.1になりました。
ちなみに、.bashrc や .zshrc に以下のコマンドを書いておくと、幸せになれます。
. {nmvディレクトリ}/nvm.sh次に、npmを使って、node-devをインストールします。
npm(Node Package Manager)とは、node.jsのパッケージ(ライブラリ)管理システムです。
これを使うと簡単にライブラリのインストールやアンインストール、アップデート等々が出来るようになります。
node-devとは、ファイルの更新があると自動で再起動して反映してくれるライブラリです。
node.jsは基本的にプログラムを修正(更新)したら、再起動が必要になります。
しかし、node-devを使えばその手間が省けます。ということで入れましょう。
オプションの-gはグローバルインストールだそうです。node-devはいろんなアプリで使うことになるので、
-gを付けました。
$ npm install -g node-dev
次に、expressもインストールします。
$ npm install -g express
ちなみに、node-devやexpressが具体的にどのディレクトリにインストールされたかですが、
以下のように/lib/node_modulesの下にインストールされています。(-gオプションをつけた場合)
{nmvディレクトリ}/v0.6.1/lib/node_modules
次に本題であるチャットシステムを作るための下地を作ります。
チャットシステム等々のアプリを入れるためのsrcディレクトリをnmvディレクトリと同階層に作ります。
(※これは一例なので、別に他の好きな場所でも構いません)
階層構造は以下のようになります。
├── nmv │ ├── README.markdown │ ├── alias │ ├── nvm.sh │ ├── src │ └── v0.6.1 └── src
そして、
$ cd src $ express chatroom -c stylus create : chatroom create : chatroom/package.json create : chatroom/app.js create : chatroom/public create : chatroom/routes create : chatroom/routes/index.js create : chatroom/views create : chatroom/views/layout.jade create : chatroom/views/index.jade create : chatroom/public/javascripts create : chatroom/public/images create : chatroom/public/stylesheets create : chatroom/public/stylesheets/style.styl dont forget to install dependencies: $ cd chatroom && npm install
とやります。
express chatroom -c stylus でchatroomという名前のプロジェクトのひな形を作成しています。
そして -c stylusでCSSフレームワークにstylusを使用することを指定しています。
そして、親切に、
dont forget to install dependencies:
$ cd chatroom && npm install
と出力されているので、
$ cd chatroom $ npm install
とやります。
npm installで依存関係のあるパッケージを自動的にインストールしてくれます。素晴らしい。
ついでに、socket.ioもインストールしちゃいます。
$ npm install socket.io
ここまでやると、階層構造は以下のようになるかと思います。(階層が深いので3階層目までしか出力していません)
$ tree -L 3
.
└── chatroom
├── app.js
├── node_modules
│ ├── express
│ ├── jade
│ ├── socket.io
│ └── stylus
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
├── routes
│ └── index.js
└── views
├── index.jade
└── layout.jade
最後にBootstrapも入れます。
$ cd ./chatroom/public/stylesheets $ git clone git://github.com/twitter/bootstrap.git
さて、これで、準備は完了です。
お疲れ様でした。
次回は、リアルタイムチャットシステムを作っていきます。
(ソース貼り付けるだけになりそうだけど…)
