Express、Node.jsフレームワークをインストールし、VPSにSocket.ioをセットアップする方法
この記事で学ぶこと
- Node Version Manager（NVM）を使用してNodeJS0.10.16をインストールする方法
- NodeJS用のExpressWebアプリケーションフレームワークをインストールする方法
- 簡単なExpressプロジェクトを設定する方法
- Expressでsocket.ioを設定する方法
- 簡単なメッセージをリアルタイムでクライアントに送信する
- クライアント側のJavaScriptを使用してメッセージをリッスンする方法
ステップ1：NodeJSを設定する
注：NodeJSがv0.10.16をインストールしていることがすでにわかっている場合は、この手順をスキップできます。
Node Version Manager（NVM）は、LinuxマシンにさまざまなバージョンのNodeJSをインストールするのに役立つツールです。 NVMを使用するには、gitとcurlがインストールされていることを確認してください。
SSHを使用してVPS（ドロップレット）に接続します。
これらがインストールされていない場合は、システムのパッケージマネージャーを使用してインストールしてください。 たとえば、UbuntuまたはDebianのインストールでは、次のように実行します。
``` sudo apt-get install curl git ```
次に、NVMインストールスクリプトを実行する必要があります。
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
重要：ボックスからログアウトし、SSHを使用して再接続する必要があります。
ターミナルでnvmと入力して、nvmコマンドが機能することを確認します。 command not foundエラーが発生しない場合は、NVMが正しく設定されています。
Nodeの最新バージョン（この記事の時点では0.10.16）をインストールするには、次のように入力します。
nvm install 0.10.16
次に、インストールが完了するのを待ちます。 インストールが成功した場合は、Now using node v0.10.16という出力が表示されます。
ターミナルでnode -vと入力して、指定したバージョンを使用していることを確認します。 次の出力が得られるはずです：v0.10.16
ステップ2：Expressを設定する
Expressは、Node用のWebアプリケーションフレームワークです。 最小限で柔軟性があります。 Expressの使用を開始するには、NPMを使用してモジュールをインストールする必要があります。 シンプルタイプ：
npm install -g express
これにより、基本的なWebアプリケーションの作成に役立つExpressコマンドラインツールがインストールされます。 Expressをインストールしたら、次の手順に従って空のExpressプロジェクトを作成します。
mkdir socketio-test cd socketio-test express npm install
これらのコマンドは、作成したディレクトリsocketio-testに空のExpressプロジェクトを作成します。 次に、npm installを実行して、アプリの実行に必要なすべての依存関係を取得します。 空のアプリケーションをテストするには、node appを実行してから、ブラウザを http：// yourDropletIp-or-domainName：3000に移動します。 「WelcometoExpress」という簡単なウェルカムメッセージが表示されます。
ウェルカムメッセージが表示されたら、基本的なExpressアプリケーションの準備ができて実行されています。
続行する前に、Ctrl+Cキーボードコマンドを使用してVPSを強制終了してください。
手順3：ExpressアプリケーションにSocket.ioをインストールする
まず、Socket.ioとは何かについて簡単に説明します。 Socket.ioはリアルタイムのJavaScriptライブラリです。 要するに、これはWebSocket APIであり、AJAX Long Polling、Flash、または単なるWebSocketであるかどうかにかかわらず、ブラウザーの機能に応じて確立する接続の正しいタイプを決定します。
では、どのようにしてこれを始めますか？ まず、Socket.ioサーバーが必要です。 Expressサーバーの準備ができて待機しています。必要なのは、ソケットライブラリを追加することだけです。 これを行うには、package.jsonファイルに追加する必要があります。
最初のファイルは次のようになります。
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.3.5",
"jade": "*"
}
}
次に、「依存関係」領域に新しいフィールドを追加します。
"socket.io": "latest",
結果のファイルは次のようになります。
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"socket.io": "latest",
"express": "3.3.5",
"jade": "*"
}
}
次に、npm installをもう一度実行して、ソケットライブラリをインストールします。
パート4：サーバーコード
すべての依存関係が設定されたので、コードを開始できます。 Expressアプリケーションフォルダにあるapp.jsファイルを開いてください。 内部には、自動生成されたコードがたくさんあり、すべてを削除して、代わりに次の例を使用します。
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, http = require('http');
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server); // this tells socket.io to use our express server
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.static(__dirname + '/public'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
console.log("Express server listening on port 3000");
このサンプルファイルはすべて、自動生成されたコードを再編成し、socket.ioにExpressサーバーをリッスンして使用するように指示するvar io = require('socket.io').listen(server);行を追加しました。 ノードアプリを実行すると、info - socket.io startedという出力が表示されます。
では、どのようにしてメッセージをユーザーに転送するのでしょうか。
最後の行のすぐ下のapp.jsに次の行を追加します。
io.sockets.on('connection', function (socket) {
console.log('A new user connected!');
socket.emit('info', { msg: 'The world is round, there is no up or down.' });
});
これにより、新しいユーザーがサーバーに接続するたびに、新しいソケットメッセージが送信されます。 ここで、クライアント側でVPSと対話する方法が必要です。
パート5：クライアントサイドコード
Expressアプリケーション内のpublic/javascriptsフォルダーに移動し、client.jsという名前の新しいファイルを追加して、次のコードをその中に入れます。
// connect to the socket server
var socket = io.connect();
// if we get an "info" emit from the socket server then console.log the data we recive
socket.on('info', function (data) {
console.log(data);
});
コードは単純ですが、Socket.ioで何ができるかを示しています。 ここで、メインページにスクリプトを含める必要があります。
Expressアプリでviewsフォルダーに移動し、layout.jadeを開きます。 Expressは、ページのレンダリングにプレーンHTMLを使用しません。 Jadeと呼ばれるテンプレートエンジンを使用しています。 （Jadeの詳細については、ここを参照してください）Jadeは、プレーンHTMLと比較してシンプルでクリーンです。 クライアントスクリプトを追加し、 Socket.io クライアントライブラリを追加するには、link(rel='stylesheet', href='/stylesheets/style.css')のすぐ下の行にこれらを追加する必要があります。
script(type='text/javascript', src="/socket.io/socket.io.js") script(type='text/javascript', src='javascripts/client.js')
それらが同じインデントレベルに並んでいることを確認し、タブとスペースを混在させないでください。 これにより、ジェイドはエラーをスローします。
socketio-testディレクトリに戻ります。
cd socketio-test
レイアウトファイルを保存し、node appを使用してExpressアプリをもう一度起動します。
パート6：それをテストする
次に、ブラウザをもう一度 http：// yourDropletIp-or-domainName：3000 に移動し、開発者ツールコンソールを開きます。 ログに次のようなものが表示されるはずです。
Object {msg: "The world is round, there is no up or down."}
これは、VPSからクライアントにリアルタイムで直接送信されるメッセージです。
