Windows+Node.js+Socket.IO

Windows+Node.js+Socket.IO

Posted at January 10,2012 1:55 AM
Tag:[JavaScript, Node.js]

Windowsを使ってNode.js+Socket.IOを試してみました。

Node.js

マシンはWindows VISTAですが、Windows 7でも同じだと思います。以前はCygwinでコンパイルをしないといけなかったようですが、現在はWindows用のexeファイルが提供されていて、かなり簡単に動かすことができるようになっています。

1.Node.jsとは

Node.jsは、サーバサイドJavaScriptの実装の1つで、グーグルが開発したV8 JavaScriptエンジン上で実行します。要するにサーバ側の処理をJavaScriptで書くことができます。

サーバサイドJavaScriptには「CommonJS」という仕様が策定されており、Node.jsはCommonJSに準拠して開発されています。2012/01/10追記:独自仕様もあるようです。

Node.jsの特徴として、非同期処理を行うための「イベントループ」と呼ばれる技術を用います。「イベントループ」というのは「C10K問題(クライアント1万台問題)」で有名になった技術で、大量のクライアントからのリクエストを処理するためのアーキテクチャです。

Node.jsはシングルスレッドなので、イベントループ処理はノンブロッキングI/O(データ送受信(I/O)の完了を待たずに、他の処理を開始する処理方式)で実現します。

つまり、すべての処理をノンブロッキングI/Oにしておかないと、イベントループ処理が止まってしまいます。例えば他の言語でノンブロッキングI/Oを実現するにあたってライブラリを利用する場合、ライブラリでブロックしていないことが要件となりますが、JavaScriptはそもそもブロッキングI/Oをもっていないので、相性が良い(そういうことを心配する必要がない)らしいです。

2.Node.jsのインストール

Node.js公式サイトにある「DOWNLOAD」をクリック。

Node.js公式サイト

「Windows Installer」をクリック。

DOWNLOAD

ダウンロードしたファイルを実行します。「Next」をクリックすればすぐにインストールが開始します。

インストールが開始

インストール中です。

インストール

完了しました。めちゃくちゃあっさりしています。

インストール完了

Node.jsは「C:¥Program Files¥nodejs」というフォルダにインストールされます。実行ファイルは「C:¥Program Files¥nodejs¥node.exe」です。「npm」という、Node.js用のパッケージマネージャも一緒にインストールされており(ネットで調べると以前は別にインストールする必要があったようですが不要)、同じフォルダにある「npm.cmd」が該当します。

3.Node.jsの動作確認

Nodeはコマンドプロンプトから操作します。ということで、コマンドプロンプトを起動します。

まずバージョンを表示する「node --version」を入力してみます。インストール時にパスは通っているはずなので、どのフォルダからでも起動できると思います。

コマンドプロンプト

バージョンが表示されました。「node --help」を入力すれば利用可能なオプションが表示されます。

バージョン表示

パスが通っているかどうかは、「コンピュータ」→右クリックで「プロパティ」→「システムの詳細設定」→「詳細設定」タブ→「環境変数」→「システム環境変数」の「Path」を選択して「編集」をクリックすれば分かります。

パスの確認

Node.jsはV8エンジン上で動いているので、通常の処理もできるようです(というかNode.jsはネットワーク処理に特化したライブラリらしいです)。単に「node」と入力すると「>」というプロンプトが表示されるので、計算などが行えるようです。

コマンドプロンプト

こちらを終了させる場合はCtrl-cを2回行います。

4.ブラウザからNode.jsにアクセスする

ブラウザからNode.jsにアクセスして何かを表示するにはnode起動時にクライアントを通信を行うためのJavaScriptファイルを指定します。クライアントから任意のURL(後述)にアクセスすると、このJavaScriptファイルが動作するという仕組みです。

Node.jsの公式サイトにあるサンプルファイルを用いて、ブラウザからアクセスして「Hello World!」を表示させてみます。次のファイルをexample.jsというファイル名でnodejsフォルダ直下に作成します。

var http = require('http');
 
http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);
 
console.log('Server running at http://127.0.0.1:8124/');

コマンドプロンプトから「node example.js」を入力します。

コマンドプロンプト

「Server running at http://127.0.0.1:8124/」は、console.log()の内容なので、これが表示されていれば正常に動作しています。この状態でブラウザから「http://127.0.0.1:8124/」にアクセスしてみます。

ブラウザからアクセス

おぉ!表示されました。

5.Socket.IOのインストール

Socket.IOはHTML5のWebSocket(クライアント・サーバの双方向通信)を実現するために必要なライブラリのようです。WebSocketで双方向通信を確認したかったのですが、この記事では簡単なサンプル動作にとどまってます。

ネットで調べたところ、Googleの「Socket.IO」というのがみつかったのでこれを利用してみます。「Socket.IO」の「How to use」をクリック。

Socket.IO

ここに以下のようなnpmコマンドが載っていました。

How to use

npm install socket.io

ということで、コマンドプロンプトからこのコマンドを実行します。

コマンドプロンプト

インストールされたようです。

6.Socket.IOのサンプル作成(Node HTTP server)

「How to use」のページに掲載されているサンプルを動かしてみます。

サーバ側のファイルです。app.jsというファイル名でとりあえずnodejsフォルダに作成します。

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')
 
app.listen(80);
 
function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
 
    res.writeHead(200);
    res.end(data);
  });
}
 
io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

クライアントが読み込むファイルをindex.htmlというファイル名で、app.jsと同じフォルダに配置します。script要素でsocket.io.jsをインクルードしています。このパスはこのままでOKです。

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

コマンドプロンプトから「node app.js」を実行してみましたが、「Error: listen EADDRINUSE」というエラーが発生しました。

エラー発生

これは、app.jsで指定しているリスンポートが正しくないためです(ポート80はPC上でXAMPPを起動しているためと思われます)。ということで、app.jsのポートを8124に変更します。

app.listen(8124);

これで再度起動します。多分うまく動作していると思います。

コマンドプロンプト

このサンプルは、ブラウザからアクセスすると真っ白な画面になります。

ブラウザからアクセス

ソースコードはindex.htmlの内容が表示されているので、正常に動作しているようです。

ソースコード

表示されたソースコード上のsocket.io.jsをクリックしたところ、こちらも正常に表示されました。

socket.io.js

とりあえずここまでです。「How to use」のページには他にもサンプルがあるので色々試してみるとよいでしょう。サンプルによっては、次のコマンドを実行する必要があるようです。

npm install socket.io express
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)