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

node.jsとsocket.ioでリアルタイムチャットシステムを作る 〜インストール編〜

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対応していないブラウザ向け用に実装を用意しなくてもよい。

express

Sinatraのようなマイクロフレームワーク

jade

Hamlのようなテンプレートエンジン。
簡潔にHTMLが書ける。

Stylus

SassのようなCSSテンプレートエンジン。
簡潔にCSSが書ける。

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


さて、これで、準備は完了です。
お疲れ様でした。
次回は、リアルタイムチャットシステムを作っていきます。
(ソース貼り付けるだけになりそうだけど…)