Node + Socket.IO で簡単なチャットアプリの作成

128件のシェア(ちょっぴり話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、うえじゅんです。
今回はタイトル通りNodeとSocket.IOを使って簡単なチャットアプリを作ってみたいと思います。

「Node」のインストール

インストールはとても簡単です。
公式サイトからダウンロードしてインストールするだけです。 
(確認した環境はMacです)

 

インストールが完了したらターミナルで「node -v」と入力して「v0.8.12」と表示されていれば無事成功です。

ついでに「Express」もインストールします 。
ターミナルで以下のコマンドを実行してください。
(エラーが出る場合は、「sudo」をつけてみてください。)

「Express」

npm install -g express

インストールが終わったらこちらもバージョンを確認しておきましょう。
「express -V」で「3.0.0rc5」と表示されたら成功です。

プロジェクトの作成

 ターミナルで「express アプリ名」と入力して実行します。
(今回は「cmapp」という名前にしました)

$ express cmapp
  create : cmapp
  create : cmapp/package.json
  create : cmapp/app.js
  create : cmapp/public
  create : cmapp/public/javascripts
  create : cmapp/public/images
  create : cmapp/public/stylesheets
  create : cmapp/public/stylesheets/style.css
  create : cmapp/routes
  create : cmapp/routes/index.js
  create : cmapp/routes/user.js
  create : cmapp/views
  create : cmapp/views/layout.jade
  create : cmapp/views/index.jade

  install dependencies:
    $ cd cmapp && npm install
 
  run the app:
    $ node app

実行すると上記のようにプロジェクトが作成されます。

ではまず「Socket.IO」を使えるように「package.json」を修正しましょう。
「 "socket.io": "*"」を追加します。(jadeの行の最後に「,」も追加します)

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "3.0.0rc5",
    "jade": "*",
    "socket.io": "*"
  }
}

編集が終了したら、「npm install」を実行します。
これは必要なパッケージのインストールになります。

少し時間がかかりますが、完了すると「node_modules」というフォルダが作成されていると思います。
「express」「jade」「socket.io」が入っていれば成功です。

 app.jsの修正

 ちなみにエディタは何でもいいですが、「Sublime Text2」はオススメです。
(参考:「1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選(Win、Mac両方)」)

/**
 * Module dependencies.
 */

var express = require('express')
  , http = require('http')
  , path = require('path')
  , io = require('socket.io')

var app = express()
  , server = require('http').createServer(app)
  , io = io.listen(server);

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

server.listen(app.get('port'))

io.sockets.on('connection', function(socket) {
  socket.on('message:send', function(data) {
    io.sockets.emit('message:receive', { message: data.message });
  });
});

ポイントは「Socket.IO」をrequireして必要な設定を追加した上で、「connection」イベントを作成しています。
(デフォルトで作成される不要なものも削除してあります)

index.html と chat.jsの作成

プロジェクト作成時に「public」フォルダが作成されていますので、その配下に「index.html」を「javascripts」の配下に「chat.js」を配置します。

見た目を少し良くしたいので「Bootstrap」も利用するのでダウンロードしてきた「bootstrap.css」を「public - stylesheets」の下にコピーしておきます。

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>cmapp</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="/stylesheets/bootstrap.css">
</head>
<body>

  <div class="page-header">
    <h3>クラスメソッド開発ブログ <small>node + socket.io chat app sample</small></h3>
  </div>
  <div class="hero-unit">
    <div class="input-append">
      <input class="span5" id="message" type="text" placeholder="入力してください">
      <button class="btn btn-primary" type="button" onclick="send()">送信</button>
    </div>
    <div id="chat-area" style="height: 300px; overflow: scroll;"></div>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/javascripts/chat.js"></script>
</body>
</html>

「chat.js」

var socket = io.connect();

socket.on('message:receive', function (data) {
  $("div#chat-area").prepend("<div>" + data.message + "</div>");
});

function send() {
  var msg = $("input#message").val();
  $("input#message").val("");
  socket.emit('message:send', { message: msg });
}

「socket.emit」は指定した名前でイベントを送信します。
「socket.on」は「socket.emit」で送信された同名のイベントを受け取ります。

「io.sockets.emit」は自分を含む接続している全員にイベントを送信します。

実行

では、実行してみましょう。

以下のコマンドで起動します。

node app
node app.js

「info - socket.io started」と表示されれば正常に起動しています。
起動したら「http://localhost:3000」にアクセスしましょう。
以下のような画面が表示されます。

入力して送信してみます。

他のブラウザでも開いているとそちらにも送信した内容が表示されます。

こんな感じで簡単にリアルタイムのチャットアプリを作れてしまいます。
次回は今回のサンプルを「CoffeeScript」に置き換えてみたいと思います。