前回→今からはじめるReact.js〜propsとstate、それからrefs〜
サーバサイドの実装(今回はReact.jsは出てきません)
Node.js
いいかげん、サーバーサイドを実装します。
Node.jsでサーバーを起動できるようにします。
Node.jsはノンブロッキング（非同期）IOという特徴があります。
クライアントサイドから来たリクエストごとにスレッドを立てるわけでなく、
サーバー側で処理が終わったものからどんどんクライアントサイドに返却していきます。
下記のサイトが参考になりました。
http://satoshun00.hatenadiary.com/entry/2012/08/02/172936
express
実装するにあたり、フレームワークのexpressを利用したいと思います。
npmでインストールします。
npm install express --save
作業ディレクトリ直下にserverディレクトリを作成し、その直下にserver.jsというファイルを作成しました。
内容は以下の通りです。
server.js
var express = require('express');
var app = express();
//ポートの指定
app.set('port', process.env.PORT || 5000);
//ルートパスの指定
var clientPath = __dirname.replace("/server", "/client");
app.use('/', express.static(clientPath));
//redirect NOT FOUND page
//app.use(function(req, res, next){
// res.status(404);
// res.sendFile(clientPath + '/404.html');
//});
//エラーが発生した場合の指定
app.use(function(err, req, res, next) {
console.log(err.stack);
res.status(500).send(err.message);
});
//指定したポートでリクエスト待機状態にする
app.listen(app.get('port'), function () {
console.log('server listening on port :' + app.get('port'));
});
前半は、
expressのインスタンスを作って、ポートの指定および、クライアント側ソースの起点を指定する感じですね。
コメントアウトしているところは、ユーザーの指定したURLがどのアドレスにも一致しなかった際の処理を記述しています。
後半はエラーが発生した場合の処理があり、最後にリクエスト待機状態にしています。
では、サーバーを起動してみましょう。
node server/server.js
とコマンドを実行します。
上記のソースの場合、
server listening on port :5000
とターミナルに表示されたら、
http://localhost:5000/
にアクセスしてみてください。
サンプルソース