リアルタイムWebハッカソンハンズオン編

リアルタイムWebハッカソン行ってきました。
2010/10/20 19:00から
http://atnd.org/events/8626
node.jsを使いこなす会。

node.jsとnpmのインストール

http://d.hatena.ne.jp/t_43z/20101013/1286957802
http://www.florian-kubis.de/2010/09/howto-install-node-js-on-mac-snow-leopard-with-express/
を参考に。

# install node.js
sudo port selfupdate
sudo port install nodejs

# check
rehash
node -v

# install npm
# このあたりを変更する必要があるっぽい
sudo chmod -R g+w /opt/local/lib
sudo chmod -R g+w /opt/local/bin
sudo chmod -R g+w /opt/local/share/man
curl http://npmjs.org/install.sh | sh

rehash
npm -v

# install express
npm install express

# create application
mkdir -p nodes/express_reward/
cd nodes/express_reward/

# create app.js file
vi app.js

var app = require('express').createServer();

app.get('/', function(req, res){
    res.send('Hello World');
});

app.listen(3000);

# run app.js
node app.js

view hello world
http://localhost:3000/

ExpressとWebSocketを使ったWebSocketのサンプルを作る準備

http://d.hatena.ne.jp/t_43z/20101020/1287545961

# install libraries
npm install express jade less socket.io

# create sample
express sample

# run sample
cd sample
node app.js

# access sample
http://localhost:3000/

# run application with
# developer mode (default)
NODE_ENV=developement node app.js
# production mode (default)
NODE_ENV=production node app.js

ExpressとSocket.ioを使ったWebSocketのサンプルを作る

http://d.hatena.ne.jp/t_43z/20101020/1287546022
サンプルをひたすら作り込む。

ExpressとSocket.ioを使ったチャットサンプル

http://d.hatena.ne.jp/t_43z/20101020/1287546063

# 新しいプロジェクトを作って、
# サンプルをひたすら作り込む。
express chat

ExpressとSocket.ioを使ったチャットサンプルを永続化

http://d.hatena.ne.jp/t_43z/20101020/1287546091
http://github.com/meso/chatsample

# install dirty
mkdir tmp
cd tmp
git clone git://github.com/felixge/node-dirty.git
cd node-dirty
npm install

# copy project from chat
mkdir persist
cd chat
tar cf - * | (cd ../persist; tar xpf -)

# edit app.js
vi app.js

まとめ

ひたすら言われるままに作っていただけだったので、まとめる。

# create project
express {project name}

# run appilcation
# port 3000で動かしているなら、 http://localhost:3000/ で確認できる。
node app.js

# codeは、インスタンスにハンドラを設定するイメージ
>|javascript|
var app = require('express').createServer();

app.get('/', function(req, res){
    res.send('Hello World');
});

app.listen(3000);

# 環境変数NODE_ENVで動作モードを変更できる。
NODE_ENV=developement node app.js
NODE_ENV=production node app.js

ファイルの構成

コントローラー

app.js

デザイン

views/layout.jade

クライアント側JavaScriptのコード。クライアントのHTMLで読み込ませる必要がある。

public/javascripts/client.js

ローカルホストにつないで、messageが来たら、functionを実行する。

var socket = new io.Socket('localhost');
socket.connect();
socket.on('message', function(message) {
  //message
});

in app.js, client.broadcast(message)でサーバーから、クライアントにメッセージを通知できる。

socket.on('connection', function(client) {
    client.broadcast('to client message');
}

ハッカソン成果物発表

そういえばハッカソンだったんだ。

感想

最後に時間を取ったおかげで、何とか、中身を理解できた。
動作させるにはJavaScriptを動かせる環境が必須だけど、クライアントにリアルタイムに変更を反映できるから、
コミュニケーションを取るようなアプリケーションに有効そう。

大規模に使ったとき、どの程度耐えられるのか、あたりを少し見てみたい。