【初心者向け】node.js(0.10x) + socket.io(0.9x)のサンプルプログラム

はじめに

node.js(0.10.x) + socket.io(0.9x)でWebSocketを使ったサーバプッシュのサンプルプログラムを作ってみました。

サーバサイドJavaScript Node.js入門

posted with amazlet at 12.12.22

清水俊博大津繁樹 Jxck 小林秀和佐々木庸平篠崎祐輔高木敦也西山雄也
アスキー・メディアワークス
売り上げランキング: 23,898

Amazon.co.jp で詳細を見る

ソフトウェアのバージョン

Mac OS X Mountain Lion 10.8.3
node.js v0.10.8
npm@1.2.23
express@3.2.5
socket.io@0.9.14

事前準備

1. node.jsをインストールします。

wget http://nodejs.org/dist/node-latest.tar.gz
tar zxvf node-latest.tar.gz
cd node-v0.10.8/
./configure
make
sudo make install
node -v
>>v0.10.8

2. npmをインストールします。

sudo curl https://npmjs.org/install.sh | sudo sh

3. expressをグローバルインストールします。

sudo npm install express -g

アプリケーションのひな形を自動生成する

1. expressコマンドでサンプルアプリケーションのひな形を作ります。

express -e SampleApp

2. カレントディレクトリを移動しつつ、必要なライブラリを同時にインストールします。

cd SampleApp && npm install

express@3.2.5 node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── commander@0.6.1
├── mkdirp@0.3.4
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.10 (pause@0.0.1, qs@0.6.5, bytes@0.2.0, cookie@0.0.5, formidable@1.0.14)

3. socket.ioをローカルインストールします。node_moduleディレクトリの配下にライブラリがインストールされます。

sudo npm install socket.io

socket.io@0.9.14 node_modules/socket.io
├── base64id@0.1.0
├── policyfile@0.0.4
├── redis@0.7.3
└── socket.io-client@0.9.11 (xmlhttprequest@1.4.2, uglify-js@1.2.5, active-x-obfuscator@0.0.1, ws@0.4.25)

4. 続いて、app.jsとviewsディレクトリのindex.ejsを編集していきます。

サーバサイド（app.js）

自動生成されたapp.jsを一部変更します。変更部分にはコメントを入れています。

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  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());
});

app.get('/', routes.index);
app.get('/users', user.list);

server = http.createServer(app); // add
//http.createServer(app).listen(app.get('port'), function(){ // del
server.listen(app.get('port'), function(){ //add
  console.log("Express server listening on port " + app.get('port'));
});

// add start
var socketIO = require('socket.io');
// クライアントの接続を待つ(IPアドレスとポート番号を結びつけます)
var io = socketIO.listen(server);

// クライアントが接続してきたときの処理
io.sockets.on('connection', function(socket) {
  console.log("connection");
  // メッセージを受けたときの処理
  socket.on('message', function(data) {
    // つながっているクライアント全員に送信
    console.log("message");
    io.sockets.emit('message', { value: data.value });
  });
  
  // クライアントが切断したときの処理
  socket.on('disconnect', function(){
    console.log("disconnect");
  });
});
// add end

クライアントサイド（index.ejs）

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://localhost:3000');
socket.on('connect', function(msg) {
  console.log("connet");
  document.getElementById("connectId").innerHTML = 
    "あなたの接続ID::" + socket.socket.transport.sessid;
  document.getElementById("type").innerHTML = 
    "接続方式::" + socket.socket.transport.name;
});

// メッセージを受けたとき
socket.on('message', function(msg) {
  // メッセージを画面に表示する
  document.getElementById("receiveMsg").innerHTML = msg.value;
});

// メッセージを送る
function SendMsg() {
  var msg = document.getElementById("message").value;
  // メッセージを発射する
  socket.emit('message', { value: msg });
}
// 切断する
function DisConnect() {
  var msg = socket.socket.transport.sessid + "は切断しました。";
  // メッセージを発射する
  socket.emit('message', { value: msg });
  // socketを切断する
  socket.disconnect();
}
</script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

  <h1>socket.ioのサンプルプログラム</h1>
  <div id="connectId"></div>
  <div id="type"></div>
  <br>
  <input type="text" id="message" value="">
  <input type="button" value="メッセージを送る" onclick="SendMsg()">
  <input type="button" value="切断する" onclick="DisConnect()">
  <div id="receiveMsg"></div>

  </body>
</html>