この記事で学ぶこと


  • 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を使用するには、gitcurlがインストールされていることを確認してください。

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からクライアントにリアルタイムで直接送信されるメッセージです。

投稿者: https ://twitter.com/aaron524web