Node.js + Socket.IOでチャットシステム (第1回)

Tatsuya Yatagawa

2014-12-27

こんにちはtatsyです。

つい最近まで6年くらいWebまわりの技術はご無沙汰だったのですが、6年前にはなかった面白い技術が出てきていてるなぁと感じていて、手始めにNode.js+Socket.IOでチャットシステムを作ったのでまとめて記事にしておきます。

第1回の今回はSocket.IOの公式ページにあるChatのでもサンプルをいじってみます。元の記事はこちらです。

Socket.IO — Chat (2014年12月28日閲覧)

では、早速参ります。

Step 1: package.jsonの用意

まずアプリケーション開発に必要な環境の構築です。

Node.jsを使ってWebアプリケーションをつくるときpackage.jsonというファイルを用意してあげると、コマンドラインで

npm install

と叩くだけで必要なモジュールが用意自動的にインストールされます。なので、このpackage.jsonを最初に用意します。

package.jsonにはかなりいろいろ書けるのですが、最小構成は次のような感じ。

{
    "name": "socket-chat-example",
    "version": "0.0.1",
    "description": "my first socket.io app",
    "dependencies": {}
}

一番下の行にあるdependenciesという項目が重要で、ここに依存のあるモジュールとそのバージョン(オプション)を書いておくとnpmがモジュールをインストールしてくれます。

じゃあ、ここにいちいち何かを書かなければならないの？というと、確かにそうなのですがnpmには便利なコマンドが用意されています。

今回はExpress^*1を使うので、手始めにexpressをローカルの開発環境にインストールします。

その際、

npm install --save express

というふうに––saveというオプションを付けると、この時インストールされたモジュールを勝手にpackage.jsonのdependenciesのところに追加してくれます。

実行後のpackage.jsonは次のような感じになります。バージョンのところのハット(^)は、これ以上のバージョンが必要ということです。

"name": "socket-chat-example",
    "version": "0.0.1",
    "description": "my first socket.io app",
    "dependencies": {
        "express": "^4.10.6"
    }

上のファイルではExpressはバージョンが4になっていますが、結構Webや書籍の情報はバージョン3のものが多く、書き方が結構変わっているので注意してください。

Step 2: Hello, world!

まずはExpressからウェブサーバーがlocalhost (127.0.0.1)の3000番ポートをlistenするようにして、そこにアクセスがあったら単にHello, worldと表示するプログラムを書きます。

// index.js
var express = require('express');
var app = express();
var http = require('http').Server(app);

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

肝心のコード内容ですが、最初の3行でサーバー・オブジェクトを作っており、その下の**app.get(url, callback)**を使って、あるURLにGET通信で接続があった時の挙動を記述しています。

ちなみに同じような関数で**post(url, callback)**という関数もあります。

コマンドラインから実行すると次のようになると思います。

$ node index.js
listening on *:3000

ブラウザで**http://localhost:3000/**を開くと結果が表示されると思います。

Step 3: HTMLファイルの用意

上のコードでは直接Node.jsからHello, worldというメッセージを返していましたが、次はあらかじめ用意したHTMLファイルを表示してみます。

今回は元記事と同様に次のようなファイルを用意します。


<html>
    <head>
        <title>Socket.IO chat</title>
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body { font: 13px Helvetica, Arial; }
            form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
            form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
            form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
            #messages { list-style-type: none; margin: 0; padding: 0; }
            #messages li { padding: 5px 10px; }
            #messages li:nth-child(odd) { background: #eee; }
        </style>
    </head>
    <body>
        <ul id="messages"></ul>
        <form action="">
            <input id="m" autocomplete="off" /><button>Send</button>
        </form>
    </body>
</html>

ここで用意しているものとしては、messagesというidをもつ箇条書き要素(ulタグ)を用意しておいて、一番下にチャット内容を入力するinputと送信用のSendボタンが用意されています。

このファイルをブラウザから見るためにはindex.jsのapp.get関数が上のhtmlファイル(index.html)を返すように変更します。

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

これで次のような画面が表示されます。

すこし記事が長くなりそうなので、続きは次の記事にしたいと思います。次の記事は下のURLからご覧ください。

最後までお読みいただきありがとうございました。

Expressは、Ruby on Railsみたいな感じでNode.js上で簡単にアプリケーションを作るためのフレームワークです。