リアルタイムWebを極める

第3回 node.jsを利用した開発とWebサイトへのデプロイ

この記事を読むのに必要な時間:およそ 3 分

前回でnode.jsの概要とWebMatrixを利用した開発の準備が完了したので,実際にnode.jsとsocket.ioを使った簡単なアプリケーションを開発してみましょう。

今回はサンプルとしてわかりやすさを重視して,1行チャットアプリケーションを開発してみたいと思います。

図1 1行チャットの完成予想図

図1 1行チャットの完成予想図

プロジェクトを作成

まずはWebMatrixを利用して,node.jsのプロジェクトを作成していきます。それではWebMatrixを起動して,node.jsの「Expressサイト」テンプレートを選択してチャットアプリケーション用のWebサイトを作成します。

図2 WebMatrixで「Expressサイト」テンプレートを選択

図2 WebMatrixで「Expressサイト」テンプレートを選択

残念ながら「Expressサイト」テンプレートではsocket.ioがインストールされないため,まずはNPM Galleryを拡張機能ギャラリーからインストールして,それからsocket.ioをインストールします。

NPM Galleryの検索窓から「socket.io」と入力すると,検索で引っかかったパッケージ一覧が表示されるので,socket.ioを選択して右下の「Install」ボタンをクリックします。

図3 NPM Galleryでsocket.ioをインストール

図3 NPM Galleryでsocket.ioをインストール

インストールが完了すると,最初のNPM Galleryの画面に戻りますので,⁠Close」ボタンをクリックして閉じます。これでsocket.ioとExpressを使ったアプリケーション開発の準備が整いました。

とりあえず,この状態でWebMatrixのツールバーにある「実行」ボタンを押して,実際にnode.jsでExpressを使ったサイトが動作するか確認しておきます。

図4 WebMatrixの「実行」ボタン

図4 WebMatrixの「実行」ボタン

実行するとブラウザが立ち上がり,以下のようなテンプレートとして作成されたページが表示されます。

図5 ⁠Expressサイト」のデフォルトページ

図5 「Expressサイト」のデフォルトページ

見た目はとくに代わり映えしないですが,中身はnode.jsとExpressを使ってページが出力されています。これから,このページに1行チャット機能を追加していきます。

サーバを実装

それでは作成したプロジェクトに用意されているserver.jsを開いて,チャットアプリケーションのサーバ側コードを追加していきます。

server.jsには予めExpressで必要なコードが記述されていますが,socket.ioは基本的にExpressとは独立して動作しますので,server.jsの最終行から書いていけば問題ありません。

実際に今回追加するコードを上げます。基本的には前回紹介したsocket.ioのサンプルととくに変わりません。

クライアントとのやり取りは⁠sendMessage⁠⁠receiveMessage⁠という2つのイベントを用いて行っています。

var io = require("socket.io").listen(app);
 
io.configure(function () {
    io.set("transports", ["xhr-polling"]);
    io.set("polling duration", 100);
});
 
io.sockets.on("connection", function (socket) {
    socket.on("sendMessage", function (text) {
        io.sockets.emit("receiveMessage", {
message: text, time: new Date().toLocaleTimeString()
});
    });
});

しかし,前回で紹介したsocket.ioのサンプルとはlistenの引数や,io.configureの呼び出しを追加している点が異なります。今回,listenの引数はExpressを使っているので,そのインスタンスを指定してポート番号を取得するようにしています。

io.configureの呼び出しではsocket.ioの設定を行っているのですが,クライアントとの通信方法に⁠xhr-polling⁠を指定するために追加しました。

実はIISとnode.jsは直接やり取りしているわけではなく,iisnodeと呼ばれるライブラリを介して通信を行っています。しかし,残念ながらWebMatrixと同時にインストールされるiisnodeではWebSocketが使えないため,代わりにXMLHttpRequestを使って通信するように設定しているという訳です。

注:
WebSocketに対応した最新のiisnodeはGitHubで公開されています。
https://github.com/tjanczuk/iisnode
そして実際にWebSocketを使う際の方法が作者のブログで説明されています。
http://tomasz.janczuk.org/2012/11/how-to-use-websockets-with-nodejs-apps.html

著者プロフィール

芝村達郎(しばむらたつろう)

PHPでの受託開発が中心の会社に勤めていたが,趣味で C# や ASP.NET 開発を行う。

2010年4月から Microsoft MVP - ASP.NET/IIS を受賞。
2012年6月にソーシャルグリッド株式会社 取締役に就任。

blog:http://shiba-yan.hatenablog.jp/
twitter:@shibayan

コメント

コメントの記入